Markdown畫圖(mermaid)學習

簡介

目前博客園支持mermaid的graph，subgraph，sequenceDiagram，gantt，classDiagram
mermaid(美人魚), 是一個類似markdown，用文本語法來描述文檔圖形的工具。mermaid語法包含在博客園markdown中。
注釋為：

%% 注釋

插入為：（以下的例如只列舉代碼）

“`mermaid
代碼
“`

或

<body>
  <div class="mermaid">
   代碼
  </div>
</body>

graph(流程圖)

關鍵字graph表示一個流程圖的開始，同時需要指定該圖的方向。如果內容包含特殊字符，可使用"字符"，或參考這個的markdown轉義。

方向

代碼 方向
TB 從上到下
TD 從上到下
BT 從下到上
RL 從右到左
LR 從左到右

T = TOP，B = BOTTOM，L = LEFT，R = RIGHT，D = DOWN
例如：

graph LR;
  A-->B;
  B-->C;
  C-->D;
  D-->A;
graph LR;
A–>B;
B–>C;
C–>D;
D–>A;

形狀

代碼 形狀
變量 默認形狀
變量[內容] 矩形
變量(內容) 圓矩形
變量((內容)) 圓形
變量>內容] 非對稱形
變量{內容} 菱形

例如：

graph LR
  A
  B[b]
  C(c)
  D((d))
  E>e]
  F{f}
graph TB
A
B[b]
C(c)
D((d))
E>e]
F{f}

連線

話不多說，上表。注意：中間的符號或多或少都不行

代碼 形狀
A–>B 箭頭
A—B 直連
A–text—B 注釋
A–text–>B 箭頭注釋
A-.-B 虛線直連
A-.->B 虛線箭頭
A-.text.-B 虛線注釋直連
A-.text.->B 箭頭虛線注釋
A===B 加粗直連
A==>B 加粗箭頭
A==text===B 加粗注釋直連
A==text==>B 加粗注釋箭頭 
graph TB
  A1-->B1
  A2---B2
  A3--text---B3
  A4--text-->B4
  A6-.-B5
  A6-.->B6
  A7-.text.-B7
  A8-.text.->B8
  A9===B9
  A10==>B10
  A11==text===B11
  A12==text==>B12
graph TB
A1–>B1
A2—B2
A3–text—B3
A4–text–>B4
A5-.-B5
A6-.->B6
A7-.text.-B7
A8-.text.->B8
A9===B9
A10==>B10
A11==text===B11
A12==text==>B12

樣式

將特定樣式例如較粗的邊框或不同的背景顏色

graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5

大例如

graph LR
  A[x]
  B["if(x<0)"]
  C["x=-x"]
  D[return x]
  A-->B-->C-->D
  C-->D
graph LR
A[x]
B[“if(x<0)”]
C[“x=-x”]
D[return x]
A–>B
B–>C
B–>D
C–>D

subgraph(子圖)

格式

注意：外層可以使用裡層中的節點，可以認為是全局變量

graph LR
  subgraph 名稱
    代碼
  end
  subgraph 名稱
    代碼
  end

大例如：

graph LR
subgraph g1
a1–>b1
end
subgraph g2
a2–>b2
end
subgraph g3
a3–>b3
end
b1–>a2
b2–>a3

sequenceDiagram(序列圖)

功能

  • participant
    參與者，相當先定義模塊，可通過設定參與者(participant)的順序控制展示順序。
    例如：
partcipant A
partcipant B
sequenceDiagram
participant A
participant B 
partcipant B
partcipant A
sequenceDiagram
participant B
participant A

也可以使用別名：

sequenceDiagram
  participant A as A dog
  participant B as Bob
  A->B:Hello
sequenceDiagram
participant A as A dog
participant B as Bob
A->B:Hello
  • note
    注釋，格式如下
note right of或left of 變量:Text
note over 變量左,變量右 :Text
  • 循環
loop 題目
代碼
end
  • 選擇
alt 題目
代碼
else
代碼
end

在沒有else的情況下使用 opt(option,選擇)

opt 題目
代碼
end

例如：

sequenceDiagram
　　A->>B: Hello B, how are you?
　　alt is sick
　　　　B->>A:not so good :(
　　else is well
　　　　B->>A:good
　　end
　　opt another
　　　　B->>A:Thanks for asking
　　end
sequenceDiagram
　　A->>B: Hello B, how are you?
　　alt is sick
　　　　B->>A:not so good 🙁
　　else is well
　　　　B->>A:good
　　end
　　opt another
　　　　B->>A:Thanks for asking
　　end
  • 激活停用
    可以激活activate或停用deactivate。
sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John
sequenceDiagram
Alice->>John: Hello John, how are you?
activate John
John–>>Alice: Great!
deactivate John

也可通過在消息箭頭後面添加+或-後綴，這一種快捷方式標記：

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!
sequenceDiagram
Alice->>+John: Hello John, how are you?
John–>>-Alice: Great!
  • 平行
    可以顯示並行發生的動作。
par [題目]
代碼
and [題目]
代碼
and [題目]
代碼
end

sequenceDiagram
  participant A
  participant B
  par A to B
    A->B:Hello
  and A to C
    A->C:Hello
  end
sequenceDiagram
participant A
participant B
par A to B
A->B:Hello
and A to C
A->C:Hello
end

連線

代碼 形狀
-> 無箭頭實線
->> 有箭頭實線
–> 無箭頭虛線
–>> 有箭頭虛線
-x 帶x實線
–x 帶x虛線

在必須後面加:,以加以注釋。
例如：

sequenceDiagram
  A -> B : none
  A ->> B : none
  A --> B : none
  A --> B : none
  A -x B : none
  A --x B : none
sequenceDiagram
A -> B : none
A ->> B : none
A –> B : none
A –> B : none
A -x B : none
A –x B : none

gantt(甘特圖)

甘特圖是一類條形圖，由Karol Adamiechi在1896年提出, 而在1910年Henry Gantt也獨立的提出了此種圖形表示。通常用在對項目終端元素和總結元素的開始及完成時間進行的描述

功能

代碼 解釋
title 標題
dateFormat 日期寫入格式
axisFormat 日期輸出格式
section 模塊
done 已經完成
Active 當前正在進行
Future 後續待處理
crit 關鍵階段
日期缺失 默認從上一項完成後

格式基本為：內容:關鍵是否,狀態,變量,日期

日期寫入格式

默認為：dateFormat YYYY-MM-DD

代碼 例如 解釋
YYYY 2020 4位年數
YY 20 2位年數
Q 4 季度
M或MM 1或12 月
D或DD 1或31 日
Do 1st或31st 序數的日
DDD或DDDD 1或365 年的日
X 1410715640.579 秒
x 1410715640579 毫秒
H或HH 0或23 時
h或hh 1或12 12時記時法
a或A am或pm 12時的附加
m或mm 0或59 分
s或ss 0或59 秒
S 0或9 十分之一秒
SS 0或99 百分之一秒
SSS 0或999 千分之一秒
Z或ZZ +12:00 從UTC偏移的時間

日期輸出格式

默認為：axisFormat %Y-%m-%d

代碼 解釋
%a 星期幾的縮寫
%A 完整的工作日名稱
%b 月份的縮寫
%B 完整的月份名稱
%c 日期和時間如”％a％b％e％H：％M：％S％Y”
%d 以十進制數[01,31]補零的月份
%e 以十進制數字表示的月份中帶空格的日期[1,31]
%H 小時(24小時制)十進制數字[00,23]
%I 小時(12小時制)十進制數字[01,12]
%j 年中的天十進制數字[001,366]
%m 以十進制數字[01,12]表示的月份
%M 分鐘十進制數字[00,59]
%L 十進制數字[000，999]表示的毫秒
%p AM或PM
%S 秒十進制數字[00,61]
%U 一年中的第幾周(星期日為一周的第一天)以十進制數[00,53]為準
%w 工作日以十進制數字[0,6]
%W 一年中的第幾周(星期一為一周中的第一天)以十進制數[00,53]為準
%x 日期以「％m /％d /％Y」表示
%X 時間以「％H：％M：％S」表示
%y 不帶世紀的十進制數字[00,99]
%Y 以世紀作為十進制數字的年份
%Z 時區偏移量
%% 文字「％」字符

大例如

gantt
  title AB
  section A
  A1 : done, 2020-01-01,2020-01-02
  A2 : active, 2020-01-02,1d
  section B
  B1 : future, 2020-01-03
  B2 : crit,active,b2,2020-01-03,48h
  section C
  C1 : done,after b2,1d
gantt
title AB
section A
A1 : done, 2020-01-01,2020-01-02
A2 : active, 2020-01-02,1d
section B
B1 : future, 2020-01-03
B2 : crit,active,b2,2020-01-03,48h
section C
C1 : done,after b2,1d

classDiagram(類圖)

類圖是面向對象建模的主要構建塊。它用於應用程序結構的一般概念建模，以及用於將模型轉換為編程代碼的詳細建模。類圖也可以用於數據建模。類圖中的類表示主要元素，應用程序中的交互以及要編程的類。
就是大了點，以我現在的能力是無法改變的。

功能

  • 類
    UML提供了表示類成員的機制，例如屬性和方法，以及有關它們的其他信息。圖中一個類的單個實例包含三個隔離專區：

頂部的小節包含類的名稱。它以粗體和居中打印，並且第一個字母大寫。它還可能包含描述類性質的可選注釋文本。
中間隔離專區包含類的屬性。它們左對齊，第一個字母為小寫。
底部的隔離區包含類可以執行的操作。它們也左對齊，首字母為小寫。

  • 定義類
    定義類有兩種方法：
  1. 使用關鍵字類（如）明確定義一個類class A.
  2. 通過它們之間的關係定義兩個類A <|– B
    命名約定：類名應由字母數和下劃線字符組成。
    classDiagram
    class A
    A <|-- B
classDiagram
class A
A <|– B
  • 定義成員
    根據括號()是否存在來區分屬性和函數/方法。與()一起的被視為函數/方法，而其他被視為屬性。
    使用:（冒號）後跟成員名稱來關聯類的成員
    classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal : +isMammal()
    Animal : +mate()
    Duck : +String beakColor
    Duck : +swim()
    Duck : +quack()
    Fish : -int sizeInFeet
    Fish : -canEat()
    Zebra : +bool is_wild
    Zebra : +run()
classDiagram
Animal <|– Duck
Animal <|– Fish
Animal <|– Zebra
Animal : +int age
Animal : +String gender
Animal : +isMammal()
Animal : +mate()
Duck : +String beakColor
Duck : +swim()
Duck : +quack()
Fish : -int sizeInFeet
Fish : -canEat()
Zebra : +bool is_wild
Zebra : +run()
  • 能見度
    為了指定類成員的可見性（即任何屬性或方法），可以將這些符號放在成員名稱的前面，但它是可選的：
    1.+Public
    2.-Private
   classDiagram
     AA <|-- BB
     AA : +a()
     BB : -b()
classDiagram
AA <|– BB
AA : +a()
BB : -b()

連線

大概定義為：

類型1 關係 類型2 ： 注釋

代碼 代碼 解釋
<|-- --|> 實線三角
*-- --* 實線菱頭
o-- --o 實線空菱
<-- --> 實線箭頭
-- -- 實線直連
<.. ..> 實線箭頭
<|.. ..|> 實線三角
.. .. 實線直連

例如：

     classDiagram
       A1 <|-- B1
       B1 --|> C1
       A2 *-- B2
       B2 --* C2
       A3 o-- B3
       B3--o C3
       A4 <-- B4
       B4--> C4
       A5 -- B5
       B5-- C5
       A6 <.. B6
       B6..> C6
       A7 <|.. B7
       B7 ..|> C7
       A8 .. B8
       B8 .. C8
classDiagram
A1 <|– B1
B1 –|> C1
A2 *– B2
B2 –* C2
A3 o– B3
B3–o C3
A4 <– B4
B4–> C4
A5 — B5
B5– C5
A6 <.. B6
B6..> C6
A7 <|.. B7
B7 ..|> C7
A8 .. B8
B8 .. C8
Tags:

VirMach 便宜 VPS

QNews

QNews