Markdown畫圖(mermaid)學習
簡介
目前博客園支持mermaid的graph，subgraph，sequenceDiagram，gantt，classDiagram
mermaid(美人魚), 是一個相似markdown，用文本語法來描述文檔圖形的工具。mermaid語法包含在博客園markdown中。
註釋爲：html
%% 註釋
插入爲：（如下的例如只列舉代碼）編程
```mermaid
代碼
```markdown
或函數
<body> <div class="mermaid"> 代碼 </div> </body>
graph(流程圖)
關鍵字graph表示一個流程圖的開始，同時須要指定該圖的方向。若是內容包含特殊字符，可以使用"字符"，或參考這個的markdown轉義。工具
方向
| 代碼 | 方向 |
|---|---|
| TB | 從上到下 |
| TD | 從上到下 |
| BT | 從下到上 |
| RL | 從右到左 |
| LR | 從左到右 |
T = TOP，B = BOTTOM，L = LEFT，R = RIGHT，D = DOWN
例如：oop
graph LR; A-->B; B-->C; C-->D; D-->A;
graph LR; A-->B; B-->C; C-->D; D-->A;
形狀
| 代碼 | 形狀 |
|---|---|
| 變量 | 默認形狀 |
| 變量[內容] | 矩形 |
| 變量(內容) | 圓矩形 |
| 變量((內容)) | 圓形 |
| 變量>內容] | 非對稱形 |
| 變量{內容} | 菱形 |
例如：code
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}
連線
話很少說，上表。注意：中間的符號或多或少都不行orm
| 代碼 | 形狀 |
|---|---|
| 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
樣式
將特定樣式例如較粗的邊框或不一樣的背景顏色htm
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提供了表示類成員的機制，例如屬性和方法，以及有關它們的其餘信息。圖中一個類的單個實例包含三個隔離專區：
頂部的小節包含類的名稱。它以粗體和居中打印，而且第一個字母大寫。它還可能包含描述類性質的可選註釋文本。
中間隔離專區包含類的屬性。它們左對齊，第一個字母爲小寫。
底部的隔離區包含類能夠執行的操做。它們也左對齊，首字母爲小寫。
- 定義類
定義類有兩種方法：
- 使用關鍵字類（如）明肯定義一個類class A.
- 經過它們之間的關係定義兩個類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
相關文章
- 1. Markdown中使用mermaid畫流程圖
- 2. 使用Mermaid畫圖
- 3. 用 mermaid 畫甘特圖
- 4. Markdown裏面使用mermaid畫流程圖（基礎）
- 5. markdown使用下使用mermaid作圖
- 6. markdown繪圖插件----mermaid簡介
- 7. markdown - 畫圖
- 8. markdown 畫圖
- 9. Mermaid圖教程
- 10. markdown畫流程圖
- 更多相關文章...
- • Markdown 圖片 - Markdown 教程
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章