Mermaid 简明教程
参考资料
- Mermaid 官方文档:mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.
- Github:Mermaid 中文说明文档
- Mermaid 在线编辑 Github:mermaid-live-editor
- VScode 插件:Markdown Preview Mermaid Support
- VScode 插件:Mermaid Markdown Syntax Highlighting
推荐阅读
流程图快速入门
案例 1:常规流程图
1 | graph TD |
1 | graph TD |
第一行:TD(Top down)自上而下;
除此之外,还有上 (Top) 下 (Bottom) 左 (Left) 右 (Right),可以两两组合来确定流程图的方向第二行:中括号表示图形中的矩形,圆括号为圆角矩形,两竖线之间的表示箭头上的文字
除此之外,还有各种箭头和图形样式,这里不再列举,详细请查看官方文档和 Mermaid 流程图 - Sherwood 的博客
案例 2:带有子图的流程图
子图的基本语法为
1 | subgraph title |
完整案例如下
1 | flowchart RL |
1 | flowchart RL |
特别注意:两竖线中的内容(也就是箭头上的文字)不能包含双引号,在 Mermaid 中算是特殊符号,请查阅 Mermaid 流程图 - Sherwood 的博客,需要额外进行处理。"
来表示双引号。所以,在箭头上还是尽量少用双引号吧😀
以下方式均会导致绘图出错
1 | b1-->|1.username = '"zhangsan"'|servlet1 |
正确的处理方式
1 | b1-->|"username = "zhangsan""|servlet1 |