Mermaid | 強大的畫圖渲染腳本

1. Mermaid

點我查看官方文檔

mermaid的語法研究

• 所有代碼包裹在``里面
• 需用mermaid標識
• 基本構成
  • node(節點)
  • edge(邊)
  • text(文本內容)

如

	```mermaid
	  這里寫代碼
        ```

simple introduce

一，節點形狀默認矩形

  graph LR
  A-->B

graph LR A-->B

A,B就是節點

二，graph [方向]可設置圖形布局方向

demo1

 graph TB
 A-->B

graph TB A-->B

graph TB 表示 Top->Bottom上下布局

demo2

graph LR
A-->B

graph LR A-->B

graph LR 表示 Left->Right左右布局

---

1.1. main syntax

1.1.1. Shape

• 基本默認形狀包括 矩形和圓形
• 可變體，可嵌套組合
  如
  [] 表示矩形,() 表示圓弧,{} 表示尖角

graph LR; A[shape]-->B[基本形狀] A-->C[變體]-->D[嵌套]

一，矩形

	graph LR
    id1[This is the text in the box]

graph LR id1[This is the text in the box]

二，圓形

	graph LR
    id2(This is the text in the box)

graph LR id2(This is the text in the box)

三，體育場形

	graph LR
	id3[(This is the text in the box)]

graph LR id1([This is the text in the box])

總結 ： 如何繪制形狀

# 格式
id名 形狀的標識符號+顯示內容
# 實例
id1[i am 矩形] # 矩形

id2(i am 圓角矩形) # 圓角矩形

id3[(i am  數據庫形)] # 數據庫形

id4((i am  正圓 )) #正圓

id5> I'm 箭頭形矩形] # 箭頭形矩形

id6{ i am 棱形} #棱形

id7{{i am 6邊形}}  # 6邊形

id8[/i am 平行四邊形/] # 平行四邊形

id9[/i am 梯形\] #梯形

id10[\i am 另一種梯形/] #另一種梯形

graph LR id1[i am 矩形] id2(i am 圓角矩形) id3[(i am 數據庫形)] id4((i am 正圓 )) id5> I'm 箭頭形矩形] id6{ i am 棱形} id7{{i am 6邊形}} id8[/i am 平行四邊形/] id9[/i am 梯形\] id10[\i am 另一種梯形/]

1.1.2. node

graph LR; A[Node]-->B[分類] B-->id1[一次性] B-->id2[可重復] A-->C[線]-->D[形狀] C-->id3[樣式] A-->id4[高級使用]

1.1.2.1. 節點分類

• 一次性節點
  • 默認節點形狀矩形
  • 節點內容即顯示為id的值

graph TD
    id

graph TD id

• 非一次性節點(可重復節點)
  • 節點內容非id值，可指定形狀和內容

graph LR
    id1[This is the text in the box]

graph LR id1[This is the text in the box]

1.1.2.2. 連接線

1.1.2.2.1. 形狀

連接線相關點

1- 虛實線
2- 箭頭樣式
3- 連接線描述文字

一，有向線無描述

graph LR
    A-->B

graph LR A-->B

# 解釋
-- 表示 無向線
--> 表示 有向線
> 表示箭頭

二，無向線無描述

graph LR
    A --- B

graph LR A --- B

三，帶描述的有箭頭實線

graph LR
    A--- text --->B

graph LR A-- text -->B

四，無箭頭有描述

graph LR
    A--- text ---B

graph LR A--- text ---B

1.1.2.2.2. 加粗

graph LR
   A ==> B

graph LR A ==> B

一，有描述+有向+加粗

graph LR
   A == text ==> B

graph LR A == text ==> B

1.1.2.3. 高級用法

多重連接線

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

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

多節點共同連接

支持共同連接方式,A-->B & C 等價於 A-->B 和 A-->C 形式

可以把B & C當為一個整體

A-->(B & C) 即 A-->B 和 A-->C

graph LR
   a --> b & c--> d

graph LR a --> b & c--> d

多節點相互連接

多節點共同連接的變體形式,A & B --> C & D 等價於 A-->C ,A-->D,B-->C 和 B-->D 四種組合形式.

graph TB
    A & B--> C & D

graph TB A & B--> C & D

可理解為基本數學運算

雙引號包裹特殊字符

graph LR
    id1["This is the (text) in the box"]

graph LR id1["This is the (text) in the box"]

雙引號包裹轉義字符

graph LR
    A["A double quote:#quot;"] -->B["A dec char:#9829;"]

graph LR A["A double quote:#quot;"] -->B["A dec char:#9829;"]

注釋

graph LR
	%% 這是一個注釋語句，是給你看的，不是給你用的，蛤蛤蛤
	A[我是矩形]

graph LR %% 這是一個注釋語句，是給你看的，不是給你用的，蛤蛤蛤 A[我是矩形]

1.2. Summary of Basic Usage

關鍵字

• 英文單詞縮寫
• 幾何化形狀
• 有限語法

基礎英文單詞縮寫

縮寫	釋義	實例
graph	圖	graph graph流程圖標識符，必選
subgraph	子圖	subgraph子圖標識
布局
top	上
bottom	下
left	左
right	右

1.2.1. 形狀

1.2.1.1. 基本形狀

表示符	含義	類型
[]	矩形	節點形狀
()	圓角矩形
{}	菱形
<>	菱形
--	實線
-.	虛線
==	加粗

1.2.1.2. 幾何形狀

表示符	含義	類型
[[]]	正方形
[()]	圓柱體
[{}]	棱柱體
(())	圓形
([])	體育場
({})	圓弧
雙大括號	六邊形
{[]}	正多邊形
{()}	圓弧

官方文檔高級探索

interaciton

styling and classes

Basic support for fontawesome

interval Space

參考 : 關於寫作那些事之快速上手Mermaid流程圖

1.3. usage view

1.3.1. overview

mermaid官網在線編輯器

graph LR; id[Diagram Syntax] id==>A[1.FlowChart] id==>B[2.State Diagram] id==>C[3.Gantt] id==>D[4.Pie Chart] id==>id1[Sequence diagram] id==>id2[Class Diagram] id==>id3[Entity Relationship Diagram] id==>id4[User Journey] id==>id5[Other Examples] style id1 fill:#F5F5F5 style id2 fill:#F5F5F5 style id3 fill:#F5F5F5 style id4 fill:#F5F5F5

1.3.2. 簡單流程圖

# 格式
id(顯示文字) --> id[顯示文字]
...

# -----------------------------------------------------------------

# 實例

graph TD

A(起床) --> B[洗漱]

B --> C{扔硬幣}

C -->|正面朝上| D[喝牛奶]

C -->|反面朝上| E[喝果汁]

graph TD A(起床) --> B[洗漱] B --> C{扔硬幣} C -->|正面朝上| D[喝牛奶] C -->|反面朝上| E[喝果汁]

1.3.3. 簡單序列圖

【案例1】-創建簡單時序圖

# 格式
sequenceDiagram # 這是聲明一個序列圖
[對象1]->>[對象2] : 描述語
[對象2]->>[對象3] : 描述語
# --------------------------------------------------------
# 實例
sequenceDiagram 

客戶->>銀行櫃台: 我要存錢  

銀行櫃台->>后台: 改一下這個賬戶數字哦  

后台->>銀行櫃台: 賬戶的數字改完了，明天起息  

銀行櫃台->>客戶: 好了，給你回單 ，下一位

sequenceDiagram 客戶->>銀行櫃台: 我要存錢 銀行櫃台->>后台: 改一下這個賬戶數字哦 后台->>銀行櫃台: 賬戶的數字改完了，明天起息 銀行櫃台->>客戶: 好了，給你回單 ，下一位

1.3.4. 簡單甘特圖

【案例1】-gantt圖基本使用

# 格式 
gantt # 聲明一個甘特圖
title [甘特圖標題]
dateFormat [日期格式]
section [部分1名字]
[事件1] : [序列次序標識] , [事件開始時間] ,[持續時間]
section [部分2名字] : [序列次序標識] , [事件開始時間],[持續時間]

# 序列次序標識，即事件id
# 如下圖的 a1
# after a1 表示 事件的排序，即先后順序是怎樣的，此時是在a1事件的后面，效果如下圖，整齊的分隔開

# -----------------------------------------------------------------------

# 實例
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d

gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d

【案例2】-甘特圖事件狀態

# 狀態states說明
done # 表示事件完成功
active # 表示事件在活躍，即進行中
crit # 即 critical 緊急事件
# --------------------------------------------------------------
gantt
dateFormat YYYY-MM-DD
title Adding FANTT 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
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

gantt dateFormat YYYY-MM-DD title Adding FANTT 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 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

1.3.5. 簡單餅圖

 # 語法
 pie  # 聲明 是個餅圖
 title  標題
 "分類1" : 所占比例數
 "分類2" : 所占比例數
 "分類3" : 所占比例數
 # -----------------------------------------------------
 # 實例
 pie 
 title My skills
 "Java" : 10
 "JavaScript" :10
 "Python" : 10
 "C/C++" : 3
 "Web font-end" : 10
 

pie title My skills "Java" : 10 "JavaScript" :10 "Python" : 10 "C/C++" : 3 "Web font-end" : 10

參考 : Mermaid，就像用 Markdown 碼字一樣，高效制作簡易流圖

1.4. Reference

Meimaid在線編輯器