We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
@[toc]
我们在写博客或者写项目的README文档的时候,往往都需要画流程图,有的时候用在线编辑器,有的时候用draw.io,有的时候用Visio 但是这些可视化工具再给我们带来直观性的同时,也增加了操作的难度,需要精细地调整组件的大小和样式, 更多的时候,我们不是为了写一份漂亮的报告而画流程图,只是需要便捷地向他人分享自己的idea,在这样的需求下,代码生成流程图显然更适合。
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中。
之前用过 PlantUML,但是发现这个东西的实现原理是生成 UML 的图片后上传服务端,每次再从服务端读取,因此觉得不够鲁棒,隐私性也不好,因而弃用。
Mermaid 作为一个使用 JS 渲染的库,生成的不是一个“图片”,而是一段 HTML 代码,因此安全许多。
```mermaid graph 流程图方向[TB|LR|RL|BT] 流程图内容 ```
```mermaid graph LR start[开始] --> input[输入A,B,C] input --> conditionA{A是否大于B} conditionA -- YES --> conditionC{A是否大于C} conditionA -- NO --> conditionB{B是否大于C} conditionC -- YES --> printA[输出A] conditionC -- NO --> printC[输出C] conditionB -- YES --> printB[输出B] conditionB -- NO --> printC[输出C] printA --> stop[结束] printC --> stop printB --> stop ```
graph LR start[开始] --> input[输入A,B,C] input --> conditionA{A是否大于B} conditionA -- YES --> conditionC{A是否大于C} conditionA -- NO --> conditionB{B是否大于C} conditionC -- YES --> printA[输出A] conditionC -- NO --> printC[输出C] conditionB -- YES --> printB[输出B] conditionB -- NO --> printC[输出C] printA --> stop[结束] printC --> stop printB --> stop
写在最前面
graph [TB|BT|LR|RL|TD]
结构:
id【包围符】【显示文本】【包围符】
示例:
```mermaid graph TD id1[带文本的矩形] id2(带文本的圆角矩形) id3>带文本的不对称的矩形] id4{带文本的菱形} id5((带文本的圆形)) ```
效果:
graph TD id1[带文本的矩形] id2(带文本的圆角矩形) id3>带文本的不对称的矩形] id4{带文本的菱形} id5((带文本的圆形))
框体只要定义一遍,之后只需要通过id来指定就行了
连接线结构:
id1【连接【文本】符】id2
子图结构:
subgraph 子图名 子图内容 end
连接线格式例子(用子图分组):
```mermaid graph TB subgraph 实线 A0[A] --- B0[B] A1[A] --> B1[B] A2[A] -- 描述 --> B2[B] end subgraph 虚线 A3[A] -.- B3[B] A4[A] -.-> B4[B] A5[A] -. 描述 .-> B5[B] end subgraph 加粗线 A6[A] === B6[B] A7[A] ==> B7[B] A8[A] == 描述 ==> B8[B] end ```
graph TB subgraph 实线 A0[A] --- B0[B] A1[A] --> B1[B] A2[A] -- 描述 --> B2[B] end subgraph 虚线 A3[A] -.- B3[B] A4[A] -.-> B4[B] A5[A] -. 描述 .-> B5[B] end subgraph 加粗线 A6[A] === B6[B] A7[A] ==> B7[B] A8[A] == 描述 ==> B8[B] end
解决办法:
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Mermaid:流程图 in Markdown
@[toc]
Background
我们在写博客或者写项目的README文档的时候,往往都需要画流程图,有的时候用在线编辑器,有的时候用draw.io,有的时候用Visio
但是这些可视化工具再给我们带来直观性的同时,也增加了操作的难度,需要精细地调整组件的大小和样式,
更多的时候,我们不是为了写一份漂亮的报告而画流程图,只是需要便捷地向他人分享自己的idea,在这样的需求下,代码生成流程图显然更适合。
Introduction
Mermaid是什么?
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中。
之前用过 PlantUML,但是发现这个东西的实现原理是生成 UML 的图片后上传服务端,每次再从服务端读取,因此觉得不够鲁棒,隐私性也不好,因而弃用。
为什么是Mermaid?
Mermaid 作为一个使用 JS 渲染的库,生成的不是一个“图片”,而是一段 HTML 代码,因此安全许多。
Usage
Mermaid代码如何撰写
基本格式
例子在前
指定流程图方向
写在最前面
定义框体
结构:
示例:
效果:
定义连接线和子图
连接线结构:
子图结构:
连接线格式例子(用子图分组):
效果:
如何在Github的md文档里支持mermaid?
解决办法:
Chrome、Firfox、Opera浏览器插件
The text was updated successfully, but these errors were encountered: