VPasCode 新增 Mermaid 伊什克awa、事件建模、维恩图及 Wardley 图

🚀 Visual Paradigm 很高兴宣布 VPasCode – 我们的统一图表即代码平台 – 现在支持四种额外的 Mermaid 图表类型。您现在可以使用简单的文本语法创建以下专业图表：

🐟 石川图（鱼骨图 / 因果图） – 使根本原因分析变得简单
⚡ 事件建模图 – 设计系统信息流和时间线
🟡 维恩图 – 可视化集合关系与交集
🗺️ 沃德利地图 – 战略价值链映射与演进分析

无论您是产品经理、软件架构师、开发者还是战略家，VPasCode 都能帮助您使用您已熟悉的语法创建图表，配合实时预览、一键分享 URL 链接，以及免费导出 SVG/PNG 格式.

🔍 什么是 VPasCode 的独特之处？

VPasCode（简称 V视觉 P Paradigm 的 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 购物车UI
tf 02 cmd 添加物品
tf 03 evt 物品已添加

Edit Mermaid in VPasCode

在 VPasCode 中编辑 Mermaid

✅ 内联数据示例

Mermaid

在 VPasCode 中编辑 Mermaid

Mermaid Edit Mermaid in VPasCode

eventmodeling

tf 01 ui 购物车UI
tf 02 cmd 添加物品 { 描述: 字符串 }
tf 03 evt 物品已添加 { 描述: 字符串 }

Edit Mermaid in VPasCode

在 VPasCode 中编辑 Mermaid

✅ 数据块与多重引用

Mermaid

在 VPasCode 中编辑 Mermaid

Mermaid Edit Mermaid in VPasCode

eventmodeling

tf 01 ui 购物车UI
tf 02 cmd 添加物品 [[AddItem01]]
tf 03 evt 物品已添加 [[ItemAdded]]
tf 04 cmd 添加物品 [[AddItem02]]
tf 05 evt 物品已添加 [[ItemAdded]]

data AddItem01 {
  描述: 'john'
  图像: 'avatar_john'
  价格: 20.4
}

data AddItem02 {
  描述: 'jack'
  图像: 'avatar_jack'
  价格: 12.5
}

data ItemAdded {
  描述: 字符串
  图像: 字符串
  价格: 数字
}

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（可见性 vs. 演化）。

🛠️ 立即试用 VPasCode

前往VPasCode 编辑器：https://www.vpascode.com/.

选择 Mermaid 语法模式，粘贴上方任意代码示例，即可立即看到图表渲染效果。

立即免费开始 – 无需信用卡，无需安装。您只需一个浏览器即可使用。

📖 官方文档与参考

Visual Paradigm 官方网站

Visual Paradigm – 专业建模，简单易用。
VPasCode 是为重视效率、协作和基于文本的绘图方式的团队打造的代码化绘图平台。