Specify a JSON file to define a flow chart. { "nodes": [ { "id": "n1", "label": "input one" }, { "id": "n2", "label": "input two" }, { "id": "n3", "label": "processor" }, { "id": "n4", "label": "output one" }, { "id": "n5", "label": "output two" }, { "id": "n6", "label": "output three" } ], "edges": [ ["n1", "n3"], ["n2", "n3"], ["n3", "n4"], ["n3", "n5"], ["n3", "n6"] ] } At the minimum edges must be provided. :include-flow-chart: simple-dag.json

Use \n to split your label into multiple lines. { "nodes": [ { "id": "n1", "label": "input\none" }, { "id": "n2", "label": "output\ntwo" } ], "edges": [ ["n1", "n2"] ] }

Add config section to specify a common size for all the nodesNote: Size unit is not based on pixels. It is sized in inches (assuming correct DPI). It is the size units used by https://graphviz.gitlab.io/ Graphviz)Use width and height property on a node itself to control individual nodes size:

{ "nodes": [ { "id": "n1", "label": "label 1" }, { "id": "n2", "label": "label 2", "highlight": true }, { "id": "n3", "label": "label 3" } ], "edges": [ ["n1", "n2"], ["n2", "n3"], ["n1", "n3"] ] } Use highlight to highlight a node.Or use highlight property of a flow-chart include plugin. :include-flow-chart: simple-dag.json {highlight: "n3"} Note: To highlight more than one element use {highlight: ["n3", "n4"]}

Use colorGroup to assign a color group to a node. There are four color groups out of the box: a (default), b , c , d . { "nodes": [ { "id": "n1", "label": "input one" }, { "id": "n2", "label": "input two" }, { "id": "n3", "label": "processor", "colorGroup": "b" }, { "id": "n4", "label": "output one", "colorGroup": "c" }, { "id": "n5", "label": "output two", "colorGroup": "c" }, { "id": "n6", "label": "output three", "colorGroup": "d" } ], "edges": [ ["n1", "n3"], ["n2", "n3"], ["n3", "n4"], ["n3", "n5"], ["n3", "n6"] ] }

Use shape to assign one of the predefined shapes. { "nodes": [ { "id": "researcher", "label": "researcher", "shape": "actor" }, { "id": "db", "label": "two", "shape": "database" }, { "id": "another-db", "label": "three input", "shape": "database-bottom-label" }, { "id": "processor", "label": "processor", "colorGroup": "b" }, { "id": "outcome", "colorGroup": "c", "shape": "world" }, { "id": "config", "label": "config file", "colorGroup": "b", "shape": "document" } ], "edges": [ ["researcher", "processor"], ["researcher", "config"], ["db", "processor"], ["another-db", "processor"], ["config", "outcome"], ["processor", "outcome"] ] }

Use include-diagram-legend to add a legend to your diagram. Optionally add clickableNodes: true to insert a message that the nodes are clickable (in case you use urls). :include-diagram-legend: {a: "inputs", b: "optimization process", c: "outcome", d: "unknown", clickableNodes: true} :include-flow-chart: flow-diagrams/simple-dag-colors.json inputs optimization process outcome unknown

In presentation mode nodes will be highlighted one at a time.To force all highlights to appear at once add this before (either in the same section, or at the start of a document). :include-meta: {allAtOnce: true}

To switch layout from horizontal to vertical use vertical: true .

Use layout to specify a different underlying layout engine. Only dot (default) and neato is supported at the moment. :include-flow-chart: simple-dag.json {layout: "neato"} https://www.graphviz.org/pdf/neatoguide.pdf Neato layout guide from Graphviz

To attach links to nodes use url property.Combine links and highlights to create a sub navigation for your product. { "nodes": [ { "id": "n1", "label": "No Link" }, { "id": "n2", "label": "Link To Java", "url": "java/content-extraction" }, { "id": "n3", "label": "Link to External", "url": "http://commonmark.org" } ], "edges": [ ["n1", "n2"], ["n3", "n2"] ] }

Move node definitions to a one or more separate files if you use them across multiple diagrams. { "edges": [ ["a1", "a2"], ["b1", "b2"], ["b1", "a2"] ] } [ { "id": "a1", "label": "Label A 1" }, { "id": "a2", "label": "Label A 2" }, { "id": "a3", "label": "Label A 3" } ] [ { "id": "b1", "label": "Label B 1" }, { "id": "b2", "label": "Label B 2" }, { "id": "b3", "label": "Label B 3" } ] :include-flow-chart: flow-diagrams/graph-using-lib.json {nodeLibPath: "nodes/set-a.json"} :include-flow-chart: flow-diagrams/graph-using-lib.json {nodeLibPath: ["nodes/set-a.json", "nodes/set-b.json"]}