概述：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

可能需要挂梯子

`Markdown`文档中集成`Mermaid`

mermaid的语法为代码块语法 的执行功能，语言为 mermaid
示例

txt 复制代码

'''mermaid!
# 注意，为此处展示需要，需要将3个'符号转为3个`符号

graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
'''

效果：

Obsidian 支持 Mermaid

txt 复制代码

'''mermaid!
graph LR
%%这是一条注释，在渲染图中不可见
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
'''

相关文献

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 导出为当前版本的其他文件格式 时，相关渲染图将不包括在内。

txt 复制代码

'''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[横向流程图]
'''

Mermaid的语法与经典案例

CASE：朱元璋家谱简图

txt 复制代码

graph LR
emperor((朱八八))-.子.->朱五四-.子.->朱四九-.子.->朱百六


朱雄英--长子-->朱标--长子-->emperor
emperor2((朱允炆))--次子-->朱标
朱樉--次子-->emperor
朱棡--三子-->emperor
emperor3((朱棣))--四子-->emperor
emperor4((朱高炽))--长子-->emperor3

CASE：饼图

在线渲染器：

Online FlowChart & Diagrams Editor

https://mermaid-js.github.io/mermaid-live-editor/edit

语法 ------ 仅供参考，建议直接看实例

从pie关键字开始图表

然后，使用title关键字及其在字符串中的值，为饼图赋予标题。（这是可选的）

数据部分

在" "内写上分区名。

分区名后使用:作为分隔符

分隔符 后写上数值，最多支持2位小数------数据会以百分比的形式展示

实例

txt 复制代码

pie
    title 为什么总是宅在家里？
    "喜欢宅" : 15
    "天气太热或太冷" : 20
    "穷" : 500

CASE: 流程图

txt 复制代码

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是节点名，可随意定义。

txt 复制代码

graph
    默认方形
    id1[方形]
    id2(圆边矩形)
    id3([体育场形])
    id4[[子程序形]]
    id5[(圆柱形)]
    id6((圆形))

txt 复制代码

graph
	id1{菱形}
	id2{{六角形}}
	id3[/平行四边形/]
	id4[\反向平行四边形\]
	id5[/梯形\]
	id6[\反向梯形/]

连线样式

实线箭头：分为无文本箭头和有文本箭头，有文本箭头有2种书写格式

txt 复制代码

graph LR
a-->b--文本1-->c-->|文本2|d

粗实线箭头：分为无文本箭头和有文本箭头

txt 复制代码

graph LR
a==>b==文本==>c

虚线箭头：分为无文本箭头和有文本箭头

txt 复制代码

graph LR
a-.->b-.文本.->c

无箭头线：即以上三种连线去掉箭头后的形式

txt 复制代码

graph LR
a---b
b--文本1!---c
c---|文本2|d
d===e
e==文本3===f
f-.-g
g-.文本.-h

其他连线：需要将graph关键字改为flowchart，除了新增加的连线形式外，上面三种线的渲染效果也会不同

txt 复制代码

flowchart LR
    A o--o B
    B <--> C
    C x--x D
    
    旧连线 --文本--> 也会不同

延长连线：增加相应字符即可，如下图中的B到E，连线中增加了一个-。字符可多次添加。

txt 复制代码

graph LR
    A[Start] --> B{Is it?};
    B -->|Yes| C[OK];
    C --> D[Rethink];
    D --> B;
    B --->|No| E[End];

连线形式

直链

txt 复制代码

graph LR
   A -- text --> B -- text2 --> C

多重链：可以使用&字符，或单个描述

txt 复制代码

graph 
   a --> b & c--> d
   
   A & B--> C & D
   
    X --> M
    X --> N
    Y --> M
    Y --> N

注释

注释：在行首加入%%即可。

txt 复制代码

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

txt 复制代码

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 参考文献

流程图 / UML时序图 / 甘特图 /

Markdown------Mermaid使用 - 博客园

[图形绘制/流程图] Mermaid : 开源的低代码图形绘制语言、协议及工具

概述：Mermaid

Mermaid的主要绘制功能

Mermaid的基本用法

Mermaid的语法基础

Mermaid的高级功能和使用场景

支持工具与集成

Mermaid 官网(支持免登录、在线绘制)

Markdown文档中集成Mermaid

Obsidian 支持 Mermaid

Tyora 支持 Mermaid

Mermaid的语法与经典案例

CASE：朱元璋家谱简图

CASE：饼图

CASE: 流程图

方向

节点

连线样式

连线形式

注释

其他

Y 推荐资源

mermaid 【推荐】

flow

sequence.js

X 参考文献

`Markdown`文档中集成`Mermaid`