markdown 流程图js_通过 mermaid js 绘制流程图

简介

作为程序员经常需要写文档画流程图，写文档有 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 ！

实际它不光能画流程图，常用的序列图甘特图也可以，更多信息参考官方文档