Adobe Spectrum Hugo Demo Documentation FAQ Technology Radar Tags DocumentationFAQTechnology RadarTags
 

Mermaid examples

Graph

graph TD;
    A-->B;
    A-->C;
    A-->D;
A
B
C
D
graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
Link text
One
Two
Hard edge
Round edge
Decision
Result one
Result two

Sequence diagram

sequenceDiagram
    autonumber
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
AliceJohnBobloop[Healthcheck]Rational thoughts!Hello John, how are you?1Fight against hypochondria2Great!3How about you?4Jolly good!5AliceJohnBob

Class diagram

classDiagram
    Customer "1" --> "*" Ticket
    Student "1" --> "1..*" Course
    Galaxy --> "many" Star : Contains
1
*
1
1..*
Contains
many
Customer
Ticket
Student
Course
Galaxy
Star

State diagram

stateDiagram
        [*] --> Active

        state Active {
            [*] --> NumLockOff
            NumLockOff --> NumLockOn : EvNumLockPressed
            NumLockOn --> NumLockOff : EvNumLockPressed
            --
            [*] --> CapsLockOff
            CapsLockOff --> CapsLockOn : EvCapsLockPressed
            CapsLockOn --> CapsLockOff : EvCapsLockPressed
            --
            [*] --> ScrollLockOff
            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
        }
Active
EvNumLockPressed
EvNumLockPressed
NumLockOff
NumLockOn
EvCapsLockPressed
EvCapsLockPressed
CapsLockOff
CapsLockOn
EvCapsLockPressed
EvCapsLockPressed
ScrollLockOff
ScrollLockOn

Gantt diagram

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

       section Documentation
       Describe gantt syntax               :active, a1, after des1, 3d
       Add gantt diagram to demo page      :after a1  , 20h
       Add another diagram to demo page    :doc1, after a1  , 48h

       section Last section
       Describe gantt syntax               :after doc1, 3d
       Add gantt diagram to demo page      :20h
       Add another diagram to demo page    :48h
Adding GANTT diagram functionality to mermaid2014-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 Describe gantt syntax Active task Create tests for parser Add gantt diagram to demo page Add another diagram to demo page Future task Future task in critical line Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page Future task2 Create tests for renderer Add to mermaid A sectionCritical tasksDocumentationLast sectionAdding GANTT diagram functionality to mermaid

Pie diagram

pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
Key elements in Product X40%46%9%5%Key elements in Product XCalciumPotassiumMagnesiumIron

Last modified February 24, 2020: add support for mermaid diagrams (#4) (67d969d)