[图形绘制/流程图/AI/GPT/JS] Mermaid : 开源的低代码图形绘制语言、协议及工具——AI时代的绘图宠儿

目录

  • 开门见山,先说最重要的几个结论:
  • 本篇由来:AI时代来临,mermaid成为和markdown一样,同样重要的、平台中立的/跨平台的、开源开放的低代码文档语言协议。mermaid主攻:低代码绘图。
  • step1:在DeepSeek等ai模型中输入指令,要求按照你要的图表类型生成Mermaid代码
  • step2:复制deepseek等ai模型的mermaid输出结果,并粘贴到支持mermaid语法协议的软件工具中,即可渲染出图。

  • 开源的低代码绘图文档协议领域,有3大框架,mermaid一骑绝尘于flowsequence.js
  • 极其容易集成:mermaid易于集成到markdown / html / obsidian / drawio 等

Mermaidmarkdown 中集成很简单,声明是 mermaid 代码块,把它当做代码块插入即可以。

相信看完此篇,对软件开发等IT从业人员和内容创作者会大开眼界,也必然会提升工作效率

概述:Mermaid

  • Mermaid‌是一种基于Javascript的、开源文本驱动图表生成工具/绘图工具,,使用类似于Markdown的低代码语法,它允许用户使用简单的文本语言来创建各种类型的图表,如流程图、时序图、甘特图和饼状图等。
  • Mermaid可以作为JavaScript库或独立的命令行工具使用,支持在HTML、Markdown或AsciiDoc文档中嵌入图表定义。‌

Mermaid的主要绘制功能

Mermaid能绘制哪些图?

  • 饼状图:使用pie关键字,具体用法后文将详细介绍
  • 流程图:使用graph关键字,具体用法后文将详细介绍
  • 序列图:使用sequenceDiagram关键字
  • 甘特图:使用gantt关键字
  • 类图:使用classDiagram关键字
  • 状态图:使用stateDiagram关键字
  • 用户旅程图:使用journey关键字

Mermaid的基本用法

  • HTMLMarkdown文件中引用Mermaid库和Mermaid CSS样式表‌。
  • 使用MermaidCLI工具在命令行中生成图表‌。
  • 使用MermaidAPI在自己的应用程序中生成图表‌。

Mermaid的语法基础

  • Mermaid的语法类似于Markdown,易于学习和使用。以下是一些基本的语法示例:

  • 定义节点‌

id[文字](矩形节点),id((文字))(圆角矩形节点),id>文字](旗帜状节点),id{文字}(菱形节点), ...

  • 定义连线‌

->(添加尾部箭头),--(单线),==(粗线),-.(虚线), ...

Mermaid的高级功能和使用场景

  • Mermaid支持自定义部署,可以通过调用API在应用程序中使用。
  • 它还可以与AI结合,实现一键生成图表的功能。
  • Mermaid优点在于其简单性可移植性,用户可以轻松地将图表定义嵌入到任何支持HTMLMarkdownAsciiDoc的文档中。

支持工具与集成

Mermaid Live Editor : Mermaid 官方提供(支持免登录、在线绘制)

可能需要挂梯子

HTML网页中集成 Mermaid

  • 样例:调用完成后,mermaid-js将会默认将HTML页面中classmermaid的标签渲染为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地址呢?

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 解析和渲染
  • mermaidmermaid图。
  • 要使 Typora 支持代码绘图,需要对 Typora 软件进行相应设置:
  • 文件】-【偏好设置…】-【Markdown】-【Markdown扩展语法】:启用图表 (序列图、流程图和Marmaid图)
  • 并重启 Typora 生效。

  • TyporaMarkdown 文档导出为 HTMLPDFepubdocx 文件格式时,相关渲染图也将包括在内;但是当 TyporaMarkdown 导出为当前版本的其他文件格式时,相关渲染图将不包括在内

'''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

  • 调整图形-插入-高级-Mermaid

VSCode 支持 Mermaid 插件: Markdown Preview Mermaid Support

  • VSCodemarkdown 支持相当友好
  • Mermaid 的支持只需要安装一下插件即可,插件名称: Markdown Preview Mermaid Support

Mermaid的语法与经典案例

CASE:朱元璋家谱简图

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位小数——数据会以百分比的形式展示
  • 实例
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];

方向

  • 方向:用于开头,声明流程图的方向。
  • graphgraph TBgraph 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时序图 / 甘特图 /

posted @   千千寰宇  阅读(1618)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 10亿数据,如何做迁移?
· 推荐几款开源且免费的 .NET MAUI 组件库
· c# 半导体/led行业 晶圆片WaferMap实现 map图实现入门篇
点击右上角即可分享
微信分享提示