無論是作報告還是梳理知識點，流程圖和結構圖都能起到畫龍點睛的用處，而在實際辦公的過程中，如果你可以很快做出一個漂亮的結構圖，相信老闆肯定會對你刮目相看，今天就帶大家一起學習一下如何利用
Mermaid的在線編輯平臺，快速做出一個漂亮的圖。再高深的前端知識小編不懂，僅面向不是很懂變成編程，或者只是需要做結構圖的人。
先來看幾個樣品：
話不多說，先把平臺連接發出來：
https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbkFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuQiAtLT4gQ3tMZXQgbWUgdGhpbmt9XG5DIC0tPnxPbmV8IERbTGFwdG9wXVxuQyAtLT58VHdvfCBFW2lQaG9uZV1cbkMgLS0-fFRocmVlfCBGW2ZhOmZhLWNhciBDYXJdXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ
下面我們一步一步的做出結構圖：
作圖方向：
graph TD
Start --> Stop
第一行的graph LR中graph指定是一個圖，第二個TD指定圖的方向，所有的方向關鍵詞為:
- TB - top bottom：從上到下
- BT - bottom top：從下到上
- RL - right left：從右向左
- LR - left right：從左向右
- TD - same as TB：從上到下
graph LR;
A[aa bb]-->B(wo);
A-->C((我是C));
B-->D>我是D];
C-->D;
D-->E{我是E};
C-->E;
2-->E;
連線的形式：
- A --> B A帶箭頭指向B
- A --- B A不帶箭頭指向B
- A -.- B A用虛線指向B
- A -.-> B A用帶箭頭的虛線指向B
- A ==> B A用加粗的箭頭指向B
- A -- 描述 --- B A不帶箭頭指向B並在中間加上文字描述
- A -- 描述 --> B A帶箭頭指向B並在中間加上文字描述
- A -. 描述 .-> B A用帶箭頭的虛線指向B並在中間加上文字描述
- A == 描述 ==> B A用加粗的箭頭指向B並在中間加上文字描述
graph TD
A[A] --> B[B]
A1[A] --- B1[B]
A4[A] -.- B4[B]
A5[A] -.-> B5[B]
A7[A] ==> B7[B]
A2[A] -- 描述 --- B2[B]
A3[A] -- 描述 --> B3[B]
A6[A] -. 描述 .-> B6[B]
A8[A] == 描述 ==> B8[B]
節點形狀：
大寫字母表示節點，name表示節點的名字，主要形狀如下：
- 文本節點 B[bname]
- 圓角節點 C(cname)
- 圓形節點 D((dname))
- 非對稱節點 E>ename]
- 菱形節點 F{fname}
實體字符：可以使用 HTML 中的實體字符。
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
這個網址有很多：https://www.cnblogs.com/mengmengi/p/10137167.html
直接替換就可以：
增加渲染：
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px;
style id2 fill:#f00,stroke:#000,stroke-width:2px,stroke-dasharray:5,5;
style id1 fill:#f9f,stroke:#000,stroke-width:2px,stroke-dasharray:5,5;
fill:#f9f表示框框中填充的顏色，由RGB表示，但只有0~F，如#f00表示填充紅色
stroke:#000,表示外框的顏色，也是由RGB表示
stroke-width:2px,表示外框短線的寬度為2個像素，
stroke-dasharray:5,5;表示外框短線的長度，等於方框的邊長除以5
如果有很多需要設置為一樣的格式，也可以定於類重複調用：
graph LR
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
class nodeId className;
id1(Start)-->id2(Stop)
id3(Start)-->id4(Stop)
id5(Start)-->id6(Stop)
class id1 className;
class id3 className;
class id4 className;
class id5 className;
style id2 fill:#f00,stroke:#000,stroke-width:2px,stroke-dasharray:5,5;
下面講一下不同的圖表類型：
子流程圖
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
graph TB：描述了作圖的方向
subgraph three：將區域分類標註
時序圖：
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
prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
做一個消息圖：
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
添加個備註：
語法：Note [ right of | left of | over ] [Actor]。
over 可用於單獨一個角色上，也可以用於相鄰兩個角色間：
別名
可以給角色寫一個簡短的別名以方便書寫。
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
註釋： %% activate 角色名 表示激活控制焦點
活動期：
sequenceDiagram
Alice->>John: Hello John, how are you?
%% activate 角色名 表示激活控制焦點
activate John
John-->>Alice: Great!
%% deactivate 角色名 表示控制焦點結束
deactivate John
使用 +/- 的更方便的寫法：
循環
loop Loop text
... statements ...
end
sequenceDiagram
Alice->John: Hello John, how are you?
%% loop 後跟循環體說明文字
loop Every minute
John-->Alice: Great!
%% 標記循環結束
end
選擇
語法：
alt Describing text
... statements ...
else
... statements ...
end
可選條件，比如在沒有 else 分支的情況下使用，有點類似 java 中的 switch 的 default 分支，代表剩下所有情況。
opt Describing text
... statements ...
end
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
甘特圖：
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 json :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
關鍵詞說明：
- 使用關鍵詞gantt聲明甘特圖
- title—標題
- dateFormat—日期格式
- section—聲明板塊
- Completed—已經完成
- Active—當前正在進行
- Future—後續待處理
- crit—關鍵階段
時間參數：
甘特圖：學習網站：https://www.yuque.com/yuque/help/gantt
閱讀更多 嘩啦圈的夢 的文章
