[图形绘制/流程图] Mermaid : 开源的低代码图形绘制语言、协议及工具
序[*]开门见山，先说最重要的几个结论：
[*]AI时代来临，mermaid成为和markdown一样，同样重要的、平台中立的/跨平台的、开源开放的低代码文档语言协议。mermaid主攻：低代码绘图。
本篇的缘由
[*]开源的低代码绘图文档协议领域，有3大框架，mermaid一骑绝尘于flow 、 sequence.js
[*]极其容易集成：mermaid易于集成到markdown / html / obsidian / drawio 等
概述：Mermaid
[*]Mermaid是一种基于Javascript的、开源的文本驱动图表生成工具/绘图工具，，使用类似于Markdown的低代码语法，它允许用户使用简单的文本语言来创建各种类型的图表，如流程图、时序图、甘特图和饼状图等。
[*]https://github.com/mermaid-js/mermaid
[*]https://mermaid.js.org/
[*]Mermaid可以作为JavaScript库或独立的命令行工具使用，支持在HTML、Markdown或AsciiDoc文档中嵌入图表定义。
Mermaid的主要绘制功能
Mermaid能绘制哪些图？
[*]饼状图：使用pie关键字，具体用法后文将详细介绍
[*]流程图：使用graph关键字，具体用法后文将详细介绍
[*]序列图：使用sequenceDiagram关键字
[*]甘特图：使用gantt关键字
[*]类图：使用classDiagram关键字
[*]状态图：使用stateDiagram关键字
[*]用户旅程图：使用journey关键字
Mermaid的基本用法
[*]在HTML或Markdown文件中引用Mermaid库和Mermaid CSS样式表。
[*]使用Mermaid的CLI工具在命令行中生成图表。
[*]使用Mermaid的API在自己的应用程序中生成图表。
Mermaid的语法基础
[*]Mermaid的语法类似于Markdown，易于学习和使用。以下是一些基本的语法示例：
[*]定义节点
id[文字]（矩形节点），id((文字))（圆角矩形节点），id>文字]（旗帜状节点），id{文字}（菱形节点）, ...
[*]定义连线：
->（添加尾部箭头），--（单线），==（粗线），-.（虚线）, ...
Mermaid的高级功能和使用场景
[*]Mermaid支持自定义部署，可以通过调用API在应用程序中使用。
[*]它还可以与AI结合，实现一键生成图表的功能。
[*]Mermaid的优点在于其简单性和可移植性，用户可以轻松地将图表定义嵌入到任何支持HTML、Markdown或AsciiDoc的文档中。
支持工具与集成
Mermaid 官网(支持免登录、在线绘制)
[*]https://mermaid-js.github.io/mermaid-live-editor/edit
可能需要挂梯子
HTML网页中集成 Mermaid
[*]样例：调用完成后，mermaid-js将会默认将HTML页面中class为mermaid的标签渲染为mermaid流程图
<span class='mermaid'>graph LRBox1["Hi"] --> BoxHaha["Haha"]</span><script src="https://cdn.jsdelivr.net/npm/mermaid@10.2.3/dist/mermaid.min.js"></script>
[*]怎么获取最新版的mermaidjs地址呢？
[*]最新版的mermaidjs地址可以在 https://www.jsdelivr.com/package/npm/mermaid 获取
Markdown文档中集成Mermaid
[*]mermaid的语法为代码块语法的执行功能，语言为 mermaid
[*]示例
'''mermaid!# 注意，为此处展示需要，需要将3个'符号转为3个`符号graph TD;A-->B;A-->C;B-->D;C-->D;'''效果：
Obsidian 支持 Mermaid
'''mermaid!graph LR%%这是一条注释，在渲染图中不可见 A -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D C -->|Two| E'''
[*]相关文献
[*]obsidian中调整和对齐 Mermaid 图表样式 - Zhihu
设置 > 外观 > 向下滚动到 CSS 代码片段 > 点击右侧的文件夹图标，打开 snippets 文件夹
Tyora 支持 Mermaid
[*]Typora(一款美观的Markdown编辑器)支持以下代码块画流程图
[*]flow：流程图，会自动被 flowchart.js 渲染。
[*]sequence：序列图，会自动被 js-sequence 解析和渲染
[*]mermaid：mermaid图。
[*]要使 Typora 支持代码绘图，需要对 Typora 软件进行相应设置：
[*]【文件】-【偏好设置…】-【Markdown】-【Markdown扩展语法】：启用图表 (序列图、流程图和Marmaid图)
[*]并重启 Typora 生效。
[*]当 Typora 将 Markdown 文档导出为 HTML、PDF、epub、docx 文件格式时，相关渲染图也将包括在内；但是当 Typora 将 Markdown 导出为当前版本的其他文件格式时，相关渲染图将不包括在内。
'''mermaid!# 注意，为此处展示需要，需要将3个'符号转为3个`符号graph LR Start --> Stop''''''mermaidgraph LRA[方形] -->B(圆角) B --> C{条件a} C -->|a=1| D[结果1] C -->|a=2| E[结果2] F[横向流程图]'''
Mermaid的语法与经典案例
CASE：朱元璋家谱简图
graph LRemperor((朱八八))-.子.->朱五四-.子.->朱四九-.子.->朱百六朱雄英--长子-->朱标--长子-->emperoremperor2((朱允炆))--次子-->朱标朱樉--次子-->emperor朱棡--三子-->emperoremperor3((朱棣))--四子-->emperoremperor4((朱高炽))--长子-->emperor3
CASE：饼图
[*]在线渲染器：
[*]Online FlowChart & Diagrams Editor
https://mermaid-js.github.io/mermaid-live-editor/edit
[*]语法 —— 仅供参考，建议直接看实例
[*]从pie关键字开始图表
[*]然后，使用title关键字及其在字符串中的值，为饼图赋予标题。（这是可选的）
[*]数据部分
[*]在" "内写上分区名。
[*]分区名后使用:作为分隔符
[*]分隔符后写上数值，最多支持2位小数——数据会以百分比的形式展示
[*]实例
pie title 为什么总是宅在家里？ "喜欢宅" : 15 "天气太热或太冷" : 20 "穷" : 500
CASE: 流程图
graph LR A --> B{Is it?}; B -- Yes --> C; C --> D; D --> B; B -- No ----> E;
方向
[*]方向：用于开头，声明流程图的方向。
[*]graph或graph TB或graph TD：从上往下
[*]graph BT：从下往上
[*]graph LR：从左往右
[*]graph RL：从右往左
节点
[*]无名字的节点：直接写内容，此时结点边框为方形；节点内容不支持空格
[*]有名字的节点：节点名后书写内容，内容左右有特定符号，结点边框由符号决定；节点内容可以有空格
下面的实例中，没有为graph指定方向，因此默认是从上往下的。但是由于各个结点之前没有箭头，所以他们都处于同一排。id1-id6是节点名，可随意定义。
graph 默认方形 id1[方形] id2(圆边矩形) id3([体育场形]) id4[[子程序形]] id5[(圆柱形)] id6((圆形))
graph id1{菱形} id2{{六角形}} id3[/平行四边形/] id4[\反向平行四边形\] id5[/梯形\] id6[\反向梯形/]
连线样式
[*]实线箭头：分为无文本箭头和有文本箭头，有文本箭头有2种书写格式
graph LRa-->b--文本1-->c-->|文本2|d
[*]粗实线箭头：分为无文本箭头和有文本箭头
graph LRa==>b==文本==>c
[*]虚线箭头：分为无文本箭头和有文本箭头
graph LRa-.->b-.文本.->c
[*]无箭头线：即以上三种连线去掉箭头后的形式
graph LRa---bb--文本1!---cc---|文本2|dd===ee==文本3===ff-.-gg-.文本.-h
[*]其他连线：需要将graph关键字改为flowchart，除了新增加的连线形式外，上面三种线的渲染效果也会不同
flowchart LR A o--o B B <--> C C x--x D 旧连线 --文本--> 也会不同
[*]延长连线：增加相应字符即可，如下图中的B到E，连线中增加了一个-。字符可多次添加。
graph LR A --> B{Is it?}; B -->|Yes| C; C --> D; D --> B; B --->|No| E;
连线形式
[*]直链
graph LR A -- text --> B -- text2 --> C
[*]多重链：可以使用&字符，或单个描述
graph a --> b & c--> d A & B--> C & D X --> M X --> N Y --> M Y --> N
注释
[*]注释：在行首加入%%即可。
graph LR%%这是一条注释，在渲染图中不可见 A -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D C -->|Two| E
其他
[*]子图：需要将graph关键字改为flowchart，在代码段的开始加入subgraph，尾部加入end
flowchart TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end one --> two three --> two two --> c2
Y 推荐资源
mermaid 【推荐】
[*]mermaid
2025.02.09 : 6.9k fork / 75.4k star
Slogan : 以类似于标记的方式从文本生成流程图或序列图
[*]https://mermaid.js.org/#/
[*]https://github.com/mermaid-js/mermaid
flow
[*]flow
2025.02.09 : 1.2k fork / 8.6k star
[*]https://flowchart.js.org/
[*]http://cncounter.github.io/flowchart/
sequence.js
[*]sequence.js
2025.02.09 : 1.1k fork / 7.8k star
[*]https://github.com/bramp/js-sequence-diagrams
[*]https://bramp.github.io/js-sequence-diagrams/
X 参考文献
[*]mermaid教程 - Zhihu
[*]typora支持的流程图的语法 - CSDN
流程图 / UML时序图 / 甘特图 /
[*]Markdown——Mermaid使用 - 博客园
[*]HTML - 在网页上显示mermaid流程图（使用纯js在网页上显示mermaid流程图） - CSDN
[*]https://web.letmefly.xyz/Links/mermaid.min.js
页:
[1]