mermaid
[ˈmɜː(r)ˌmeɪd]
美人魚
讀音是“莫美德”
- 不丑，還挺好看
- 沒有開始、結束的套路代碼，只有圖類型名稱
在線編輯：https://mermaid-js.github.io/mermaid-live-editor
Mermaid 本質是一種標記語言，借由一個解析庫 將文本 「翻譯渲染」成「圖畫」。
雖然通過一個純文本編輯器，例如：寫字板，我們可以撰寫 Mermaid 文本，但顯然不能指望這樣就可以「渲染」出「繪圖」來。這和 Markdown 的原理是一樣的，渲染需要專門的編輯器。 好消息是，Mermaid 已經被很多 Markdown 編輯器直接或間接支持。 也就是說直接用現有的 Markdown 編輯器就可以上手一試了，幾乎沒有額外負擔。
這里是部分支持 Mermaid 的編輯器
-
印象筆記 Markdown 筆記
-
有道雲筆記（未實測，希望大家補充糾正）
-
Typora （火箭君推薦）
-
MWeb（未實測，希望大家補充糾正）
-
VSCode + Mermaid 插件
-
Atom + Mermaid 插件
-
MermaidJS 官方網頁版 編輯器
需要注意的是，由於 Mermaid 本身還在發展，並非所有特性都能被所有 Markdown 編輯器支持。不過，常見的流圖編輯模式已經比較成熟，大多被支持。至於具體渲染效果如何，我們還是要以編輯器的實際輸出為准。
流程圖
flow chart 流程圖
-
類型名稱參數：graph
-
方向：TD，top、down，即從上到下，有四種：LR、RL，TB、BT
-
節點：A[Start]。A指代節點名稱，中括號里為節點內容，大括號是菱形，中括號是長方形。
-
箭頭：最少兩個短橫線，短橫線的數量代表長度。
-
注釋：用2個豎線之間的內容為注釋，后加空格和節點名稱分開。
-
每句結束是分號
graph LR
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B ---->|No| E[End];
方向
有四種：
LR： left right，從左到右
RL：right left
TB：top bottom，從上到下，也可以是TD：top down
BT：bottom top
序列圖
sequence diagram
序列圖；時序圖
-
類型名稱參數：sequenceDiagram
-
參與者：participant John
-
注釋：冒號后內容
-
箭頭：實線箭頭
->>，虛線箭頭-->>,
sequenceDiagram
participant John
participant Alice
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
甘特圖
-
gantt：類型名稱參數
-
title：標題
-
dateFormat：時間日期格式
-
section：部分
-
A task :a1, 2014-01-01, 30d：冒號前內容，冒號后：指代名稱，開始時間，持續時間
| 關鍵字 | head含義 |
|---|---|
| title | 標題 |
| dateFormat | 日期格式 |
| section | 模塊 |
| Completed | 已經完成 |
| Active | 當前正在進行 |
| Future | 后續待處理 |
| crit | 關鍵階段 |
| 日期缺失 | 默認從上一項完成后 |
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2021-06-01, 30d
Another task :after a1 , 20d
section 無人船
第一階段 :2021-06-07 , 82d
第二階段 : 24d
大的例子
gantt
dateFormat YYYY-MM-DD
title 甘特圖示例
section 開始階段
完成任務 :done, des1, 2014-01-06,2014-01-08
激活任務 :active, des2, 2014-01-09, 3d
未來的任務 : des3, after des2, 5d
未來的任務2 : des4, after des3, 5d
section 緊急任務
在關鍵線完成任務 :crit, done, 2014-01-06,24h
實現解析器和JSON :crit, done, after des1, 2d
為解析器創建測試 :crit, active, 3d
關鍵線的未來任務 :crit, 5d
為渲染器創建測試 :2d
添加到 mermaid :1d
section 文檔
描述甘特語法 :active, a1, after des1, 3d
將甘特圖添加到演示頁面 :after a1 , 20h
向演示頁面添加另一個圖表 :doc1, after a1 , 48h
section 最后階段
描述甘特語法 :after doc1, 3d
將甘特圖添加到演示頁面 : 20h
向演示頁面添加另一個圖表 : 48h
餅狀圖
-
pie：類型名稱參數
-
title：標題
-
數據不是百分比，原始數據計算得出百分比
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
"鈉" : 10
節點形狀
長方形節點
長方形，中括號
graph LR
id[長方形節點];
圓角節點
長方形圓角，小括號
graph LR
id(圓角節點);
圓形節點
圓節點(The form of a circle)
雙小括號
graph LR
id((圓形節點));
非對稱節點
非對稱節點(asymetric shape)
只有一半中括號
graph LR
id>非對稱節點]
菱形節點
菱形節點(rhombus)
大括號
graph LR
id{菱形節點}
連接線
節點間的連接線有多種形狀，而且可以在連接線中加入標簽。
箭頭形連接
graph LR;
A-->B;
開放連接
graph LR
A --- B
標簽連接
graph LR
A -- This is the label text --- B;
箭頭標簽連接
graph LR
A-- text -->B
虛線連接
(dotted link,點連線)
graph LR
A-.->B
A-.-.B
標簽虛線
graph LR
A-.text.->B
粗實線
graph LR
A==>B
A===B
標簽粗線
graph LR
A==text==>B
A==text===B
序列圖
sequenceDiagram
participant John
participant Alice
Alice-xJohn:Hello John,how are you?
John-->>Alice:Great!
順序
參與者(participant)的順序
participant
別名
as
participant Alice as 張三
箭頭
消息的語法：實線或者虛線的使用：
[Actor][Arrow][Actor]:Message text
Arrow的六種樣式：
-
->：實線
-
-->：虛線
-
->>：實線箭頭
-
-->>：虛線箭頭
-
-x：實線箭頭×
-
--x：虛線箭頭×
sequenceDiagram
Alice->John: Hello John, how are you ?
John-->Alice:Great!
Alice->>John: dont borther me !
John-->>Alice:Great!
Alice-xJohn: wait!
John--xAlice: Ok!
便簽
給序列圖增加便簽：
具體規則：
[right of | left of | over][Actor]:Text
sequenceDiagram
participant A
Note left of A: 標簽內容
跨越兩個Actor的便簽：
sequenceDiagram
Alice->>John:Hello John, how are you?
Note over Alice,John:一個典型互動
循環
在序列圖中，也可以使用循環，具體規則如下：
Loop text
... statements...
end
示例
sequenceDiagram
Alice->>John: Hello!
loop 每次重復
John->>Alice:Great!
end
選擇
在序列圖中選擇的表達。規則如下：
alt Describing text
...statements...
else
...statements...
end
或者使用opt(推薦在沒有else的情況下使用)
opt Describing text
...statements...
end
示例
sequenceDiagram
participant Alice as 張三
participant Bob as 李四
Alice->>Bob: Hello, how are you?
alt 生病了
Bob->>Alice:很糟糕
else 健康的
Bob->>Alice:清新如雛菊
end
opt 額外回復
Bob->>Alice:感謝問候
end