Markdown 文档在开发中曾经必不可少了,但只有文字描述始终有些干燥,波及到做图表的话又须要切换到其余工具中,绘制好后再黏贴回来,如果要批改,万一源文件失落就更麻烦了。对于这种问题实际上也早有办法,就是在各种古代 Markdown 编辑器都能见到的 Mermaid 渲染计划。
Mermaid 是一个基于 Javascript 的图表绘制工具,通过解析类 Markdown 的文本语法来实现图表的创立和动静批改。Mermaid 诞生的次要目标是让文档的更新可能及时跟上开发进度。
Mermaid 反对的图表也很丰盛:流程图、时序图、类图、状态图、实体关系图、用户旅程图、甘特图、饼图、需要图、Git 图。
就以流程图为例,来理解一下如何在 Markdown 中绘图的。
示例
来先看看样子(官网在线编辑器地址:Online FlowChart & Diagrams Editor):
flowchart TD
NodeA
NodeB[NodeB]
NodeA --> NodeB
NodeA <--> NodeB
NodeC(((start))) --Text--> NodeD{if}
NodeD -->|No| NodeN((loop)) -..- NodeC
NodeD -->|Yes| NodeY{{OK}}
NodeY --> NodeF & NodeE --x NodeG & NodeH
NodeH --> NodeI["中文与 #quot; 引号#quot; 与 空格"]
渲染后是这样:
根底语法
既然是在 Markdown 中绘图,语法必定必不可少,但不必怕,流程图比较简单语法也很易学。
与 Markdown 代码块一样,应用反引号语法填写 mermaid
标识绘图的代码区域开始,用三个反引号闭合。
流程图首行要以 flowchart
开始,表明是流程图。
流程图方向
在 flowchart
之后加上空格能够传入参数,能够定义流程图方向。
参数值 | TB | TD | BT | RL | LR |
阐明 | 从上到下 | 从上到下 | 从下到上 | 从右到左 | 从左到右 |
示例中的 flowchart TD
就是标识从上到下。
节点
节点:每一行输出任意字符都会被辨认为一个新节点。输出的字符将被作为节点的 ID,同时默认作为节点名称显示。默认形态是矩形。
形态
除了矩形还有多种形态可选,在节点前面减少符号对即可。如示例中的NodeB[NodeB]
,即是矩形。
整顿了一份图形表:
名称
形态符号中输出字符作为展现的名称。
默认能够不必引号,但如果须要应用本义符、或者括号,则须要用引号包裹。
如示例中的最初节点NodeI["中文与 #quot; 引号#quot; 与 空格"]
,即是应用了引号本义符。
连接线
语法结构大抵是:节点 ID 连接线符号 节点 ID(示例中的NodeA <--> NodeB
)。
如果一行开端没有节点 ID,则会找到下一行第一个节点 ID 连贯,也就意味着连接线的语法是能够换行的。
如果节点 ID 是前文没有呈现过的,会当做一个新的节点解决。所以节点的创立与连贯是能够一次性书写的。
线的定义
连接线由三个字符组成,开端符号代表端点图形,第一二个符号代表线的款式。
绘制双向箭头的话,须要在头部减少一个符号,一共是四个字符。
两头符号能够反复,反复会渲染出更长的连接线。
如示例中 NodeA <--> NodeB
就是双箭头符号,两头代表线段形态,头尾代表箭头形态。
线的形态
线条有三种:
箭头形态
箭头形态也有三种:
双向箭头:
多个节点连贯
&
符号能够让图形一次性连贯多个节点:
文字正文
能够在连接线上减少连接线的正文。正文有两种写法:
写在开端:||
符号,只须要在连接线符号开端减少 —>| 文字 |
即可展现。
写在两头:相似—文字—>
、-. 文字 .->
,等于是反复连贯符号,前半部分是定义上一个图形到文字的连接线款式,后半局部是定义文字到图形的连接线款式。
通常来说写在开端会比拟不便点。
正文
%%
号为正文符,会将符号之后到此行完结都视为正文。
子图(分组)
以上外围的概念曾经讲完,根本画图足够用了。但 mermaid 能反对的还不止这些,像是流程图中套流程图、流程图减少事件、应用 CSS 定义流程图款式等。后两个编辑器不肯定会反对,但子图还会比拟罕用的。
子图实际上就是给图形分组,减少一个背景色块,应用 subgraph ID
、end
包裹,两头图语法与此前一样。
subgraph ID
之后用方括号包裹能够定义显示名称。其中元素能够任意连贯,用子图 ID 能够定义子图与子图的连接线。
flowchart TB
c1-->a2
subgraph one [子图一]
a1-->a2
end
subgraph two [子图二]
b1-->b2
end
subgraph three [子图三]
c1-->c2
end
one --> two
总结
至此流程图的逻辑就讲完了,文字看着多,但实际上并不难,自身也是因为流程图元素比拟少而易学。来最初演绎一下。
节点:任意字符都会渲染成一个节点元素。后续追随的符号对代表图形形态,符号对两头代表图形展现文字。
连线:应用横线定义连线,连线头尾能够用不同符号代表不同形态。
连线文字:应用 ||
符号或是在连线两头输出文字。
正文:应用 %%
符号。
子图:应用 subgraph ID
、end
包裹,外部语法一样。其中元素能够任意连贯。
参考
mermaid 阐明文档
mermaid 流程图文档