Mermaid Chart#

MermaidJS is library for generating svg charts and diagrams from text.

Override Mermaid initialization config
To override the initialization config for Mermaid, create a mermaid.json file in your assets folder!

Example#

  • ```mermaid
    stateDiagram-v2
        State1: The state with a note
        note right of State1
            Important information! You can write
            notes.
        end note
        State1 --> State2
        note left of State2 : This is the note to the left.
    ```
  • The state with a note

    Important information! You can write
    notes.

    State2

    This is the note to the left.

  • {{< mermaid [class="..."] >}}
    stateDiagram-v2
        State1: The state with a note
        note right of State1
            Important information! You can write
            notes.
        end note
        State1 --> State2
        note left of State2 : This is the note to the left.
    {{< /mermaid >}}
  • The state with a note

    Important information! You can write
    notes.

    State2

    This is the note to the left.

Diagrams#

Explore more diagrams and syntax on Mermaid documentation page.

The state with a note

Important information! You can write
notes.

State2

This is the note to the left.

JohnAliceJohnAliceHello John, how are you?Great!See you later!

Animal

+int age

+String gender

+isMammal()

+mate()

Duck

+String beakColor

+swim()

+quack()

Fish

-int sizeInFeet

-canEat()

Zebra

+bool is_wild

+run()

From Duck till Zebra

can fly\ncan swim\ncan dive\ncan help in debugging

Animal example

Still

Moving

Crash

Simple sample
maindevelop0-8a64ca01-7c5c9cf2-cc0ae283-6be95925-3fba8b86-3090dcfExample Git diagram
2014-01-052014-01-122014-01-192014-01-262014-02-022014-02-092014-02-16A task          Task in Another another task    Another task    SectionAnotherA Gantt Diagram
79%17%3%Pets adopted by volunteersDogsCatsRats
We should expandNeed to promoteRe-evaluateMay be improvedCampaign FCampaign ECampaign DCampaign CCampaign BCampaign ALow ReachHigh ReachLow EngagementHigh EngagementReach and engagement of campaigns