Mermaid

概述

• 什么是Mermaid？
  • Mermaid是一種基於Javascript的繪圖工具，使用類似於Markdown的語法，使用戶可以方便快捷地通過代碼創建圖表。
  • 項目地址：https://github.com/mermaid-js/mermaid（需要將梯子設置成全局模式才能訪問）

• 怎么使用Mermaid？

  • 使用特定的Mermaid渲染器；
  • 使用集成了Mermaid渲染功能的Markdown編輯器，如Typora。使用時，需要將代碼塊的語言選擇為Mermaid。

  Typora是宇宙第一筆記軟件，不接受反駁

• Mermaid能繪制哪些圖？

  • 餅狀圖：使用pie關鍵字，具體用法后文將詳細介紹
  • 流程圖：使用graph關鍵字，具體用法后文將詳細介紹
  • 序列圖：使用sequenceDiagram關鍵字
  • 甘特圖：使用gantt關鍵字
  • 類圖：使用classDiagram關鍵字
  • 狀態圖：使用stateDiagram關鍵字
  • 用戶旅程圖：使用journey關鍵字

• 實例：朱元璋家譜簡圖，圓圈代表皇帝

graph LR emperor((朱八八))-.子.->father(朱五四)-.子.->朱四九-.子.->朱百六 朱雄英--長子-->朱標--長子-->emperor emperor2((朱允炆))--次子-->朱標 朱樉--次子-->emperor 朱棡--三子-->emperor emperor3((朱棣))--四子-->emperor emperor4((朱高熾))--長子-->emperor3

以上是概述，下面詳細介紹餅狀圖和流程圖的語法。其他圖的語法可訪問上文給出的項目地址，自行學習。（記得掛梯子）

餅狀圖

• 在線渲染器：Online FlowChart & Diagrams Editor（需要梯子）

• 語法

  • 從pie關鍵字開始圖表
  • 然后使用title關鍵字及其在字符串中的值，為餅圖賦予標題。（這是可選的）
  • 數據部分
    • 在" "內寫上分區名。
    • 分區名后使用:作為分隔符
    • 分隔符后寫上數值，最多支持2位小數——數據會以百分比的形式展示

• 實例

pie title 為什么總是宅在家里？ "喜歡宅" : 15 "天氣太熱或太冷" : 20 "窮" : 500

流程圖

• 在線渲染器：Online FlowChart & Diagrams Editor（需要掛梯子）

實例

graph LR A[Start] --> B{Is it?}; B -- Yes --> C[OK]; C --> D[Rethink]; D --> B; B -- No ----> E[End];

方向

用於開頭，聲明流程圖的方向。

• graph或graph TB或graph TD：從上往下
• graph BT：從下往上
• graph LR：從左往右
• graph RL：從右往左

結點

• 無名字的結點：直接寫內容，此時結點邊框為方形；節點內容不能有空格
• 有名字的結點：節點名后書寫內容，內容左右有特定符號，結點邊框由符號決定；節點內容可以有空格

下面的實例中，沒有為graph指定方向，因此默認是從上往下的。但是由於各個結點之前沒有箭頭，所以他們都處於同一排。

graph 默認方形 id1[方形] id2(圓邊矩形) id3([體育場形]) id4[[子程序形]] id5[(圓柱形)] id6((圓形))

graph id1{菱形} id2{{六角形}} id3[/平行四邊形/] id4[\反向平行四邊形\] id5[/梯形\] id6[\反向梯形/]

連線樣式

• 實線箭頭：分為無文本箭頭和有文本箭頭，有文本箭頭有2種書寫格式

graph LR a-->b--文本1-->c-->|文本2|d

• 粗實線箭頭：分為無文本箭頭和有文本箭頭

graph LR a==>b==文本==>c

• 虛線箭頭：分為無文本箭頭和有文本箭頭

graph LR a-.->b-.文本.->c

• 無箭頭線：即以上三種連線去掉箭頭后的形式

graph LR a---b b--文本1---c c---|文本2|d d===e e==文本3===f f-.-g g-.文本.-h

• 其他連線：需要將graph關鍵字改為flowchart，除了新增加的連線形式外，上面三種線的渲染效果也會不同

flowchart LR A o--o B B <--> C C x--x D 舊連線 --文本--> 也會不同

• 延長連線：增加相應字符即可，如下圖中的B到E，連線中增加了一個-。字符可多次添加。

graph LR A[Start] --> B{Is it?}; B -->|Yes| C[OK]; C --> D[Rethink]; D --> B; B --->|No| E[End];

連線形式

• 直鏈

graph LR A -- text --> B -- text2 --> C

• 多重鏈：可以使用&字符，或單個描述

graph a --> b & c--> d A & B--> C & D X --> M X --> N Y --> M Y --> N

其他

• 子圖：需要將graph關鍵字改為flowchart，在代碼段的開始加入subgraph，尾部加入end

flowchart TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end one --> two three --> two two --> c2

• 注釋：在行首加入%%即可。

graph LR %%這是一條注釋，在渲染圖中不可見 A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two]