前端流程圖產生器 - mermaid

mermaid：8.0

在寫文件時，最常會遇到需要製作流程圖的案例，但都會有幾種問題：

• 需要額外產生流程圖再上傳
• 必須統一製作流程圖的軟體，不然可能會長得不一致
• 文件不易版本控制和搬移（必須想辦另外處理圖片）

mermaid 是一個可以用類似 Markdown 語法產生流程圖的 Javascript library，使用方式非常簡潔，許多套件或平台基本上都有支援，比如說 GitBook、GitLab 等等，當然也可以單獨使用。

graph TB
    A --> C
    A --> D
    B --> C
    B --> D

Usage

如果是單獨使用， mermaid 預設會去 parse HTML tag 中加上 class="mermaid" 的 Element。

HTML 範例

<h3>Flowchart</h3>
<div class="mermaid">
    graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
</div>

<h3>Sequence diagram</h3>
<div class="mermaid">
    sequenceDiagram
    loop every day
        Alice->>John: Hello John, how are you?
        John-->>Alice: Great!
    end
</div>

<h3>Gantt diagram</h3>
<div class="mermaid">
    gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram 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

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      : 20h
    Add another diagram to demo page    : 48h
</div>

引入 js

<script src="node_modules/mermaid/dist/mermaid.min.js"></script>
<script>
    mermaid.initialize({startOnLoad: true, theme: 'forest'});
</script>

細節的 config 可以直接參考 Document。