Mermaid - graph

→ Back to Mermaid overview

Syntax

{{#mermaid:graph TD;
 A-->B;
 A-->C;
 B-->D;
 C-->D;
}}

Wide top-down graph example

Note that, as of this writing, an issue exists where the leftmost unlabelled edge is sometimes cut off in the rendered diagram.

See also:

• https://github.com/SemanticMediaWiki/Mermaid/issues/73
• this mermaid.js issue and the assocated PR on GitHub

What you type	What you get
{{#mermaid:graph TD A[input files] --> B[pipeline] B --> C[output 1] B --> D[output 2] C --> E[post-process 1] C --> F[post-process 2] C --> G[post-process 2] D --> G[post-process 2] C --> H[display] D --> H[dipslay] B --> I[summary] E --> I[summary] F --> I[summary] G --> I[summary] H --> I[summary] }}

Workaround using a subgraph

Not optimal, because the subgraph gets styled with a solid color background, but theoretically this could be overridden with CSS or theme variables.

What you type	What you get
{{#mermaid: config.flowchart.useMaxWidth=true | graph TD subgraph   A[input files] --> B[pipeline] B --> C[output 1] B --> D[output 2] C --> E[post-process 1] C --> F[post-process 2] C --> G[post-process 2] D --> G[post-process 2] C --> H[display] D --> H[dipslay] B --> I[summary] E --> I[summary] F --> I[summary] G --> I[summary] H --> I[summary] end }}