mermaid中文文档

关于本文的几点声明
1. 当前文档翻译自mermaid.GitBook
2. 本文大部分主要为mermaid语法使用方面的内容，其它部分暂时略过

mermaid

以类似于标记的方式从文本生成图表和流程图。

在解释代码时，曾经想过简化文档并避免像Visio这样的沉重工具吗？

这就是为什么mermaid诞生的原因，这是一种简单的类似于标记的脚本语言，用于通过javascript从文本生成图表。用我们的编辑试试。

流程图示例

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

序列图示例

sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!

甘特图示例

gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

实时编辑器Mermaid Live Editor

流程图.基本语法

流程图

这个语句声明了一个新的图和图形布局的方向。
这声明了一个从上到下面向图。

graph TD
    Start --> Stop

这声明了一个从左到右的面向图。
可能的方向是：
* TB – top bottom
* BT – bottom top
* RL – right left
* LR – left right
* TD – same as TB

graph LR
    Start --> Stop

节点和形状

节点(默认)

graph LR
    id

请注意，ID是在框中显示的。

带有文本的节点

还可以在框中设置与id不同的文本。如果多次这样做，这将是将使用的节点的最后一个文本。另外，如果稍后为节点定义边缘，则可以省略文本定义。先前定义的一个将在呈现框时使用。

graph LR
    id1[This is the text in the box]

圆边节点

graph LR
    id1(This is the text in the box)

圆形式的节点

graph LR
    id1((This is the text in the circle))

不对称形状的节点

graph LR
    id1>This is the text in the box]

目前，只有上面的形状是可能的，而不是它的镜子。随着将来的发布，这种情况可能会发生变化。

节点(菱形)

graph LR
    id1{This is the text in the box}

节点之间的链接

节点可以与链接/边缘连接。可以有不同类型的链接或将文本字符串附加到链接。

有箭头的链接

graph LR
    A-->B

公开链接

graph LR
    A --- B

链接文本

graph LR
    A-- This is the text ---B

或者

graph LR
    A---|This is the text|B

箭头和文字的链接

graph LR
    A-->|text|B

或者

graph LR
    A-- text -->B