方向：

TB 命令

源码：

```mermaid
    graph TB
    A --> B
```

效果：

TD 命令

源码：

```mermaid
    graph TD
    A --> B
```

效果：

BT 命令

源码：

```mermaid
    graph BT
    A --> B
```

效果：

RL 命令：

源码：

```mermaid
    graph RL
    A --> B
```

效果：

LR 命令：

源码：

```mermaid
    graph LR
    A --> B
```

效果：

节点形状

源码：

```mermaid
    graph TB
    A[text]
    B(text)
    C((text))
    D>text]
    E{text}
```

效果：

连线形状

源码：

```mermaid
    graph TB
    A1 --> B1
    A2 --- B2
    A3 -.-> B3
    A4 -.- B4
    A5 === B5
    A6 ==> B6
```

效果：

源码：

```mermaid
    graph TB
    A1 --text--> B1
    A2 ---|text| B2
    A3 -.text.-> B3
    A4 -.-|text| B4
    A5 ==text=== B5
    A6 ==>|text| B6
```

效果：

多个节点之间的多个连线：
源码：

```mermaid
    graph TB
    A --> D
    A --> E
    A --> F
    B -.-> F
    C -.-> F
```

效果：

子流程图

源码：

```mermaid
    graph TB
    subgraph one
        A1 --> B1
    end
    subgraph two
        A2 === B2
    end
    subgraph three
        A3 -.-> B2
    end
```

效果：

注释

graph流程图中以 %% 为开头注释一行。

```mermaid
    graph LR
    A --> B %%此处为注释
```

链接

源码：

```mermaid
graph LR;
    A-->B;
    click A "https://www.asciim.cn"
```

效果：

注： 点击上图A，则会调整到 https://www.asciim.cn

子图表

语法格式：

```mermaid
    subgraph 子图表名称
        子图表中的描述语句...
    end
```

源码：

```mermaid
graph TB
    id1(圆角矩形)--普通线-->id2[矩形]
    subgraph 子图表
        id2==粗线==>id3{菱形}
        id3-.虚线.->id4>右向旗帜]
        id3--无箭头---id5((圆形))
    end
```

效果：

序列图

使用以下语法格式，开始序列图：

```mermaid
sequenceDiagram
    [参与者1][消息线][参与者2]:消息体
```

源码：

```mermaid    
sequenceDiagram
    张三->>李四: 吃了吗？
    李四->>张三: 吃了
```

效果：

参与者

上例中的张三、李四都是参与者，上例中的语法是最简单的，也可以明显表明参与者有哪些:

语法格式：

```mermaid
sequenceDiagram
    participant 参与者 1
    participant 参与者 2
    ...
    participant 简称 as 参与者 3 #该语法可以在接下来的描述中使用简称来代替参与者 3
```

消息线

处理中

在消息线末尾增加 + ，则消息接收者进入当前消息的“处理中”状态；
在消息线末尾增加 - ，则消息接收者离开当前消息的“处理中”状态。

或者使用以下语法直接说明某个参与者进入“处理中”状态:

activate 参与者

标注

语法如下

Note 位置表述 参与者: 标注文字

位置表述:
right of 右侧
left of 左侧
over 在当中，可以横跨多个参与者

循环

语法如下

loop 循环的条件
    循环体描述语句
end

判断

alt 条件 1 描述
    分支 1 描述语句
else 条件 2 描述 # else 分支可选
    分支 2 描述语句
else ...
    ...
end

如果遇到可选的情况，即没有 else 分支的情况，使用如下语法：

opt 条件描述
    分支描述语句
end

综合举例：

源码：

```mermaid
sequenceDiagram
    participant z as 张三
    participant l as 李四
    loop 日复一日
        z->>l: 吃了吗您呐？
        l-->>z: 吃了，您呢？
        activate z
        Note left of z: 想了一下
        alt 还没吃
            z-xl: 还没呢，正准备回去吃
        else 已经吃了
            z-xl: 我也吃过了，哈哈
        end
        opt 大过年的
            l-->z: 祝您新年好啊
        end
    end
```

格式：

甘特图(gantt)

甘特图是一类条形图，由Karol Adamiechi在1896年提出, 而在1910年Henry Gantt也独立的提出了此种图形表示。通常用在对项目终端元素和总结元素的开始及完成时间进行的描述。

简单的甘特图，举例

源码：

```mermaid
    gantt
    dateFormat YYYY-MM-DD

    section S1
    T1: 2014-01-01, 9d

    section S2
    T2: 2014-01-11, 9d

    section S3
    T3: 2014-01-02, 9d
```

效果：

复杂的甘特图，举例：

源码：

```mermaid
    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

```

效果：

关于日期的格式可以参考：
http://momentjs.com/docs/#/parsing/string-format/
https://github.com/mbostock/d3/wiki/Time-Formatting

中文演示:

引用：
https://www.jianshu.com/p/598b121bdbef
https://www.iminho.me/wiki/docs/mindoc/mermaid.md