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 块中引用它们。引用一个未明确创建的标识符将导致构建失败。
  • 注意并集中的逗号： 在构建 并集 多个集合时，确保标识符之间用逗号分隔，但在方括号标签前不要有尾随逗号。union A, B, C ["标签"] 是正确的。
  • 测试版稳定性： 由于这种布局样式使用了 venn-beta 标志，高级元素自定义样式规则可能在不同版本间发生变化。建议为 填充 和 描边 变量使用基本的十六进制颜色代码，以获得最大的跨兼容性。
滚动至顶部