視覺溝通是有效產品管理、軟體架構與戰略規劃的基石。多年來，製作專業圖表需要掌握複雜的圖形使用者介面，或學習不同工具之間截然不同的語法。VPasCode，Visual Paradigm 的統一圖表程式碼平台，透過允許您使用簡單的文字語法創建出色的視覺效果，改變了這一現狀。
最近，VPasCode 扩展了對 Mermaid的支援，Mermaid 是最流行的文本轉圖表語言之一，並新增了四種強大的新圖表類型： 石川圖（魚骨圖）, 事件建模, 維恩圖，以及 沃德利地圖。無論您是進行根本原因分析、繪製系統行為、視覺化集合關係，還是規劃價值鏈，這些新功能都能讓您立即將想法轉化為視覺圖表。
本指南將帶您逐一了解這些新圖表類型，提供清晰的範例與語法說明，幫助您立即上手。
什麼讓 VPasCode 不同於其他？
VPasCode（簡稱 V視覺 PParadigm 的 as程式碼平台）是一個 統一的文本轉圖表環境。它可呈現 PlantUML、Mermaid、Graphviz，以及更多功能，讓您可以在同一個編輯器中自由切換語法，而無需學習多個工具。
具備如 即時預覽, 一鍵 URL 分享，以及 免費 SVG/PNG 導出，VPasCode 設計旨在提升效率。以下增強功能專注於 Mermaid 的最新語法（v11.12.3+ 和 v11.15.0+），讓您能以最少的努力創建複雜的圖表。
1. 石川圖（魚骨圖）——根本原因分析
石川圖，又稱因果圖或魚骨圖，是品質管理與問題解決會議中的常用工具。它幫助團隊以視覺化方式進行腦力激盪，並對特定問題的潛在原因進行分類。
範例 – 「模糊照片」根本原因分析
在 VPasCode 中，建立石川圖非常直覺。第一行定義問題（魚頭），而縮排則建立層級化的因果分支（魚骨）。
ishikawa-beta
模糊照片
流程
焦點失準
快門速度太慢
保護膜未移除
應用美化濾鏡
使用者
手抖
設備
鏡頭
鏡頭不適合
鏡頭損壞
鏡頭髒
感應器
感應器損壞
感應器髒
環境
物體移動太快
太暗
2. 事件建模圖——系統隨時間的行為
事件建模是一種強大的技術，用於描述資訊在系統中隨時間變化的過程。它利用 UI 元件、命令、事件和處理器，以泳道形式組織，以視覺化方式呈現系統行為。VPasCode 支援緊湊與放鬆語法、內聯資料以及外部資料區塊。
最小範例 – 購物車新增項目流程
此範例展示使用時間區段（tf）標記新增項目至購物車的基本流程。
eventmodeling
tf 01 ui 購物車介面
tf 02 cmd 新增項目
tf 03 evt 項目已新增
內聯資料範例
您可以在命令或事件定義中直接包含資料結構。
事件模型
tf 01 ui CartUI
tf 02 cmd AddItem { 描述: 字串 }
tf 03 evt ItemAdded { 描述: 字串 }
資料區塊與多重參考
對於更複雜的場景，您可以分別定義資料區塊，並使用雙括號來參考它們[[ ]].
事件模型
tf 01 ui CartUI
tf 02 cmd AddItem [[AddItem01]]
tf 03 evt ItemAdded [[ItemAdded]]
data AddItem01 {
描述: 'john'
圖像: 'avatar_john'
價格: 20.4
}
data AddItem02 {
描述: 'jack'
圖像: 'avatar_jack'
價格: 12.5
}
data ItemAdded {
描述: 字串
圖像: 字串
價格: 數字
}
重設框架
使用 rf (重設框架) 來表示外部事件或狀態重置，並使用命名空間來建立獨立的泳道。
事件模型
tf 01 ui CartUI
tf 02 cmd AddItem
tf 03 evt ItemAdded
rf 04 evt External.InventoryChanged
tf 05 pcr InventoryProcessor
tf 06 cmd ChangeInventory
tf 07 evt Cart.InventoryChanged
關鍵標記：
tf(時間框架)，rf(重設框架)，ui / cmd / evt / pcr / rmo(實體類型)。使用命名空間如庫存.庫存已變更用於建立獨立的泳道。
3. 文氏圖 – 集合關係與交集
文氏圖對於可視化集合之間的邏輯關係至關重要，例如團隊技能、市場重疊或功能交集。VPasCode 支援自訂大小、標籤、文字節點與樣式設定。
基本範例 – 團隊重疊
這個簡單範例展示了前端與後端團隊之間的重疊情況。
venn-beta
title "團隊技能重疊"
set Frontend
set Backend
union Frontend,Backend["API 設計"]
大小、文字節點與樣式範例
您可以使用 :number來控制圓形大小，使用 text來新增內部標籤，並使用 style.
venn-beta
set A["前端團隊"]:20
text A1["React"]
text A2["設計系統"]
set B["後端團隊"]:12
text B1["API 開發"]
union A,B["全棧技能"]:3
text AB1["OpenAPI 規格"]
style A fill:#ff6b6b
style A,B color:#2c3e50
style A1 color:#e74c3c
4. 瓦德利地圖 – 战略價值鏈映射
瓦德利地圖是戰略工具，可幫助您可視化商業或系統的組成部分、它們在價值鏈中的位置，以及其演進階段（從創生到商品化）。VPasCode 完全支援使用 wardley-beta.
範例 – 軟體開發流程
此地圖展示了軟體部署流程的演進，從手動流程到自動化的雲端基礎架構。
wardley-beta
title 軟體部署流程
anchor "使用者需求" [0.95, 0.70]
component "手動部署" [0.15, 0.25]
component "CI/CD 指令碼" [0.45, 0.50]
component "自動化流程" [0.75, 0.65]
component "雲端基礎架構" [0.30, 0.40]
"使用者需求" -> "自動化流程"
"自動化流程" -> "CI/CD 指令碼"
"CI/CD 指令碼" -> "手動部署"
"手動部署" -> "雲端基礎架構"
evolve "手動部署" 0.20
evolve "CI/CD 指令碼" 0.55
evolve "自動化流程" 0.85
evolve "雲端基礎架構" 0.70
note "雲端採用加速流程成熟度" [0.40, 0.35]
注意： 包含空格的元件名稱必須以雙引號包覆。座標軸範圍皆為 0 到 1（可見性對應演進程度）。
立即試用 VPasCode
準備好開始創作了嗎？前往 VPasCode 編輯器位於 https://www.vpascode.com/。選擇美人魚語法模式，貼上上述任一程式碼範例，即可立即觀看您的圖表渲染完成。
立即免費開始 – 無需信用卡，無需安裝。您只需要一個瀏覽器。無論您是產品經理、開發人員或策略師，VPasCode 都能提供您所需的工具，以清晰且精確的方式傳達複雜的觀點。
結論
將石川圖、事件模型、維恩圖與沃德利圖新增至 VPasCode 的美人魚支援，標誌著圖表即程式碼功能的重大進步。這些工具賦予使用者應對各種視覺溝通挑戰的能力，從根本原因分析到戰略規劃，皆可在統一的純文字環境中完成。透過運用這些新的圖表類型，您能簡化工作流程、提升協作效率，並輕鬆創建專業級的視覺圖表。隨著 VPasCode 持續演進，它始終致力於為開發人員、架構師與產品經理提供目前最為多元且使用者友善的圖表繪製平台。
參考文獻
-
由 Visual Paradigm 提供的 VPasCode 完整指南：詳細介紹 VPasCode 功能，包含語法處理與人工智慧整合。
-
介紹 VPasCode：終極整合式文字轉圖表平台：官方發行說明，介紹 VPasCode 及其核心功能。
-
設計帶來清晰：透過 VPasCode 與 Graphviz 簡化基礎架構文件：使用 VPasCode 搭配 Graphviz 支援進行基礎架構文件撰寫的指南。
-
精通 VPasCode：具備多引擎支援的人工智慧驅動圖表即程式碼終極指南：深入指南，涵蓋 VPasCode 中的人工智慧功能與多引擎支援。
-
Visual Paradigm 人工智慧聊天機器人與 VPasCode 如何作為整合式圖表生態系統運作：深入解析 VPasCode 與 Visual Paradigm 人工智慧聊天機器人之間的整合。
-
VPasCode 功能概覽：VPasCode 提供的關鍵功能摘要。
-
透過 VPasCode 新的人工智慧圖表翻譯功能，原生打破語言障礙: 關於AI驅動的圖示翻譯功能的更新說明。
-
案例研究：利用VPasCode加速軟體架構文件編寫——圖示即程式碼的革命: 一個真實世界的案例研究，展示VPasCode對軟體架構文件編寫的影響。