markdown生成结构图之mermaid简单入门

Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。

mermaid

流程图

基础使用

graph TB
    A
    B[Bname]
    C(Canme)
    D((Dname))
    E>Ename]
    F{Fname}

流程图 进阶

连线-细线

graph TB

    A1-->B1
    A2---B2
    A3--sdfasdf---B3
    A4--asdfasdf-->B4
    A5-.-B5
    A6-.->B6```
<pre class="mermaid">graph TB

    A1-->B1
    A2---B2
    A3--sdfasdf---B3
    A4--asdfasdf-->B4
    A5-.-B5
    A6-.->B6</pre>

#### 连线-粗线

graph TB

    A7-.sdfsd.-B7
    A8-.asdfsf.->B8
    A9===B9
    A10==>B10
    A11==sdfasdf===B11
    A12==sadfsdf==>B12

<pre class="mermaid">graph TB

    A7-.sdfsd.-B7
    A8-.asdfsf.->B8
    A9===B9
    A10==>B10
    A11==sdfasdf===B11
    A12==sadfsdf==>B12</pre>

#### 综合使用

    graph TB
        st((开始))-->op[操作]
        op-->co{判断Yes or No}
        co --no-->sub(子进程)
        sub-->op
        co--yes-->out>输出]
        out-->en((结束))

<pre class="mermaid">graph TB
    st((开始))-->op[操作]
    op-->co{判断Yes or No}
    co --no-->sub(子进程)
    sub-->op
    co--yes-->out>输出]
    out-->en((结束))</pre>

## 序列图示例

    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!

<pre class="mermaid">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!</pre>

## 甘特图示例

    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

<pre class="mermaid">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</pre>