Mermaid 实用教程

​ Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染。Typora是一个比较好的编辑器。

Mermaid 支持多种图表的方向，语法如下：

graph 方向描述
    图表中的其他语句...12

1、方向描述

用词	含义
TB	从上到下
BT	从下到上
RL	从右到左
LR	从左到右

2、节点定义。

​ 即流程图中每个文本块，包括开始、结束、处理、判断等。Mermaid 中每个节点都有一个 id，以及节点的文字。

表述	说明
id[文字]	矩形节点
id(文字)	圆角矩形节点
id((文字))	圆形节点
id>文字]	右向旗帜状节点
id{文字}	菱形节点

注意：如果节点的文字中包含标点符号，需要时用双引号包裹起来。

3、节点间的连线

表述	说明
>	添加尾部箭头
-	不添加尾部箭头
--	单线
--text--	单线上加文字
==	粗线
==text==	粗线加文字
-.-	虚线
-.text.-	虚线加文字

4、例子

sequenceDiagram
Alice ->> Bob: Authentication Request;
Bob ->> Alice: Authentication Response;
Alice ->> Bob: Another authentication Request;
Alice ->> test: Another authentication Request;
test ->> Alice: Another authentication Request;
Alice ->> Bob: another authentication Response;

graph BT;
　　client-->core;
　　client-->coe1;
　　client-->co2;
　　
　　co2-->test1;
　　co2-->test2;
　　co2-->test3;
　　

graph LR;
　　client---core;
　　client---common;
　　core---common;
　　common---portal;
　　common---Biz;
　　common---CC;
　　Biz---ConfigService;
　　Biz---AdminService;

sequenceDiagram
    Alice->John: Hello John, how are you?
    a->b:are you ok 
    b->>a:ok;
    note right of b:test;

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
        dateFormat  YYYYMMDD
        title Adding GANTT diagram functionality to mermaid
        section A section
        完成任务        :done,    des1, 20140106,20140108
        激活任务          :active,  des2, 20140109, 3d
        未来任务               :         des3, after des2, 5d
        未来任务2              :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 20140106,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

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

    subgraph A subgraph
        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 cyr,sq,e green
     class di orange