Mermaid.js 維恩圖語法與佈局指南

維恩圖使用重疊的圓形來展示不同集合或數據組之間的邏輯關係。這種基於文字的方法讓您能夠快速呈現位於多個類別交集處的概念，而無需使用手動圖形設計工具。

基本語法結構

每個維恩圖都以venn-beta宣告開始，接著使用set關鍵字定義單獨的群組。然後使用union關鍵字來定義這些群組之間的重疊區域。

Mermaid


在 VPasCode 中編輯 Mermaid
Mermaid Edit Mermaid in VPasCode 
venn-beta
set GroupA ["標籤 A"]
set GroupB ["標籤 B"]
union GroupA, GroupB ["交集標籤"]
Edit Mermaid in VPasCode



在 VPasCode 中編輯 Mermaid

語法參考

下表分解了在 Mermaid.js 中構建維恩圖所使用的主要元素。

元件 描述 語法範例
宣告 初始化維恩圖渲染器（目前處於測試階段）。 venn-beta
集合 定義一個獨立的數據類別或圓形。必須提供識別符和顯示標籤。 set A ["市場團隊"]
聯集 定義兩個或多個集合之間的重疊區域。使用逗號分隔識別符。 union A,B ["共同目標"]
大小修飾符 一個可選的:N 用於相對縮放圓形或交集大小的後綴。 set A ["大型群組"]:15
文字節點 用於在集合或交集區域內直接列出特定要點的縮進區塊。 text ItemId ["特定項目符號"]

現實世界藍圖：產品機會分析

此藍圖展示了經典的產品開發策略框架，用以映射使用者痛點、商業目標與技術可行性，從而精準定位理想的特色發布。

Mermaid


在 VPasCode 中編輯 Mermaid
Mermaid Edit Mermaid in VPasCode 
venn-beta
set UserNeed ["使用者需求"]
set BusinessGoal ["商業價值"]
set TechFeasible ["技術能力"]

union UserNeed, BusinessGoal ["戰略勝利"]
union UserNeed, TechFeasible ["未 monetized 特色"]
union BusinessGoal, TechFeasible ["內部自動化"]

union UserNeed, BusinessGoal, TechFeasible ["產品黃金區"]
Edit Mermaid in VPasCode



在 VPasCode 中編輯 Mermaid

語法提示： 使用三個或更多類別時，Mermaid 會自動為您建立嵌套交集。只需宣告最後一個三向 union 並以逗號分隔所有三個識別符，引擎將會把標籤精確地放置在中心交疊處。

進階概念：項目符號與大小調整

對於更技術性的文件，您可以直接在圓形中插入特定的文字項目符號，並調整圓形大小以代表實際比例（例如資料庫大小或團隊人數）。

Mermaid


在 VPasCode 中編輯 Mermaid
Mermaid Edit Mermaid in VPasCode 
venn-beta
set Front ["前端"]:10
  text F1 ["React"]
  text F2 ["CSS"]
set Back ["後端"]:15
  text B1 ["Node.js"]
  text B2 ["PostgreSQL"]

union Front, Back ["全端"]:3
  text FB1 ["OpenAPI 規格"]
  text FB2 ["Next.js SSR"]

style Front fill:#E8F4FD, stroke:#0072B1
style Back fill:#FDF0E8, stroke:#E06000
Edit Mermaid in VPasCode



在 VPasCode 中編輯 Mermaid

常見語法陷阱

維恩圖是 Mermaid 語法核心中的全新功能。請牢記以下三項結構設計規則，以確保您的圖形順利顯示：

  • 優先順序： 您必須完全宣告您的單獨 set 行，才能在任何 union 區塊中引用它們。引用尚未明確建立的識別符將導致建構失敗。
  • 注意聯合的逗號： 當建立一個 聯合 多個集合時，請確保識別符號之間以逗號分隔，但在方括號標籤前不要有尾隨的逗號。聯合 A, B, C ["標籤"] 是正確的。
  • 測試版穩定性： 由於此佈局樣式使用了 venn-beta 標誌，高級元素自定樣式規則可能在不同版本間有所調整。建議使用基本的十六進位顏色代碼來設定 填滿 和 描邊 變數，以達到最佳的跨版本相容性。
返回頂端