视觉沟通是高效产品管理、软件架构和战略规划的基石。多年来，制作专业图表需要掌握复杂的图形用户界面，或学习不同工具各自不同的语法。VPasCode，Visual Paradigm 的统一图表代码平台，通过允许您使用简单的文本符号创建惊艳的视觉效果，改变了这一范式。
最近，VPasCode 扩展了对 Mermaid的支持，Mermaid 是最受欢迎的文本转图表语言之一，新增了四种强大的图表类型： 石川图（鱼骨图）, 事件建模, 维恩图，以及 沃德利地图无论您是在进行根本原因分析、映射系统行为、可视化集合关系，还是规划价值链条，这些新增功能都能让您立即把想法转化为视觉图表。
本指南将带您逐一了解这些新的图表类型，提供清晰的示例和语法说明，帮助您立即上手。
VPasCode 有何特别之处？
VPasCode（全称为 V视觉 PParadigm 的 asCode 平台）是一个 统一的文本转图表环境。它支持渲染 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
标题 "团队技能重叠"
集合 前端
集合 后端
并集 前端,后端["API 设计"]
大小、文本节点与样式示例
您可以使用 :number来控制圆的大小，使用 text添加内部标签，使用 style.
venn-beta
集合 A["前端团队"]:20
文本 A1["React"]
文本 A2["设计系统"]
集合 B["后端团队"]:12
文本 B1["API 开发"]
并集 A,B["全栈技能"]:3
文本 AB1["OpenAPI 规范"]
样式 A 填充:#ff6b6b
样式 A,B 颜色:#2c3e50
样式 A1 颜色:#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：AI 驱动的图表即代码终极指南，支持多引擎：深入指南，涵盖 VPasCode 中的人工智能功能和多引擎支持。
-
Visual Paradigm AI 聊天机器人与 VPasCode 如何作为集成生态系统用于绘图：关于 VPasCode 与 Visual Paradigm AI 聊天机器人集成的深入见解。
-
VPasCode 功能概览：VPasCode 提供的关键功能摘要。
-
通过 VPasCode 新增的 AI 图表翻译功能，原生打破语言障碍: 关于AI驱动的图表翻译功能的发布说明。
-
案例研究：通过VPasCode加速软件架构文档编制——一场图表即代码的革命: 一个真实世界的案例研究，展示了VPasCode对软件架构文档编制的影响。