Mermaid - graph

This page holds examples for the Mermaid extension. See also mermaidjs.github.io for further documentation.

example 1 - graph

Syntax

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

Result

example 2 - graph with links

Syntax

{{#mermaid:graph TD;
 A-->B;
 A-->C;
 B-->D;
 C-->D;
 click A "https://sandbox.semantic-mediawiki.org/wiki/A"
 click B "https://sandbox.semantic-mediawiki.org/wiki/B"
 click C "https://sandbox.semantic-mediawiki.org/wiki/C"
 click D "https://sandbox.semantic-mediawiki.org/wiki/D"
}}

Result

example 3 - sequence diagram

Syntax

{{#mermaid:sequenceDiagram
 participant Alice
 participant Bob
  Alice->John: Hello John, how are you?
  loop Healthcheck
   John->John: Fight against hypochondria
  end
  Note right of John: Rational thoughts <br/>prevail...
   John-->Alice: Great!
   John->Bob: How about you?
   Bob-->John: Jolly good!
}}

Result

example 4 - gantt chart

Syntax

{{#mermaid:gantt
 dateFormat  YYYY-MM-DD
 title Adding GANTT diagram functionality to mermaid
 section A section
 Completed task            :done,    des1, 2014-01-06,2014-01-08
 Active task               :active,  des2, 2014-01-09, 3d
 Future task               :         des3, after des2, 5d
 Future task2              :         des4, after des3, 5d
 section Critical tasks
 Completed task in the critical line :crit, done, 2014-01-06,24h
 Implement parser and jison          :crit, done, after des1, 2d
 Create tests for parser             :crit, active, 3d
 Future task in critical line        :crit, 5d
 Create tests for renderer           :2d
 Add to mermaid                      :1d
}}

Result