markdown下使用mermaid绘图—基本语法

发表于 更新于 分类于 ，

方向

  • TB - top to bottom
  • TD - top-down/ same as top to bottom
  • BT - bottom to top
  • RL - right to left
  • LR - left to right
1
2
graph LR
    Start --> Stop
1
2
graph LR
    Start --> Stop

节点 & 形状

1
2
graph LR
    id
1
2
graph LR
    id

节点文本

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

节点形状

圆边（A node with round edges）

1
2
graph LR
    id1(This is the text in the box)
1
2
graph LR
    id1(This is the text in the box)

体育场（A stadium-shaped node）

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

子程序（A node in a subroutine shape）

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

圆柱形（A node in a cylindrical shape）

1
2
graph LR
    id1[(Database)]
1
2
graph LR
    id1[(Database)]

圆圈（A node in the form of a circle）

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

不对称（A node in an asymmetric shape）

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

Currently only the shape above is possible and not its mirror. This might change with future releases.

菱形（A rhombus node）

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

六边形（A hexagon node）

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

平行四边形（Parallelogram）

1
2
graph TD
    id1[/This is the text in the box/]
1
2
graph TD
    id1[/This is the text in the box/]

转换的平行四边形（Parallelogram alt）

1
2
graph TD
    id1[\This is the text in the box\]
1
2
graph TD
    id1[\This is the text in the box\]

梯形（Trapezoid）

1
2
graph TD
    A[/Christmas\]
1
2
graph TD
    A[/Christmas\]

转换的梯形（Trapezoid alt）

1
2
graph TD
    B[\Go shopping/]
1
2
graph TD
    B[\Go shopping/]

Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.

1
2
graph LR
    A-->B
1
2
graph LR
    A-->B
1
2
graph LR
    A --- B
1
2
graph LR
    A --- B

Text on links

1
2
graph LR
    A-- This is the text! ---B
1
2
graph LR
    A-- This is the text! ---B

or

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

A link with arrow head and text

1
2
graph LR
    A-->|text|B
1
2
graph LR
    A-->|text|B

or

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

Dotted link with text

1
2
graph LR
   A-. text .-> B
1
2
graph LR
   A-. text .-> B
1
2
graph LR
   A ==> B
1
2
graph LR
   A ==> B

Thick link with text

1
2
graph LR
   A == text ==> B
1
2
graph LR
   A == text ==> B

It is possible declare many links in the same line as per below:

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

It is also possible to declare multiple nodes links in the same line as per below:

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

You can then describe dependencies in a very expressive way. Like the one-liner below:

1
2
graph TB
    A & B--> C & D
1
2
graph TB
    A & B--> C & D

If you describe the same diagram using the the basic syntax, it will take four lines. A word of warning, one could go overboard with this making the graph harder to read in markdown form. The Swedish word lagom comes to mind. It means, not too much and not too little. This goes for expressive syntaxes as well.

1
2
3
4
5
graph TB
    A --> C
    A --> D
    B --> C
    B --> D
1
2
3
4
5
graph TB
    A --> C
    A --> D
    B --> C
    B --> D

Beta: New arrow types

When using flowchart instead of graph there are new types of arrows supported as per below:

1
2
3
flowchart LR
    A --o B
    B --x C
1
2
3
flowchart LR
    A --o B
    B --x C

Beta: Multi directional arrows

When using flowchart instead of graph there is the possibility to use multidirectional arrows.

1
2
3
4
flowchart LR
    A o--o B
    B <--> C
    C x--x D
1
2
3
4
flowchart LR
    A o--o B
    B <--> C
    C x--x D

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

1
2
3
4
5
6
graph TD
    A[Start] --> B{Is it?};
    B -->|Yes| C[OK];
    C --> D[Rethink];
    D --> B;
    B ---->|No| E[End];
1
2
3
4
5
6
graph TD
    A[Start] --> B{Is it?};
    B -->|Yes| C[OK];
    C --> D[Rethink];
    D --> B;
    B ---->|No| E[End];

When the link label is written in the middle of the link, the extra dashes must be added on the right side of the link. The following example is equivalent to the previous one:

1
2
3
4
5
6
graph TD
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    C --> D[Rethink];
    D --> B;
    B -- No ----> E[End];
1
2
3
4
5
6
graph TD
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    C --> D[Rethink];
    D --> B;
    B -- No ----> E[End];

Special characters that break syntax

It is possible to put text within quotes in order to render more troublesome characters. As in the example below:

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

Entity codes to escape characters

It is possible to escape characters using the syntax exemplified here.

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

Numbers given are base 10, so # can be encoded as #35;. It is also supported to use HTML character names.

Subgraphs

1
2
3
subgraph title
    graph definition
end
1
2
3
subgraph title
    graph definition
end

An example below:

1
2
3
4
5
6
7
8
9
10
11
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
1
2
3
4
5
6
7
8
9
10
11
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

You can also set an explicit id for the subgraph.

1
2
3
4
5
graph TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end
1
2
3
4
5
graph TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

Beta: flowcharts

With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the graph below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

参考 mermaid 官网

-------------文章结束啦 ฅ●ω●ฅ 感谢您的阅读-------------