Mermaid - graph

→ Back to Mermaid overview

Graph example

Syntax

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

Result

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

Syntax

{{#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]
}}

Result

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.

Syntax

{{#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
}}

Result