使用mermaid画流程图
本文介绍使用mermaid画流程图，并给出几个示例。
背景
目前，除有明确格式要求的文档外，笔者一般使用markdown写文档、笔记。当文档有图片时，使用Typora等软件可实时渲染，所见即所得。但如果文档接收方没有安装相关工具，效果则会大打折扣。Typora支持导出不同格式的文件。如果导出为pdf，对文字拷贝不友好。如果导出为word，格式不友好。
笔者的部分文档，shell命令、代码版本较多，因此选定html格式，体积小，方便浏览，但对图片不友好。但是，如果只是涉及流程图，则可以考虑用mermaid绘制。
笔者先前知道这个东西，但没用起来，最近因为一份非正式文档要发布于内网，且有流程图，于是用之，便有了本文。
实践
用法
在Typora中使用mermaid即可绘制流程图。语法如下：
```mermaid
graph TD
这里开始绘制
```
如果语法正确，即时可见效果，如出错，会有提示，示例如下：
下面列出画图的笔记。
graph TD 方向从上(Top)到下(Down)
direction LR：方向从左(Left)到右(Right)
开始([开始做事])：椭圆形，与程序流程图的开始、结束类似。
子流程：
%% 这是准备工作子流程
subgraph 准备工作
direction LR
%%...
end
黄色虚线：
style 打道回府 fill:#FFFFF0,stroke-dasharray:5,stroke-width:2px,stroke:#000
示例：简单的登录流程（有判断条件）
代码：
graph TD
A([开始]) --> B[输入用户名和密码]
B --> C{验证成功?}
C -->|是| D[进入主页]
C -->|否| E[显示错误信息]
D --> F([结束])
E --> B
style A fill:#D5E8D4,stroke:#333,stroke-width:2px
style F fill:#D5E8D4,stroke:#333,stroke-width:2px
style C fill:#FFD2D2,stroke:#333,stroke-width:2px
效果图如下：
示例 ：订单处理流程（有判断条件）
代码：
graph TD
A([开始]) --> B[接收订单]
B --> C[检查库存]
C --> D{库存充足?}
D -->|是| E[确认订单]
D -->|否| F[通知库存不足]
E --> G[安排发货]
G --> H([结束])
F --> H
style A fill:#D5E8D4,stroke:#333,stroke-width:2px
style H fill:#D5E8D4,stroke:#333,stroke-width:2px
style D fill:#FFD2D2,stroke:#333,stroke-width:2px
效果图：
示例 ：产品发布流程
代码：
graph TD
A([项目启动]) --> B[需求分析]
B --> C[设计系统架构]
C --> D[开发]
D --> E[测试]
E --> F{测试通过?}
F -->|是| G[部署上线]
F -->|否| H[修复问题]
H --> E
G --> I([项目结束])
style A fill:#D5E8D4,stroke:#333,stroke-width:2px
style I fill:#D5E8D4,stroke:#333,stroke-width:2px
style F fill:#FFD2D2,stroke:#333,stroke-width:2px
效果图：
示例：有子流程图的流程
代码：
graph TD
%% 这是准备工作子流程
subgraph 准备工作
direction LR
准备1 --> 检查清单
检查清单 --> 确认清单
end
subgraph 工作阶段1
direction LR
阶段1开始 --> 阶段1结束
end
subgraph 出发
end
subgraph 工作阶段2
direction LR
阶段2开始 --> 阶段2事情1
阶段2事情1 --> 一个事
阶段2事情1 --> 另一个事
end
subgraph 再次检查
direction LR
检查开始 --> 检查结束
end
subgraph 打道回府
direction LR
收拾1 -.-> 收拾2
end
开始([开始做事]) --> 准备工作
准备工作 --> 工作阶段1
工作阶段1 --> 出发
出发 --> 工作阶段2
工作阶段2 --> 再次检查
再次检查 --> 结束([结束做事])
%% 虚拟
结束([结束做事]) -.-> 打道回府
%% 虚线
style 打道回府 fill:#FFFFF0,stroke-dasharray:5,stroke-width:2px,stroke:#000
效果图：
graph TD
%% 这是准备工作子流程
subgraph 准备工作
direction LR
准备1 --> 检查清单
检查清单 --> 确认清单
end
subgraph 工作阶段1
direction LR
阶段1开始 --> 阶段1结束
end
subgraph 出发
end
subgraph 工作阶段2
direction LR
阶段2开始 --> 阶段2事情1
阶段2事情1 --> 一个事
阶段2事情1 --> 另一个事
end
subgraph 再次检查
direction LR
检查开始 --> 检查结束
end
subgraph 打道回府
direction LR
收拾1 -.-> 收拾2
end
开始([开始做事]) --> 准备工作
准备工作 --> 工作阶段1
工作阶段1 --> 出发
出发 --> 工作阶段2
工作阶段2 --> 再次检查
再次检查 --> 结束([结束做事])
%% 虚拟
结束([结束做事]) -.-> 打道回府
%% 虚线
style 打道回府 fill:#FFFFF0,stroke-dasharray:5,stroke-width:2px,stroke:#000
部分markdown工具正确渲染，下面是效果图的截图。
示例：有主流程、详细流程的流程
代码：
graph TD
subgraph 主要流程
A[开始做事] --> B[准备工作]
B --> C[工作阶段1]
C --> D[工作阶段2]
D --> E[结束做事]
end
subgraph 准备工作
direction RL
F[准备1]
G[检查清单]
H[再次检查清单]
end
subgraph 工作阶段1
direction RL
I[阶段1开始]
J[阶段1结束]
K[出发]
end
subgraph 工作阶段2
direction RL
L[阶段2开始]
M[阶段2事情1]
N[一个事]
O[另一个事]
end
subgraph 结束做事
direction RL
P[再次检查]
Q[收拾1]
R[收拾2]
end
B --> 准备工作
C --> 工作阶段1
D --> 工作阶段2
E --> 结束做事
style A fill:#D5E8D4,stroke:#333,stroke-width:2px
style B fill:#DAE8FC,stroke:#333,stroke-width:2px
style C fill:#DAE8FC,stroke:#333,stroke-width:2px
style D fill:#DAE8FC,stroke:#333,stroke-width:2px
style E fill:#D5E8D4,stroke:#333,stroke-width:2px
style F fill:#FFF2CC,stroke:#333,stroke-width:2px
style G fill:#FFF2CC,stroke:#333,stroke-width:2px
style H fill:#FFF2CC,stroke:#333,stroke-width:2px
style I fill:#FFF2CC,stroke:#333,stroke-width:2px
style J fill:#FFF2CC,stroke:#333,stroke-width:2px
style K fill:#FFF2CC,stroke:#333,stroke-width:2px
style L fill:#FFF2CC,stroke:#333,stroke-width:2px
style M fill:#FFF2CC,stroke:#333,stroke-width:2px
style N fill:#FFF2CC,stroke:#333,stroke-width:2px
style O fill:#FFF2CC,stroke:#333,stroke-width:2px
style P fill:#FFF2CC,stroke:#333,stroke-width:2px
style Q fill:#FFF2CC,stroke:#333,stroke-width:2px
style R fill:#FFF2CC,stroke:#333,stroke-width:2px
效果图：
graph TD
subgraph 主要流程
A[开始做事] --> B[准备工作]
B --> C[工作阶段1]
C --> D[工作阶段2]
D --> E[结束做事]
end
subgraph 准备工作
direction RL
F[准备1]
G[检查清单]
H[再次检查清单]
end
subgraph 工作阶段1
direction RL
I[阶段1开始]
J[阶段1结束]
K[出发]
end
subgraph 工作阶段2
direction RL
L[阶段2开始]
M[阶段2事情1]
N[一个事]
O[另一个事]
end
subgraph 结束做事
direction RL
P[再次检查]
Q[收拾1]
R[收拾2]
end
B --> 准备工作
C --> 工作阶段1
D --> 工作阶段2
E --> 结束做事
style A fill:#D5E8D4,stroke:#333,stroke-width:2px
style B fill:#DAE8FC,stroke:#333,stroke-width:2px
style C fill:#DAE8FC,stroke:#333,stroke-width:2px
style D fill:#DAE8FC,stroke:#333,stroke-width:2px
style E fill:#D5E8D4,stroke:#333,stroke-width:2px
style F fill:#FFF2CC,stroke:#333,stroke-width:2px
style G fill:#FFF2CC,stroke:#333,stroke-width:2px
style H fill:#FFF2CC,stroke:#333,stroke-width:2px
style I fill:#FFF2CC,stroke:#333,stroke-width:2px
style J fill:#FFF2CC,stroke:#333,stroke-width:2px
style K fill:#FFF2CC,stroke:#333,stroke-width:2px
style L fill:#FFF2CC,stroke:#333,stroke-width:2px
style M fill:#FFF2CC,stroke:#333,stroke-width:2px
style N fill:#FFF2CC,stroke:#333,stroke-width:2px
style O fill:#FFF2CC,stroke:#333,stroke-width:2px
style P fill:#FFF2CC,stroke:#333,stroke-width:2px
style Q fill:#FFF2CC,stroke:#333,stroke-width:2px
style R fill:#FFF2CC,stroke:#333,stroke-width:2px
总结
鉴于实践经验少，因此画的流程图也少。从上文可以看到，有些图的样式不太美观，这需再细调。
另外，除那个有虚线的图是自己手工绘制外，其它均借用AI工具生成。
原文地址：https://blog.csdn.net/subfate/article/details/145575469
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！