什麼是區塊圖？
區塊圖使用標記的區塊以結構化佈局表示系統或流程。它們展示元件的高層次組織及其關係，而不涉及詳細的實作細節。區塊圖廣泛用於工程、系統設計和架構文件，為複雜系統提供清晰、易理解的概覽。
編輯與預覽
使用 Mermaid 語法創建 區塊圖，即時查看效果。
常見使用場景
系統架構
設計展示主要元件及其關係的高層次系統架構。向技術和非技術相關方傳達系統設計。
元件概覽
展示軟體或硬體元件的組織方式。視覺化層、模組及其互動。
網路拓撲
說明帶有伺服器、交換器和連線的網路佈局。記錄基礎設施元件及其排列。
流程概覽
以區塊為主要階段呈現高層次流程。提供複雜流程的簡化視圖。
核心功能
欄式佈局
在可設定欄數的網格中排列區塊。精確控制圖表的視覺結構。
區塊跨欄
使區塊跨越多欄以強調或表示包含多個子元件的元件。
巢狀分組
在區塊內建立區塊，展示包含關係和層次結構。
多種形狀
使用不同形狀如矩形、圓角框、體育場形和圓柱形來表示不同的元件類型。
最佳實踐
保持高層次
區塊圖應展示全局。避免包含過多細節——使用其他圖表類型展示具體內容。
使用一致的尺寸
保持區塊的大小相似，除非大小差異傳達關於重要性或規模的含義。
清晰標註
為每個區塊使用描述性名稱。圖表應無需額外文件即可理解。
邏輯排列
將相關區塊放在彼此附近。使用從上到下或從左到右的流向顯示資料或控制流方向。
探索其他圖表類型
流程圖
使用節點和方向箭頭視覺化流程、工作流程和演算法。非常適合商業流程和決策樹。
時序圖
記錄不同角色或系統之間隨時間的互動。適用於 API 文件和系統設計。
類別圖
以類別、屬性和關係建模物件導向系統。軟體架構規劃不可或缺的工具。
狀態圖
呈現系統或應用程式中的狀態轉換。非常適合建模生命週期狀態和工作流程。
甘特圖
規劃和追蹤專案時程及任務依賴關係。非常適合專案管理和排程。
ER 圖
設計包含實體和關係的資料庫架構。適用於資料庫建模和文件。
使用者旅程
繪製使用者在各接觸點的體驗和互動。非常適合 UX 設計和顧客旅程分析。
Git 圖
視覺化 Git 分支策略和提交歷史。有助於說明版本控制工作流程。
心智圖
組織創意、腦力激盪和建立層次化視覺結構。適合規劃和知識管理。
圓餅圖
以圓形圖表展示資料比例分布。適合顯示百分比和市場份額分析。
時間線
沿時間軸視覺化事件和里程碑。適合專案歷史和路線圖展示。
看板
將任務按工作流階段組織到欄中。適合敏捷專案管理和任務追蹤。
四象限圖
在雙軸網格上繪製項目進行比較和優先順序排定。適合功能優先順序和策略分析。
桑基圖
用比例箭頭視覺化節點間的流量。適合能源流、預算分配和轉化漏斗。
XY 圖表
建立帶有可自訂座標軸的長條圖和折線圖。適合資料視覺化和趨勢分析。
架構圖
使用服務圖示和連線設計雲端和系統架構。適合基礎設施文件。
封包圖
視覺化網路協定封包結構和位元級欄位佈局。適合網路協定文件。