[图形绘制/流程图/AI/GPT/JS] Mermaid : 开源的低代码图形绘制语言、协议及工具——AI时代的绘图宠儿
目录
- 序
- 概述:Mermaid
- 支持工具与集成
- Mermaid Live Editor : Mermaid 官方提供(支持免登录、在线绘制)
- HTML网页中集成 Mermaid
- Markdown文档中集成Mermaid
- Obsidian 支持 Mermaid
- Tyora 支持 Mermaid
- DrawIO 支持 Mermaid
- VSCode 支持 Mermaid 插件: Markdown Preview Mermaid Support
- Mermaid的语法与经典案例
- Y 推荐资源
- X 参考文献
序
- 开门见山,先说最重要的几个结论:
- 本篇由来:AI时代来临,
mermaid
成为和markdown
一样,同样重要的、平台中立的/跨平台的、开源开放的低代码文档语言协议。mermaid主攻:低代码绘图。
- step1:在DeepSeek等ai模型中输入指令,要求按照你要的图表类型生成Mermaid代码
- step2:复制deepseek等ai模型的mermaid输出结果,并粘贴到支持mermaid语法协议的软件工具中,即可渲染出图。
- 开源的低代码绘图文档协议领域,有3大框架,
mermaid
一骑绝尘于flow
、sequence.js
- 极其容易集成:
mermaid
易于集成到markdown
/html
/ obsidian / drawio 等
Mermaid
在markdown
中集成很简单,声明是mermaid
代码块,把它当做代码块插入即可以。
相信看完此篇,对软件开发等IT从业人员和内容创作者会大开眼界,也必然会提升工作效率
概述:Mermaid
Mermaid
是一种基于Javascript的、开源的文本驱动图表生成工具/绘图工具,,使用类似于Markdown的低代码语法,它允许用户使用简单的文本语言来创建各种类型的图表,如流程图、时序图、甘特图和饼状图等。
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 Live Editor : Mermaid 官方提供(支持免登录、在线绘制)
可能需要挂梯子
HTML
网页中集成 Mermaid
- 样例:调用完成后,
mermaid-js
将会默认将HTML
页面中class
为mermaid
的标签渲染为mermaid
流程图
<span class='mermaid'>
graph LR
Box1["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[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
'''
- 相关文献
设置 > 外观 > 向下滚动到 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
'''
'''mermaid
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]
'''
DrawIO 支持 Mermaid
- https://www.drawio.com/ (官网首页)
- https://github.com/jgraph/drawio (github)
- 调整图形-插入-高级-Mermaid
VSCode 支持 Mermaid 插件: Markdown Preview Mermaid Support
VSCode
对markdown
支持相当友好- 其
Mermaid
的支持只需要安装一下插件即可,插件名称:Markdown Preview Mermaid Support
Mermaid的语法与经典案例
CASE:朱元璋家谱简图
graph LR
emperor((朱八八))-.子.->朱五四-.子.->朱四九-.子.->朱百六
朱雄英--长子-->朱标--长子-->emperor
emperor2((朱允炆))--次子-->朱标
朱樉--次子-->emperor
朱棡--三子-->emperor
emperor3((朱棣))--四子-->emperor
emperor4((朱高炽))--长子-->emperor3
CASE:饼图
- 在线渲染器:
- Online FlowChart & Diagrams Editor
- 语法 —— 仅供参考,建议直接看实例
- 从
pie
关键字开始图表- 然后,使用
title
关键字及其在字符串中的值,为饼图赋予标题。(这是可选的)- 数据部分
- 在
" "
内写上分区名。- 分区名后使用
:
作为分隔符- 分隔符后写上数值,最多支持
2
位小数——数据会以百分比的形式展示
- 实例
pie
title 为什么总是宅在家里?
"喜欢宅" : 15
"天气太热或太冷" : 20
"穷" : 500
CASE: 流程图
graph LR
A[Start] --> B{Is it?};
B -- Yes --> C[OK];
C --> D[Rethink];
D --> B;
B -- No ----> E[End];
方向
- 方向:用于开头,声明流程图的方向。
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 LR
a-->b--文本1-->c-->|文本2|d
- 粗实线箭头:分为无文本箭头和有文本箭头
graph LR
a==>b==文本==>c
- 虚线箭头:分为无文本箭头和有文本箭头
graph LR
a-.->b-.文本.->c
- 无箭头线:即以上三种连线去掉箭头后的形式
graph LR
a---b
b--文本1!---c
c---|文本2|d
d===e
e==文本3===f
f-.-g
g-.文本.-h
- 其他连线:需要将
graph
关键字改为flowchart
,除了新增加的连线形式外,上面三种线的渲染效果也会不同
flowchart LR
A o--o B
B <--> C
C x--x D
旧连线 --文本--> 也会不同
- 延长连线:增加相应字符即可,如下图中的B到E,连线中增加了一个
-
。字符可多次添加。
graph LR
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B --->|No| E[End];
连线形式
- 直链
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[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
其他
- 子图:需要将
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 : 以类似于标记的方式从文本生成流程图或序列图
- Mermaid 官方资料
[1] Mermaid入门指引: https://mermaid.js.org/intro/getting-started.html
[2] Mermaid用法: https://mermaid.js.org/config/usage.html
[3] Mermaid教程: https://mermaid.js.org/ecosystem/tutorials.html
flow
- flow
2025.02.09 : 1.2k fork / 8.6k star
sequence.js
- sequence.js
2025.02.09 : 1.1k fork / 7.8k star
X 参考文献
流程图 / UML时序图 / 甘特图 /

本文链接: https://www.cnblogs.com/johnnyzen/p/18706467
关于博文:评论和私信会在第一时间回复,或直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
日常交流:大数据与软件开发-QQ交流群: 774386015 【入群二维码】参见左下角。您的支持、鼓励是博主技术写作的重要动力!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 10亿数据,如何做迁移?
· 推荐几款开源且免费的 .NET MAUI 组件库
· c# 半导体/led行业 晶圆片WaferMap实现 map图实现入门篇