通过 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 ！

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

https://mermaidjs.github.io/