Mermaid

Mermaid is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.

Just insert your mermaid code in the mermaid shortcode and that’s it.

Flowchart example

{{<mermaid align="left">}}
graph LR;
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
{{< /mermaid >}}

renders as

Link text
One
Two
Hard edge
Round edge
Decision
Result one
Result two

or you can use this alternative syntax:

renders as

Link text
One
Two
Hard edge
Round edge
Decision
Result one
Result two

Sequence example

{{<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!
{{< /mermaid >}}

renders as

AliceBobJohnHello John, how are you?Fight against hypochondrialoop[Healthcheck]Rational thoughtsprevail...Great!How about you?Jolly good!AliceBobJohn

or you can use this alternative syntax:

renders as

AliceBobJohnHello John, how are you?Fight against hypochondrialoop[Healthcheck]Rational thoughts prevail...Great!How about you?Jolly good!AliceBobJohn

GANTT Example

{{<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
{{< /mermaid >}}

renders as

2014-01-072014-01-092014-01-112014-01-132014-01-152014-01-172014-01-192014-01-21Completed task Completed task in the critical line Implement parser and jison Active task Create tests for parser Future task Future task in critical line Future task2 Create tests for renderer Add to mermaid A sectionCritical tasksAdding GANTT diagram functionality to mermaid

or you can use this alternative syntax:

renders as

2014-01-072014-01-092014-01-112014-01-132014-01-152014-01-172014-01-192014-01-21Completed task Completed task in the critical line Implement parser and jison Active task Create tests for parser Future task Future task in critical line Future task2 Create tests for renderer Add to mermaid A sectionCritical tasksAdding GANTT diagram functionality to mermaid

Class example

renders as

Class01int chimpint gorillasize()AveryLongClassClass03Class04Class05Class06Class07Object[] elementDataequals()Class08Class09C2C3CoolWhere am i?Cool label

Git example

renders as

master, 8b426d7

4bc38de

fba2feb

fec465e

newbranch, 00eba61

b8a61fa