方塊圖
方塊圖由方塊和連接器組成，來直觀地表示複雜的系統、流程或架構。方塊代表基本元件或功能，連接器顯示這些元件之間的關係或流程，方塊圖在工程、軟體開發和流程管理等各個領域都至關重要。
複製
嵌入
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#f96,stroke:#333,stroke-width:4px
方塊圖用途
方塊圖的主要目的是提供系統的高層檢視，使人們能夠輕鬆理解和分析，而無需深入了解每個元件的複雜細節。這使得方塊圖對於簡化複雜系統，以及解釋系統內各元件的整體結構和互動特別有用。
使用情境
方塊圖在各個行業和學科中都有廣泛的應用，主要包括：
- 軟體架構：在軟體開發中，方塊圖可用於說明軟體應用程式的體系結構。這包括顯示各個模組或服務如何互動、資料流和高層元件互動情況。
- 網路拓撲圖：方塊圖非常適合表示 IT 和電信中的網路架構。它們可以展示不同網路裝置和服務如何互相連接，包括路由、交換器、防火牆以及資料在網路中的流動。
- 製程流程圖：在商業和製造中，可以使用方塊圖來建立流程圖。這些流程圖代表業務或製造流程的各個階段，有助於視覺化步驟順序、決策點和控制流程。
- 電氣系統：工程師使用方塊圖來表示電氣系統和電路。它們可以說明電氣系統的高層結構、不同電氣元件之間的互動以及電流的流動。
- 教育目的：方塊圖也廣泛用於教育材料中，以簡化的方式解釋複雜的概念和系統。方塊圖有助於分解和視覺化科學理論、工程原理和技術系統。
接下來，我們將深入研究使用 Mermaid 建立和操作方塊圖的方式，涵蓋從基本語法到進階設定和樣式的所有內容。
簡單方塊圖
基礎結構
方塊圖是由代表不同實體或元件的方塊組成，在 Mermaid 中可以使用簡單的文字標籤輕鬆建立方塊。方塊圖最基本形式可以是一系列沒有任何連接線的方塊。
簡單方塊圖範例：要建立一個包含三個標記為 a、b 和 c 方塊的簡單方塊圖，語法如下：
複製
嵌入
block-beta
a b c
這個程式碼將產生三個水平排列的方塊，每個方塊都會自動間隔和對齊，以實現最佳的可讀性。
定義要使用的欄數
多欄圖
雖然簡單的方塊圖是線性且簡單的，但更複雜的系統可能需要結構化版面配置。Mermaid 允許將方塊組織成多欄，從而有助於建立更複雜和更詳細的圖表。
多欄圖範例：在需要將方塊分佈到多個欄的情況下，可以指定欄數並相應地排列方塊。以下是如何建立具有三欄和四個方塊的方塊圖，其中第四個方塊出現在第二行中：
複製
嵌入
block-beta
columns 3
a b c d
這個語法 Mermaid 將方塊 a、b、c 和 d 排列在三欄中，並根據需要換行到下一行。此功能對於表示分層或多層系統特別有用。
進階方塊設定
Mermaid 進階語法使圖表設計具有更大的靈活性和複雜性，可適應更廣泛的用例和情境。
調整方塊寬度
跨越多欄
在更複雜的圖表中，你可能需要跨越多欄的方塊，來強調某些元件或表示更大的實體。Mermaid 允許調整方塊寬度以覆蓋多欄，從而增強圖表的可讀性和結構性。
範例：要建立一個跨越兩欄的方塊，你可以為每個方塊指定所需的寬度：
複製
嵌入
block-beta
columns 3
a["A label"] b:2 c:2 d
在此範例中，標記為 A label 的方塊佔據一欄，而方塊 b、c 跨越 2 欄，d 分配到它自己的欄。方塊大小的這種靈活性對於準確表示具有不同重要性或大小的元件的系統至關重要。
建立複合方塊
巢狀方塊
複合方塊允許表示巢狀或分層系統，其中一個元件包含多個子元件。
範例：建立複合方塊涉及定義父方塊，然後在其中巢狀子方塊。下面是如何定義具有巢狀元素的複合方塊語法：
複製
嵌入
block-beta
block
D
end
A["A: I am a wide one"]
在這個語法中，D 是一個巢狀在更大父方塊中的子方塊。這個功能對於描述複雜結構特別有用，例如具有多個服務的伺服器或較大組織框架內的一個部門。
自動欄寬
調整寬度
Mermaid 允許根據方塊的內容動態調整欄寬。欄的寬度由欄中最寬的方塊確定，確保圖表保持平衡和可讀。
範例：在具有不同方塊大小的圖表中，Mermaid 會自動調整欄寬以適合每欄中最大的方塊。
複製
嵌入
block-beta
columns 3
a:3
block:group1:2
columns 2
h i j k
end
g
block:group2:3
%% columns auto (default)
l m n o p q r
end
這裡示範了 Mermaid 如何動態調整欄的寬度以適應最寬的方塊。
水平合併方塊：在需要水平堆疊方塊的情況下，可以使用欄寬來完成任務。以下是建立 4 個方塊堆疊在一起的方塊圖語法：
複製
嵌入
block-beta
block
columns 1
a["A label"] b c d
end
在此範例中，合併方塊的寬度會自動調整為最大子方塊的寬度。
方塊種類和形狀
Mermaid 方塊圖不限於標準矩形形狀。Mermaid 提供多種方塊形狀，從而可以更細緻和個人化的表示不同類型的資訊或實體。
標準方塊形狀
圓角矩形
建立圓角矩形方塊，可用於表示更柔軟或更靈活的元件：
複製
嵌入
block-beta
id1("This is the text in the box")
體育場形狀
體育場形狀方塊可以用來表示流程導向的元件：
複製
嵌入
block-beta
id1(["This is the text in the box"])
子流程形狀
用於表示子流程或包含的進流程，用具有雙垂直線的矩形方塊表示：
複製
嵌入
block-beta
id1[["This is the text in the box"]]
圓柱形
圓柱形非常適合表示資料庫或儲存元件：
複製
嵌入
block-beta
id1[("Database")]
圓形
圓形可用於表示集中或關鍵的元件：
複製
嵌入
block-beta
id1(("This is the text in the circle"))
不對稱形狀、菱形和六邊形
對於決策使用菱形，對於獨特或專門的流程，可以使用不對稱和六邊形：
不對稱形狀
複製
嵌入
block-beta
id1>"This is the text in the box"]
複製
嵌入
block-beta
id1{"This is the text in the box"}
複製
嵌入
block-beta
id1{{"This is the text in the box"}}
平行四邊形和梯形
平行四邊形和梯形非常適合輸入 / 輸出和過渡流程
複製
嵌入
block-beta
id1[/"This is the text in the box"/]
id2["This is the text in the box"]
A[/"Christmas"]
B["Go shopping"/]
雙圈
為了醒目提示關鍵或高優先順序元件，使用雙圓圈會很有效：
複製
嵌入
block-beta
id1((("This is the text in the circle")))
箭頭方塊和空方塊
箭頭方塊
方塊箭頭可以直觀地顯示流程內的方向或流動：
複製
嵌入
block-beta
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
blockArrowId4<["Label"]>(down)
blockArrowId5<["Label"]>(x)
blockArrowId6<["Label"]>(y)
blockArrowId6<["Label"]>(x, down)
空方塊
空方塊可用於建立空白，這對於版面配置和可讀性很有用：
複製
嵌入
block-beta
columns 3
a space b
c d e
複製
嵌入
block-beta
ida space:3 idb idc
注意，你可以使用數字符號 space:num 設定空方塊佔用的欄數，其中 num 表示欄寬的數值。你還可以使用 space，預設為一欄。
Mermaid 中的標準形狀和特殊形狀增強了方塊圖的表達能力，使其能夠更準確、更具情境的表示。
用線條連接方塊
Mermaid 方塊圖一個關鍵特性就是能夠使用各種類型的線條或連結來連接各個方塊。
基礎連接和箭頭類型
連接方塊需要使用箭頭或線條。這些連接器描述了方塊之間的關係或資訊流。Mermaid 提供了一系列箭頭類型來滿足不同的圖表需求。
基本連結
建立一個帶有箭頭的簡單連結，顯示從一個方塊到另一個方塊的方向或流程：
複製
嵌入
block-beta
A space B
A-->B
該範例說明從方塊 A 到方塊 B 的直接連接。
連結上的文字
除了連接方塊之外，通常還需要描述或標記關係。Mermaid 允許在連結上新增文字，為連結提供上下文。
要將文字新增到連結上，語法是在連結定義中包含該文字：
複製
嵌入
block-beta
A space:2 B
A-- "X" -->B
複製
嵌入
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:pink,stroke:#333,stroke-width:4px
樣式和自訂
除了方塊圖的結構和版面配置之外，Mermaid 還提供大量樣式選項，這些自訂功能允許建立更具視覺特色和資訊化的圖表。
單獨方塊樣式
Mermaid 可以對單個方塊進行詳細的樣式設定，你可以套用各種 CSS 屬性，例如顏色、筆觸和邊框粗細。
自訂單個方塊的樣式
要對一個方塊套用自訂樣式，你可以使用 style 語法，後面跟方塊識別碼和所需的 CSS 屬性：
複製
嵌入
block-beta
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:pink,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
類別樣式
Mermaid 支援將樣式套用於類別。如果你想將一組特定的樣式套用於多個元素，使用樣式設定或更容易，因為你只需將這些元素連結到一個類別即可。
為單一類別設定樣式
複製
嵌入
block-beta
A space B
A-->B
classDef blue fill:pink,stroke:#333,stroke-width:4px;
class A blue
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
這裡，定義了名為 blue 的類別並將其套用於方塊 A，而方塊 B 接收單獨的樣式。
使用案例
當 Mermaid 方塊圖的模組化圖表應用於實際情境時，其多功能性表現得淋漓盡致。
各種功能詳細範例
透過結構、連結和樣式元素，我們可以建立在不同情境下發揮特定作用的 Mermaid 方塊圖。
系統架構
以下是一個具有互連元件的簡單軟體系統架構：
複製
嵌入
block-beta
columns 3
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
Disk left<[" "]>(left) Database[("Database")]
classDef front fill:pink,stroke:#333;
classDef back fill:#f96,stroke:#333;
class Frontend front
class Backend,Database back
本範例展示了一個包含前端、後端和資料庫的基本架構，各個方塊的表現形式各不相同，以區分不同元件類型。
業務流程
以下是一個具有決策點和多個階段的業務流程：
複製
嵌入
block-beta
columns 3
Start(("Start")) space:2
down<[" "]>(down) space:2
Decision{{"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:pink;
style End fill:pink;
這些實際案例凸顯了 Mermaid 方塊圖在簡化複雜資訊並實現跨領域有效溝通方面的實用價值。
疑難排解
使用 Mermaid 語法製作複雜方塊圖有時會遇到挑戰，這裡列出常見語法錯誤，並提供管理更複雜圖表結構的技巧。
常見語法錯誤
避免常見語法錯誤是順利使用 Mermaid 方塊圖的關鍵。
連結錯誤
使用不正確的連結語法，可能會導致意外的結果或損壞的圖表：
複製
嵌入
block-beta
A - B
更正：確保正確使用箭頭連接（--> 或 ---）各區塊，以定義連接的方向和類型。另外，方塊圖的基本原則之一是讓作者完全控制方塊的位置，因此上面的案例中，需要在方塊之間新增空格：
複製
嵌入
block-beta
A space B
A --> B
樣式錯位
在錯誤的上下文中或使用不正確的語法套用樣式，可能會導致無法按預期進行樣式設定：
複製
嵌入
block-beta
A
style A fillpink;
更正：確保用逗號正確分隔樣式屬性，並使用正確的 CSS 屬性格式來修正語法：
複製
嵌入
block-beta
A
style A fill:pink,stroke:#333;
