简介
作为程序员经常需要写文档画流程图,写文档有 markdown 了,流程图还纠结在 vivo 中不能自拨么,今天就来了解一个更好的选择 mermaid,它的官方描述是这样的: Generation of diagrams and flowcharts from text in a similar manner as markdown.
一个和 markdown 一样方便的用文本绘制流程图的工具。
入门 graph TD
Start --> Stop graph TD
Start --> Stop
一些可选的画图方向: TB - top 到 bottom,从上到下
BT - bottom 到 top,从下到上
RL - right 到 left,从右到左
LR - left 到 right,从左到右
TD - 和 TB 一样
进阶
下面就是一个相对完善的例子了,展示了一些可用的结点形状和连线样式 graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B .-> D{Rhombus}
C ==> D graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B .-> D{Rhombus}
C ==> D
字符逃逸
在某些情况下,结点文本里可能会出现语法字符,这种时候就需要逃逸设置了,最简单的方式可以这样: graph LR
id1["This is the (text) in the box"] graph LR
id1["This is the (text) in the box"]
也可以这样: graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"] graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
嵌套图 graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
CSS 样式定制 graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5 graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
All Done !
实际它不光能画流程图,常用的序列图甘特图也可以,更多信息参考官方文档