Notice: Undefined index: text in C:\zmofun\www\zmfWeb\usr\plugins\MarkdownParse\Parsedown.php on line 468

Notice: Undefined index: text in C:\zmofun\www\zmfWeb\usr\plugins\MarkdownParse\Parsedown.php on line 468

Notice: Undefined index: text in C:\zmofun\www\zmfWeb\usr\plugins\MarkdownParse\Parsedown.php on line 468

Notice: Undefined index: text in C:\zmofun\www\zmfWeb\usr\plugins\MarkdownParse\Parsedown.php on line 468

Notice: Undefined index: text in C:\zmofun\www\zmfWeb\usr\plugins\MarkdownParse\Parsedown.php on line 468

Notice: Undefined index: text in C:\zmofun\www\zmfWeb\usr\plugins\MarkdownParse\Parsedown.php on line 468

Notice: Undefined index: text in C:\zmofun\www\zmfWeb\usr\plugins\MarkdownParse\Parsedown.php on line 468

Notice: Undefined index: text in C:\zmofun\www\zmfWeb\usr\plugins\MarkdownParse\Parsedown.php on line 468

Notice: Undefined index: text in C:\zmofun\www\zmfWeb\usr\plugins\MarkdownParse\Parsedown.php on line 468

Notice: Undefined index: text in C:\zmofun\www\zmfWeb\usr\plugins\MarkdownParse\Parsedown.php on line 468

Notice: Undefined index: text in C:\zmofun\www\zmfWeb\usr\plugins\MarkdownParse\Parsedown.php on line 468

Notice: Undefined index: text in C:\zmofun\www\zmfWeb\usr\plugins\MarkdownParse\Parsedown.php on line 468

Notice: Undefined index: text in C:\zmofun\www\zmfWeb\usr\plugins\MarkdownParse\Parsedown.php on line 468

1. 三种基本线型及扩展

1.1 三种基本线型

节点之间通过连线来连接，一共有3种线的形状，虚线：-.-、实线：–--、粗实线:===。

代码（注意代码块类型为mermaid）:

（代码块类型mermaid）
graph TB
    A1-.-B1
    A2---B2
    A3===B3

效果如下：

1.2 给基本线型加上箭头

在基本线型符号串的右边加上>符号，去掉左边第1个符号，使其保持仍然是3个符号，就获得了带箭头的线型。虚线有点特殊，它的第一个符号可以不去掉。

代码如下（注意代码块类型为mermaid）:

（代码块类型mermaid）
graph TB
    A1.->B1
    A2-->B2
    A3==>B3

效果如下：

1.3 在线段中间加上说明文字

上面6种连线，中间都可以加上说明文字。带文字连线的符号串是这样来的：

1. 在符号串的左边加上说明文字。
2. 再在说明文字的左边加上基本线型的符号串（只取前两个符号）。

举个例子

虚线带箭头:.->

左边加上说明文字:说明.->

再在左边加上基本线型的前两个符号:-.说明.->

代码如下（注意代码块类型为mermaid）:

（代码块类型mermaid）
graph TB
    A1-.虚线文字-.-B1
    A2-.虚线文字.->B2
    A3--实线文字---B3
    A4--实线文字-->B4
    A5==粗线文字===B5
    A6==粗线文字==>B6

效果如下：

1.4 总结

由3种基本线型，加上箭头变为6种，6种线型加上文字变为12种。

2. 四种图形走向

所有节点之间的连线，带箭头的表示其具有方向性，一块Mermaid代码块内，所有节点连线方形是一致的。那么总共有如下四种，用相应的两个字符表示。

其中T表示top，B表示bottom，L表示left，R表示right。这里又有个特殊的，TB也可用TD表示。

下面的图分别表示上面四种图形方形

• TB: 从上到下（也可以用TD）

• BT: 从下到上

• LR: 从左到右

• RL: 从右到左

3. 五种节点外观

Mermaid只提供了5种节点的外观。一般就可以满足要求。

语法	形状	示例
[]	矩形	图1
()	矩形带小圆角	图2
(())	大圆	图3
{}	棱形	图4
>]	三角形矩形组合	图5

为什么菱形不是>？因为这个符号要拿来表示箭头，分身乏术，只能用{}来表示。

效果如下：

（代码块类型mermaid）
graph TB
    A1[I am A1] -.虚线文字-.- B1[B1]
    A2(A2) -.虚线文字-.- B2((B2))
    A3{A3} -.虚线文字-.- B3{B3}
    A4>A4] -.虚线文字-.- B4>B4]

更多：

（代码块类型mermaid）
graph TD
    A[矩形] --> B(圆角) --> C{菱形}
    D([This is the text in the box]) --> E[[带边框的矩形]] --> F[\平行四边形\]
    G{{六边形}} --> H((圆形)) --> I[/平行四边形/]
    J>非对称图形] --> K[/梯形\] --> L[\梯形/]
    M[(圆柱形)]

4. 一种子图形

Mermaid还提供了子图形，可以被嵌入图形中。子图形以subgraph开始，以end结束。子图形必须提供标题，不能对图形方向作主。

代码如下（注意代码块类型为mermaid）:

（代码块类型mermaid）
graph TB
    A-->D
    A-->F
    subgraph title2
    C-->D
    C-->subName1((sub))
    end
    subgraph title1
    A---B
    end
    subgraph title3
    E-.-F
    end

效果如下：

5. 一个流程图

代码如下（注意代码块类型为mermaid）:

（代码块类型mermaid）
graph TB
    style start fill:#eee
    start((Start))
    endn((End))
    op0[ ]
    op1[Your Operation]
    start-->op0
    op0-->op1
    check{Yes or No?}
    op1-->check
    check --No--> op0
    check --Yes--> endn

效果如下：

官方的例子：

（代码块类型mermaid）
graph TD
    A((Start)) --> B{Is it?};
    B -->|Yes| C[OK];
    C --> D[Rethink];
    D --> B;
    B -->|No| E((End));

6. 一个状态图

代码如下（注意代码块类型为mermaid）:

（代码块类型mermaid）
stateDiagram
    state fork_state <<fork>>
    state join_state <<join>>
    [*] --> fork_state
    fork_state --> state1
    fork_state --> state2
    fork_state --> state3
    state3 --> [*]
    state1 --> join_state
    state2 --> join_state
    join_state --> [*]