荆棘从死亡中来，死亡又包含着新生。
        •  0 回帖  •  6.2K 浏览  •  5 年前
   

markdown 由简入繁，上手跟我做（七）mermaid 画流程图

第一、流程图示例

```mermaid
graph LR;
　　Portal-->|发布/更新配置|Apollo配置中心;
　　Apollo配置中心-->|实时推送|App;
　　App-->|实时查询|Apollo配置中心;
```

graph LR;
　　Portal-->|发布/更新配置|Apollo配置中心;
　　Apollo配置中心-->|实时推送|App;
　　App-->|实时查询|Apollo配置中心;

```mermaid
graph TB
　　client-->|2 findConfigServices|LoadBalancer;
　　LoadBalancer-->|3 findService|metaServer;
　　metaServer-->Eureka;
　　client-->|4 access via ip:port/client load balance/error retry|ConfigService;
　　ConfigService-->|1 register/cancel|Eureka;
　　ConfigService-->|read/write|ConfigDB;
```

graph TB
　　client-->|2 findConfigServices|LoadBalancer;
　　LoadBalancer-->|3 findService|metaServer;
　　metaServer-->Eureka;
　　client-->|4 access via ip:port/client load balance/error retry|ConfigService;
　　ConfigService-->|1 register/cancel|Eureka;
　　ConfigService-->|read/write|ConfigDB;

```mermaid
graph LR;
　　client---core;
　　client---common;
　　core---common;
　　common---portal;
　　common---Biz;
　　Biz---ConfigService;
　　Biz---AdminService;
```

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

第二、语法

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

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

其中“方向描述”为

用词含义原始意思
TB从上到下Top-->Bottom
BT从下到上Bottom-->Top
RL从右到左Right-->Left
LR从左到右Left-->Right

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

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

需要注意的是，如果节点的文字中包含标点符号，需要时用双引号包裹起来。
另外如果希望在文字中使用换行，请使用</br>替换换行
节点间的连线

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

子图表

使用以下语法添加子图表

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

对 fontawesome 的支持

使用fa: #图表名称#的语法添加 fontawesome。

举个例子

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

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

序列图

使用以下语法开始序列图

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

例如

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

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

参与者

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

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

消息线

类型描述
->无箭头的实线
-->无箭头的虚线
->>有箭头的实线
-->>有箭头的虚线
-x末端为叉的实线（表示异步）
--x末端为叉的虚线（表示异步）

处理中

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

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

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

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

上一篇 markdown 由简入繁，上手跟我做（六）数学公式进阶
markdown 教程（目录）
下一篇 markdown 由简入繁，上手跟我做（八）时序图