introduce

About mermaid

Mermaid allows you to create charts and visualizations using text and code.

It is a Javascript based chart and chart tool that presents Markdown inspired text definitions to dynamically create and modify charts.

Reference address: https://mermaid-js.github.io/mermaid/#/

Icon type

flow chart

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Sequence diagram

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!

Gantt chart

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

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

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

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

Class diagram

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

Git Diagram --! experiment

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

Entity relationship diagram --! experiment

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

erDiagram
          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
          CUSTOMER ||--o{ ORDER : places
          CUSTOMER ||--o{ INVOICE : "liable for"
          DELIVERY-ADDRESS ||--o{ ORDER : receives
          INVOICE ||--|{ ORDER : covers
          ORDER ||--|{ ORDER-ITEM : includes
          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
          PRODUCT ||--o{ ORDER-ITEM : "ordered in"

User journey map

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

Graph syntax

flowchart is basically the same as the graph, but the former is more rounded when drawing curves.

graphical

One node (default)

graph LR
	id

Node with text

You can also set text in a box different from id. If you do this multiple times, it will be the last text found for the node that will be used. In addition, if you define edges for nodes later, you can omit the text definition. The previously defined one will be used when rendering the box.

graph LR
	id1[This is the text in the box]

graphical

This statement declares the direction of the flowchart.

This states that the flowchart is oriented from top to bottom (TD or TB).

graph TD
	start-->stop it

This indicates that the flowchart is left to right (LR).

graph LR
	start-->stop it

Flow chart

• TB - top to bottom
• TD - top down / same as top down
• BT - bottom up
• RL - right to left
• LR - left to right

Node shape

Nodes with rounded edges

graph LR
	id1([This is the text in the box])

Nodes in subroutine shapes

graph LR
	id1[[This is the text in the box]]

Cylindrical node

graph LR
	id1[(Database)]

Circular node

graph LR
	id1((This is the text in the circle))

Node with asymmetric shape

graph LR
	id1>This is the text in the box]

One node (diamond)

graph LR
	id1{This is the text in the box}

Hexagonal node

graph LR
	id1{{This is the text in the box}}

parallelogram

graph LR
	id1[/This is the text in the box/]

Inverse parallelogram

graph LR
	id1[\This is the text in the box\]

trapezoid

graph LR
	id1[/This is the text in the box\]

Inverted trapezoid

graph LR
	id1[\This is the text in the box/]

Links between nodes

Nodes can be connected to links / edges. You can have different types of links or attach text strings to links.

Link with arrow

graph LR
	A-->B

An open link

graph LR
	A --- B

Text on link

graph LR
	A-- This is the text ---B

perhaps

graph LR
	A--- |This is the text|B

Links with arrows and text

graph LR
	A -->|text|B

perhaps

graph LR
	A -- text -->B

Dashed link

graph LR;
	A -.-> B;

Dashed link with text

graph LR;
	A -.text.-> B;

Thick line link

graph LR;
	A ==> B;

Bold link with text

graph LR;
	A ==text==> B;

Linked links

You can declare many links on the same line, as shown below

graph LR
	A --  text  --> B --  text2  --> C

You can also declare multiple node links on the same line, as shown below

graph LR
	a --> b & c --> d

You can then describe dependencies in a very expressive way. Like the following single line:

graph TB
	A & B --> C & D

Use the same basic syntax as your chart description. As a warning, this may make the flowchart more difficult to read. The Swedish word lagom came to mind. This means not too much and not too little. This also applies to expressive grammar.

graph TB
	A --> C 
	A --> D 
	B --> C 
	B --> D

New arrow type

graph LR
	A --. B 
	B --x C

Multidirectional arrow

graph LR
    A o--o B
    B <--> C
    C x--x D

Minimum length of link

Each node in the flowchart is eventually assigned to a level in the rendering diagram, that is, based on the vertical or horizontal level of the node to which it is linked (depending on the direction of the flowchart). By default, links can span any number of ranks, but you can require any link to be longer than others by adding additional dashes to the link definition.

In the following example, two additional dashes are added to the link from node B to node E so that it spans more than two ranks than a regular link:

graph TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

Note: in order to accommodate other requests, the rendering engine may cause the length of the link to exceed the number of requested ranks.

When the link label is written in the middle of the link, an additional dash must be added to the right of the link. The following example is equivalent to the previous example:

graph TD
    A[Start] --> B{Is it?}
    B -- Yes --> C[OK]
    C --> D[Rethink]
    D --> B
    B -- No ----> E[End]

For points or thick links, the characters to be added are equal signs or points, as shown in the following table:

Length	1	2	3
Normal	---	----	-----
Normal with arrow	-->	--->	---->
Thick	===	====	=====
Thick with arrow	==>	===>	====>
Dotted	-.-	-..-	-...-
Dotted with arrow	-.->	-..->	-...->

Special characters that break grammar

To render more troublesome characters, you can put the text in quotation marks. As shown in the following example:

graph LR
    id1["This is the (text) in the box"]

Entity code of escape character

You can use the syntax of the example here to escape characters.

graph LR
        A["A double quote:#quot;"] -->B["A dec char:#9829;"]

The given number is based on 10, so # it can be encoded as #35;. HTML character names are also supported.

Subgraph

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

You can also set explicit IDs for subgraphs.

flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

flow chart

Using the graphtype flowchart, you can also set the edge between the graph and the sub graph, as shown in the flowchart below.

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

Direction in subgraph

Using the graphtype flowchart, you can use the direction statement to set the direction in which the subgraph will be rendered, as shown in this example.

Because direction is not supported in Typora, the display results here modify this part

flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2

Interaction

flowchart LR
    A-->B
    B-->C
    C-->D
    D-->E
    click A "http://www.github.com" _blank
    click B "http://www.github.com" "Open this in a new tab" _blank
    click C href "http://www.github.com" _blank
    click D href "http://www.github.com" "Open this in a new tab" _blank

graph LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C

Style nodes

You can apply specific styles to nodes, such as thicker borders or different background colors.

flowchart LR
    id1(Start)-->id2(Stop)
    id3(Start)-->id4(Stop)
    id5(Start)-->id6(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:1px,height:50
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 3,width:100
    style id3 fill:#f6e,stroke:#103,stroke-width:3px
    style id4 fill:#5af,stroke:#f16,stroke-width:4px,color:#fff,stroke-dasharray: 6
    style id5 fill:#f3f,stroke:#933,stroke-width:5px
    style id6 fill:#b4f,stroke:#361,stroke-width:6px,color:#fff,stroke-dasharray: 9

class

flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96;

CSS class

flowchart LR;
    A-->B[AAA<span>BBB</span>]
    B-->D
    class A cssClass

Support for icon fonts

flowchart TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?)

Graph declaration with spaces between vertices and links without semicolons

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

Sequence diagram

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

grammar

participant

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hi Bob
    Bob->>Alice: Hi Alice

Aliases

Participants 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!

Arrow Type

Six types of arrows are currently supported:

Type	Description
->	Solid line without arrow
–>	Dotted line without arrow
->>	Solid line with arrowhead
–>>	Dotted line with arrowhead
-x	Solid line with a cross at the end
–x	Dotted line with a cross at the end.
-)	Solid line with an open arrow at the end (async)
–)	Dotted line with a open arrow at the end (async)

activation

Participants can be activated and deactivated. (deactivation) can be a special declaration:

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

There is also a shortcut to add a + / - suffix after the message arrow:

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

You can overlay activation for the same participant:

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!