VPasCode 新增 Mermaid 石川圖、事件建模、維恩圖與 Wardley 圖

🚀 Visual Paradigm 非常高興地宣布 VPasCode – 我們統一的圖示程式碼平台 – 現在支援四種額外的Mermaid圖示類型。您現在可以使用簡單的文字語法建立以下專業圖示：

🐟 石川圖（魚骨圖／因果圖） – 讓根本原因分析變得輕鬆
⚡ 事件建模圖 – 設計系統資訊流程與時間軸
🟡 維恩圖 – 可視化集合關係與交集
🗺️ 沃德利地圖 – 战略價值鏈地圖與演進分析

無論您是產品經理、軟體架構師、開發人員或策略師，VPasCode 都能幫助您使用您已熟悉的語法建立圖示，搭配即時預覽、一鍵分享URL，以及免費的SVG/PNG匯出.

🔍 什麼讓VPasCode与众不同？

VPasCode（簡稱為V視覺P的asCode平台）是一個統一的文本轉圖示環境。它可呈現PlantUML、Mermaid、Graphviz，以及更多（更多格式即將推出）。您可以在同一編輯器中自由切換語法，無需學習多個工具。

此增強功能專注於 Mermaid 的最新語法（v11.12.3+ 和 v11.15.0+）。以下是每種新圖表類型的可運行代碼範例——只需複製並貼入 VPasCode 即可。

📌 1. 石川圖（魚骨圖）——根本原因分析

又稱為因果圖或魚骨圖，非常適合品質管理與問題解決會議。

✅ 範例 – 「模糊照片」根本原因分析

Mermaid

在 VPasCode 中編輯 Mermaid

Mermaid Edit Mermaid in VPasCode

ishikawa-beta
    模糊照片
    流程
        焦點失準
        快門速度太慢
        保護膜未移除
        應用美化濾鏡
    使用者
        手抖
    設備
        鏡頭
            鏡頭不適合
            鏡頭損壞
            鏡頭髒
        感應器
            感應器損壞
            感應器髒
    環境
        物體移動太快
        太暗

Edit Mermaid in VPasCode

在 VPasCode 中編輯 Mermaid

💡 語法提示：第一行定義問題（魚的「頭」）。縮排用來建立層級化的因果分支（魚骨）。

📌 2. 事件建模圖——系統隨時間的行為

事件建模描述資訊在系統中隨時間的變化方式。它使用 UI、命令、事件和處理器，並以泳道形式組織。VPasCode 支援緊湊與放鬆語法、內聯資料以及外部資料區塊。

✅ 最小範例 – 購物車新增項目流程

Mermaid

在 VPasCode 中編輯 Mermaid

Mermaid Edit Mermaid in VPasCode

eventmodeling

tf 01 ui CartUI
tf 02 cmd AddItem
tf 03 evt ItemAdded

Edit Mermaid in VPasCode

在 VPasCode 中編輯 Mermaid

✅ 內聯資料範例

Mermaid

在 VPasCode 中編輯 Mermaid

Mermaid Edit Mermaid in VPasCode

eventmodeling

tf 01 ui CartUI
tf 02 cmd AddItem { description: string }
tf 03 evt ItemAdded { description: string }

Edit Mermaid in VPasCode

在 VPasCode 中編輯 Mermaid

✅ 資料區塊與多重引用

Mermaid

在 VPasCode 中編輯 Mermaid

Mermaid Edit Mermaid in VPasCode

eventmodeling

tf 01 ui CartUI
tf 02 cmd AddItem [[AddItem01]]
tf 03 evt ItemAdded [[ItemAdded]]
tf 04 cmd AddItem [[AddItem02]]
tf 05 evt ItemAdded [[ItemAdded]]

data AddItem01 {
  description: 'john'
  image: 'avatar_john'
  price: 20.4
}

data AddItem02 {
  description: 'jack'
  image: 'avatar_jack'
  price: 12.5
}

data ItemAdded {
  description: string
  image: string
  price: number
}

Edit Mermaid in VPasCode

在 VPasCode 中編輯 Mermaid

✅ 重置畫框

Mermaid

在 VPasCode 中編輯 Mermaid

Mermaid Edit Mermaid in VPasCode

事件模型

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

Edit Mermaid in VPasCode

在 VPasCode 中編輯 Mermaid

💡 關鍵標記：tf（時間框架），rf（重置框架），ui / cmd / evt / pcr / rmo（實體類型）。使用命名空間如Inventory.InventoryChanged來建立獨立的泳道。

📌 3. 維恩圖 – 集合關係與交集

使用重疊的圓形展示集合之間的邏輯關係。支援自訂大小、標籤、文字節點與樣式。

✅ 基本範例 – 團隊重疊

Mermaid

在 VPasCode 中編輯 Mermaid

Mermaid Edit Mermaid in VPasCode

venn-beta
  title "團隊技能重疊"
  set Frontend
  set Backend
  union Frontend,Backend["API 設計"]

Edit Mermaid in VPasCode

在 VPasCode 中編輯 Mermaid

✅ 大小、文字節點與樣式範例

Mermaid

在 VPasCode 中編輯 Mermaid

Mermaid Edit Mermaid in VPasCode

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

Edit Mermaid in VPasCode

在 VPasCode 中編輯 Mermaid

💡 使用:number來控制圓形大小，text來在集合內新增標籤，以及style 用於自訂顏色。

📌 4. Wardley 圖 – 战略價值鏈映射

Wardley 圖可幫助您可視化商業或系統的各個組件、它們在價值鏈中的位置，以及其演進階段（創生 → 定製建造 → 產品 → 商品）。VPasCode 完全支援官方 Mermaid Wardley 語法，使用wardley-beta 作為圖表類型。

✅ 範例 – 軟體開發流水線

Mermaid

在 VPasCode 中編輯 Mermaid

Mermaid Edit Mermaid in VPasCode

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]

Edit Mermaid in VPasCode

在 VPasCode 中編輯 Mermaid

💡 包含空格的組件名稱必須用雙引號包起來。座標軸範圍皆為 0 到 1（可見性對應演進程度）。

🛠️ 立即試用 VPasCode

前往VPasCode 編輯器：https://www.vpascode.com/.

選擇 Mermaid 語法模式，貼上上述任一程式碼範例，即可立即觀看您的圖表渲染完成。

立即免費開始 – 無需信用卡，無需安裝。您只需一個瀏覽器即可使用。

📖 官方文件與參考資料

Visual Paradigm 官方網站

Visual Paradigm – 專業建模，簡化呈現。
VPasCode 是為重視效率、協作與文字式繪圖的團隊所設計的圖表即程式平台。