通过 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
• 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
• 实际它不光能画流程图，常用的序列图甘特图也可以，更多信息参考官方文档 https://mermaidjs.github.io/

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

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

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

https://mermaidjs.github.io/