Mermaid 簡介

Mermaid 允許你使用文本和代碼創建圖表和可視化。

它是一個基于 JavaScript 的圖表繪制工具，可渲染 Markdown 啟發的文本定義以動態創建和修改圖表。

教程鏈接

Mermaid 由三部分組成

• 部署
• 語法
• 配置

Mermaid 的使用方法

• 使用 Mermaid 實時編輯器
• 使用 Mermaid 圖表編輯器
• 使用 Mermaid 插件和集成
• 調用 Mermaid JavaScript API
• 添加 Mermaid 作為依賴

復雜圖表結構的技巧

管理 Mermaid 圖中的復雜性涉及規劃和采用最佳實踐。

• 模塊化設計

將復雜的圖表分解為更小、更易于管理的組件。這種方法不僅使圖表更易于理解，而且簡化了創建和維護過程。

• 一致的風格

使用類在相似元素之間保持一致的樣式。這不僅節省了時間，還確保了外觀的凝聚力和專業性。

• 注釋和文檔

在 Mermaid 語法中使用帶有 %% 的注釋來記錄圖表各個部分的用途。這種做法對于保持清晰度非常寶貴，尤其是在團隊工作或在一段時間后返回圖表時。

通過這些故障排除提示和最佳實踐，你可以有效管理和解決 Mermaid 框圖中的常見問題。

餅圖簡介

餅圖（或圓形圖）是一種圓形統計圖形，將其劃分為多個切片以說明數字比例。

在餅圖中，每個切片的弧長（及其中心角和面積）與其表示的數量成正比。

餅圖渲染方式有多種變化。

教程鏈接

餅圖語法

在 Mermaid 中繪制餅圖非常簡單。

• 以 pie 關鍵字開始繪制圖表

  • showData 在圖例文本之后渲染實際數據值。這是可選的

• 后面跟著 title 關鍵字及其字符串值，為餅圖提供標題。這是可選的

• 接下來是數據集。餅圖切片將按與標簽相同的順序順時針排序。

  • label 表示餅圖中 " " 引號內的部分。
  • 后跟 : 冒號作為分隔符
  • 后面跟著 positive numeric value（支持最多兩位小數）

餅圖示例

---
config:pie:textPosition: 0.5themeVariables:pieOuterStrokeWidth: "5px"
---
pie showDatatitle Key elements in Product X"Calcium" : 42.96"Potassium" : 50.05"Magnesium" : 10.01"Iron" :  5

雷達圖簡介

雷達圖是一種以圓形格式繪制低維數據的簡單方法。

它也被稱為雷達圖、蜘蛛圖、星圖、蛛網圖、極坐標圖或 Kiviat 圖。

這種圖表類型對于需要以清晰簡潔的方式以圓形格式表示數據的開發者、數據科學家和工程師特別有用。

它通常用于以圖形方式總結和比較多個實體在多個維度上的表現。

教程鏈接

雷達圖語法

radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...

雷達圖語法細節

標題

title：標題是一個可選字段，允許在雷達圖頂部渲染標題。

radar-betatitle Title of the Radar Diagram...

軸

axis：axis 關鍵字用于定義雷達圖的軸。

每個軸由一個 ID 和一個可選標簽表示。

可以在一條線上定義多個軸。

radar-betaaxis id1["Label1"]axis id2["Label2"], id3["Label3"]...

曲線

curve：curve 關鍵字用于定義雷達圖中曲線的數據點。

每條曲線由一個 ID、一個可選標簽和一個值列表表示。

值可以通過數字列表或鍵值對列表定義。如果使用鍵值對，則鍵表示軸 ID，值表示數據點。否則，假定數據點按定義的軸的順序排列。

可以在一條線上定義多條曲線。

radar-betaaxis axis1, axis2, axis3curve id1["Label1"]{1, 2, 3}curve id2["Label2"]{4, 5, 6}, id3{7, 8, 9}curve id4{ axis3: 30, axis1: 20, axis2: 10 }...

選項

• showLegend：showLegend 關鍵字用于顯示或隱藏雷達圖中的圖例。默認顯示圖例。
• max：雷達圖的最大值。這用于縮放雷達圖。如果未提供，則從數據點計算出最大值。
• min：雷達圖的最小值。這用于縮放雷達圖。如果未提供，則最小值為 0。
• graticule：經緯線關鍵字用于定義要在雷達圖中渲染的經緯線類型。經緯線可以是 circle 或 polygon。如果未提供，則默認格線為 circle。
• ticks：ticks 關鍵字用于定義經緯線上的刻度數。它是繪制的同心圓或多邊形的數量，用于指示雷達圖的比例。如果未提供，則默認刻度數為 5。

雷達圖示例

---
title: "Grades"
---
radar-betaaxis m["Math"], s["Science"], e["English"]axis h["History"], g["Geography"], a["Art"]curve a["Alice"]{85, 90, 80, 70, 75, 90}curve b["Bob"]{70, 75, 85, 80, 90, 85}max 100min 0

時間線簡介

“時間線是一種圖表，用于說明事件、日期或時間段的年表。它通常以圖形方式渲染以指示時間的流逝，并且通常按時間順序組織。

基本時間線按時間順序渲染事件列表，通常使用日期作為標記。

教程鏈接

時間線語法

創建時間線圖的語法很簡單。你始終以 timeline 關鍵字開頭，讓 mermaid 知道你想要創建時間線圖。

之后，可以向時間線添加標題。這是通過添加一行帶有關鍵字 title 后跟標題文本來完成的。

然后添加時間線數據，其中始終以時間段開頭，后跟冒號，然后是事件的文本。你可以選擇添加第二個冒號，然后添加事件的文本。因此，你可以在每個時間段內擁有一個或多個事件。

默認情況下，如果時間段和事件的文本太長，則會換行。這樣做是為了避免文本繪制在圖表之外。你還可以使用 <br> 強制換行。

時間線示例

timelinetitle Timeline of Industrial Revolutionsection 17th-20th centuryIndustry 1.0 : Machinery, Water power, Steam <br>powerIndustry 2.0 : Electricity, Internal combustion engine, Mass productionIndustry 3.0 : Electronics, Computers, Automationsection 21st centuryIndustry 4.0 : Internet, Robotics, Internet of ThingsIndustry 5.0 : Artificial intelligence, Big data, 3D printing

樹形圖簡介

樹狀圖將層次結構數據顯示為一組嵌套的矩形。樹的每個分支都用一個矩形表示，然后用代表子分支的小矩形平鋪。
樹狀圖是可視化分層數據和顯示類別與子類別之間比例的有效方法。每個矩形的大小與其所代表的值成比例，便于比較層級結構中的不同部分。

樹狀圖尤其適用于：

• 可視化分層數據結構。
• 比較類別之間的比例。
• 在有限空間內顯示大量層級數據。
• 識別層級結構數據中的模式和異常值。

教程鏈接

樹形圖語法

樹狀圖中的節點使用以下語法定義：

• 部分/父節點：使用引號 “Section Name” 定義
• 帶有值的葉節點：使用引號后跟冒號和值 “Leaf Name”: value 定義
• 層級結構：使用縮進（空格或制表符）創建
• 樣式：節點可以使用 :::class 語法設置樣式

樹形圖示例

---
config:treemap:showValues: false
---treemap-beta
"Section 1""Leaf 1.1": 12"Section 1.2":::class1"Leaf 1.2.1": 12
"Section 2""Leaf 2.1": 20:::class1"Leaf 2.2": 25"Leaf 2.3": 12classDef class1 fill:red,color:blue,stroke:#FFD600;

數據包圖簡介

數據包圖是用于說明網絡數據包的結構和內容的可視化表示。網絡數據包是通過網絡傳輸的數據的基本單位。

教程鏈接

數據包圖語法1：

packet
start: "Block name" %% Single-bit block
start-end: "Block name" %% Multi-bit blocks
... More Fields ...

數據包圖語法2

packet
+1: "Block name" %% Single-bit block
+8: "Block name" %% 8-bit block
9-15: "Manually set start and end, it's fine to mix and match"
... More Fields ...

數據包圖語法細節

• 范圍：標題后面的每一行代表數據包中的不同字段。范圍（例如 0-15）指示數據包中的位位置。

• 字段說明：該字段所代表內容的簡短描述，用引號引起來。

部分mermaid語法支持：

• packet-beta
• packet【部分組件可能不支持】
• mermaid開頭與前述文字增加換行，避免部分瀏覽器無法解析

數據包圖示例

---
config:packet:bitWidth: 32
------
title: "TCP Packet"
---packet-beta0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106: "URG"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-255: "Data (variable length)"

象限圖簡介

象限圖是分為四個象限的數據的直觀表示。它用于在二維網格上繪制數據點，其中一個變量表示在 x 軸上，另一個變量表示在 y 軸上。

象限是通過根據一組特定于所分析數據的標準將圖表分為四個相等部分來確定的。

象限圖通常用于識別數據的模式和趨勢，并根據圖表中數據點的位置確定操作的優先級。它們通常用于商業、營銷和風險管理等字段。

教程鏈接

象限圖語法

• x 軸決定 x 軸上顯示的文本。在 x 軸上有左右兩個部分，你可以同時通過兩個部分，也可以僅通過左側。該語句應以 x-axis 開頭，然后是 left axis text，后跟分隔符 -->，然后是 right axis text。

• y 軸確定在 y 軸上顯示的文本。在 y 軸上有頂部和底部兩部分，你可以通過兩者，也可以僅通過底部。該語句應以 y-axis 開頭，然后是 bottom axis text，后跟分隔符 -->，然后是 top axis text。

• quadrant-[1,2,3,4] 確定象限內顯示哪些文本。

• 點用于在象限圖內繪制一個圓。語法為 : [x, y]，此處 x 和 y 值在 0-1.

象限圖示例1

---
config:quadrantChart:chartWidth: 400chartHeight: 400themeVariables:quadrant1TextFill: "ff0000"
---
quadrantChartx-axis Urgent --> Not Urgenty-axis Not Important --> "Important ?"quadrant-1 Planquadrant-2 Doquadrant-3 Delegatequadrant-4 Delete

象限圖示例2

quadrantCharttitle Reach and engagement of campaignsx-axis Low Reach --> High Reachy-axis Low Engagement --> High Engagementquadrant-1 We should expandquadrant-2 Need to promotequadrant-3 Re-evaluatequadrant-4 May be improvedCampaign A: [0.9, 0.0] radius: 12Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0Campaign E:::class2: [0.5, 0.4]Campaign F:::class3: [0.4, 0.5] color: #0000ffclassDef class1 color: #109060classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10pxclassDef class3 color: #f00fff, radius : 10

GIT圖

Git 圖表是各個分支上 git 提交和 git 操作（命令）的圖形表示。

此類圖表對于開發者和 DevOps 團隊分享他們的 Git 分支策略特別有幫助。例如，它可以更輕松地可視化 git flow 的工作原理。

教程鏈接

XY圖簡介

在 mermaid-js 的上下文中，XY 圖是一個綜合圖表模塊，包含利用 x 軸和 y 軸進行數據表示的各種類型的圖表。

目前，它包括兩種基本圖表類型：柱狀圖和折線圖。

這些圖表旨在直觀地顯示和分析涉及兩個數值變量的數據。

值得注意的是，雖然 mermaid-js 當前的實現包含這兩種圖表類型，但該框架被設計為動態且適應性強的。

因此，它具有將來擴展和包含其他圖表類型的能力。

這意味著用戶可以在 XY 圖模塊中期待一套不斷發展的圖表選項，以滿足隨著時間的推移引入新圖表類型的各種數據可視化需求。

教程鏈接

XY圖語法

• x 軸主要用作分類值，但在需要時也可以用作數值范圍值。
• y 軸用于表示數值范圍值，它不能有分類值。

XY圖使用說明

部分mermaid語法支持：

• xychart-beta
• xychart【部分組件可能不支持】
• mermaid開頭與前述文字增加換行，避免部分瀏覽器無法解析

XY圖示例1

xychart-betatitle "Sales Revenue"x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]y-axis "Revenue (in $)" 4000 --> 11000bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

XY圖示例2

---
config:xyChart:width: 900height: 600showDataLabel: truethemeVariables:xyChart:titleColor: "#ff0000"
---
xychart-betatitle "Sales Revenue"x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]y-axis "Revenue (in $)" 4000 --> 11000bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

方框圖簡介

框圖是一種直觀、有效的方式來直觀地表示復雜的系統、流程或架構。它們由塊和連接器組成，其中塊代表基本組件或功能，連接器顯示這些組件之間的關系或流程。這種圖表方法在工程、軟件開發和流程管理等各個字段都至關重要。

框圖的主要目的是提供系統的高級視圖，以便輕松理解和分析，而無需深入研究每個組件的復雜細節。這使得它們對于簡化復雜系統以及解釋系統內組件的整體結構和交互特別有用。

許多人使用 Mermaid 流程圖來達到此目的。這樣做的副作用是自動布局有時會將形狀移動到圖表制作者不想要的位置。框圖使用不同的方法。在此圖中，我們讓作者完全控制形狀的放置位置。

框圖在各個行業和學科中都有廣泛的應用。一些關鍵用例包括：

• 軟件架構：在軟件開發中，框圖可用于說明軟件應用的體系結構。這包括顯示不同模塊或服務如何交互、數據流和高級組件交互。

• 網絡圖：框圖非常適合表示 IT 和電信中的網絡架構。它們可以描述不同的網絡設備和服務如何互連，包括路由、交換機、防火墻以及網絡上的數據流。

• 工藝流程圖：在商業和制造中，可以使用框圖來創建流程圖。這些流程圖代表業務或制造流程的各個階段，有助于可視化步驟順序、決策點和控制流程。

• 電氣系統：工程師使用框圖來表示電氣系統和電路。它們可以說明電氣系統的高級結構、不同電氣組件之間的相互作用以及電流的流動。

• 教育目的：框圖也廣泛用于教育材料中，以簡化的方式解釋復雜的概念和系統。它們有助于分解和可視化科學理論、工程原理和技術系統。

教程鏈接

方框圖示例1

block-betacolumns 3a:3block:group1:2columns 2h i j kendgblock:group2:3%% columns auto (default)l m n o p q rend

方框圖示例2

block-betacolumns 3Start(("Start")) space:2down<[" "]>(down) space:2Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]downAgain<["No"]>(down) space r3<["Done"]>(down)Process2["Process B"] r2<["Done"]>(right) End(("End"))style Start fill:#969;style End fill:#696;