😴 🧙🌈 ʕ•ᴥ•ʔ

The following is a cheat-sheet for creating diagrams with mermaid.js.

https://jojozhuang.github.io/tutorial/mermaid-cheat-sheet/


1. Flowcharts

A flowchart is a type of diagram that represents an algorithm, workflow or process. The flowchart shows the steps as boxes of various kinds, and their order by connecting the boxes with arrows. This diagrammatic representation illustrates a solution model to a given problem.

1.1 Graph

Possible directions are:

DirectionDiagramDefinition
TB
graph TB;A-->B;
A
B
BT
graph BT;A-->B;
A
B
RL
graph RL;A-->B;
A
B
LR
graph LR;A-->B;
A
B
TD
graph TD;A-->B;
A
B

1.2 Nodes & shapes

FeatureDiagramDefinition
Node(Default)
graph LR;id;
id
Node with Text
graph LR;id1[This is the text in the box]
This is the text in the box
Node with Round Edges
graph LR;id1(This is the text in the box)
This is the text in the box
Node in Circle Form
graph LR;id1((This is the text in the circle))
This is the text in the circle
Node in Asymmetric Shape
graph LR;id1>This is the text in the box]
This is the text in the box
Node in Rhombus Form
graph LR;id1{This is the text in the box}
This is the text in the box
FeatureDiagramDefinition
Link with Arrow Head
graph LR;A-->B
A
B
Open Link
graph LR;A---B
A
B
Text on Links(1)
graph LR;A-- This is the text ---B
This is the text
A
B
Text on Links(2)
graph LR;A---|This is the text|B
This is the text
A
B
Link with Arrow Head and Text(1)
graph LR;A-->|text|B
text
A
B
Link with Arrow Head and Text(2)
graph LR;A-- text -->B
text
A
B
Dotted Link
graph LR;A-.->B;
A
B
Dotted Link with Text
graph LR;A-. text .-> B
text
A
B
Thick Link
graph LR;A ==> B
A
B
Thick link with text
graph LR;A == text ==> B
text
A
B

1.4 Subgraphs

Syntax:

subgraph title
    graph definition
end

Example:

graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
three
two
one
c1
c2
b1
b2
a1
a2

2. Sequence Diagrams

A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.

2.1 Participants

The participants or actors are rendered in order of appearance in the diagram source text.

sequenceDiagram
    participant Alice
    participant John
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
AliceJohnHello John, how are you?Great!AliceJohn

You can specify the actor’s order of appearance to show the participants in a different order.

sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
JohnAliceHello John, how are you?Great!JohnAlice

The participants can be defined implicitly without specifying them with the participant keyword.

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
AliceJohnHello John, how are you?Great!AliceJohn

2.2 Aliases

The participant can have a convenient identifier and a descriptive label.

sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J-->>A: Great!
AliceJohnHello John, how are you?Great!AliceJohn

2.3 Messages

Messages can be of two displayed either solid or with a dotted line.

[Actor][Arrow][Actor]:Message text

There are six types of arrows currently supported:

Arrow TypeDescription
->Solid line without arrow
–>Dotted line without arrow
Solid line with arrowhead
–»Dotted line with arrowhead
-xSolid line with a cross at the end (async)
–xDotted line with a cross at the end (async)

2.4 Activations

Activate and deactivate an actor.

sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John
AliceJohnHello John, how are you?Great!AliceJohn

Shortcut notation by appending +/- suffix to the message arrow.

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!
AliceJohnHello John, how are you?John, can you hear me?Hi Alice, I can hear you!I feel great!AliceJohn

Activations can be stacked for same actor:

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!
AliceJohnHello John, how are you?John, can you hear me?Hi Alice, I can hear you!I feel great!AliceJohn

2.5 Notes

Add notes to a sequence diagram by the notation Note.

Note [ right of | left of | over ] [Actor]: Text in note content
  1. Right Side
sequenceDiagram
    participant John
    Note right of John: Text in note
JohnText in noteJohn
  1. Left Side
sequenceDiagram
    participant John
    Note left of John: Text in note
JohnText in noteJohn
  1. Over
sequenceDiagram
    participant John
    Note over John: Text in note
JohnText in noteJohn
  1. Create notes spanning two participants
sequenceDiagram
    Alice->>John: Hello John, how are you?
    Note over Alice,John: A typical interaction
AliceJohnHello John, how are you?A typical interactionAliceJohn

2.6 Loops

Express loops in a sequence diagram by the notation loop.

loop Loop text
... statements ...
end
sequenceDiagram
    Alice->John: Hello John, how are you?
    loop Every minute
        John-->Alice: Great!
    end
AliceJohnHello John, how are you?Great!loop[ Every minute ]AliceJohn

2.7 Alt

Express alternative paths in a sequence diagram by the notation alt.

alt Describing text
... statements ...
else
... statements ...
end

Or, if there is sequence that is optional (if without else).

opt Describing text
... statements ...
end

Example:

sequenceDiagram
    Alice->>John: Hello John, how are you?
    alt is sick
        John->>Alice: Not so good :(
    else is well
        John->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        John->>Alice: Thanks for asking
    end
AliceJohnHello John, how are you?Not so good :(Feeling fresh like a daisyalt[ is sick ][ is well ]Thanks for askingopt[ Extra response ]AliceJohn

3. Gant Diagrams

A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule. Gantt charts illustrate the start and finish dates of the terminal elements and summary elements of a project.

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    First Task       :a1, 2018-07-01, 30d
    Another Task     :after a1, 20d
    section Another
    Second Task      :2018-07-12, 12d
    Third Task       : 24d
2018-07-012018-07-082018-07-152018-07-222018-07-292018-08-052018-08-122018-08-19First TaskAnother TaskSecond TaskThird TaskSectionAnotherA Gantt Diagram
gantt
       dateFormat  YYYY-MM-DD
       title Adding GANTT diagram functionality to mermaid

       section A section
       Completed task            :done,    des1, 2018-01-06,2018-01-08
       Active task               :active,  des2, 2018-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, 2018-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
2018-01-072018-01-092018-01-112018-01-132018-01-152018-01-172018-01-192018-01-21Completed taskActive taskFuture taskFuture task2Completed task in the critical lineImplement parser and jisonCreate tests for parserFuture task in critical lineCreate tests for rendererAdd to mermaidDescribe gantt syntaxAdd gantt diagram to demo pageAdd another diagram to demo pageDescribe gantt syntaxAdd gantt diagram to demo pageAdd another diagram to demo pageA sectionCritical tasksDocumentationLast sectionAdding GANTT diagram functionality to mermaid

4. Demos

4.1 Basic Flowchart

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D
Link text
Square Rect
Circle
Round Rect
Rhombus

4.2 Flowchart with Decision

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
Get money
One
Two
Three
Christmas
Go shopping
Let me think
Laptop
iPhone
Car

4.3 Larger Flowchart with Some Styling

graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

     classDef green fill:#9f6,stroke:#333,stroke-width:2px
     classDef orange fill:#f96,stroke:#333,stroke-width:4px
     class sq,e green
     class di orange
A
Two line
edge comment
Odd shape
Rounded
square
shape
Diamond with
line break
Rounded square shape
Square shape
Circle shape
Inner / circle
and some odd
special characters
Really long text with linebreak
in an Odd shape
,.?!+-\*ز
Cyrillic
Circle shape Начало

4.4 Basic Sequence Diagram

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?
AliceBobJohnHello Bob, how are you?How about you John?I am good thanks!I am good thanks!Bob thinks a longlong time, so longthat the text doesnot fit on a row.Checking with John...Yes... John, how are you?AliceBobJohn

4.5 Message to Self in Loop

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!
AliceBobJohnHello John, how are you?Fight against hypochondrialoop[ Healthcheck ]Rational thoughtsprevail...Great!How about you?Jolly good!AliceBobJohn

5. References

#reads #rong zhuang #mermaid #diagrams #cheat-sheet