name: diagram-patterns description: 决策指导用于选择正确的图表类型和工具。提供常见可视化场景的模式、工具比较和最佳实践。 allowed-tools: 读取, 全局查找, 查找, 技能, 询问用户问题
图表选择与模式
交互式图表选择
使用询问用户问题来理解需求并推荐最佳的图表类型和工具：
# 问题1：主要目的（MCP：CLI最佳实践 - 范围选择）
question: "你想要可视化什么？"
header: "目的"
options:
- label: "系统架构（推荐）"
description: "组件、服务、容器、部署"
- label: "过程/工作流"
description: "步骤、决策、活动、状态转换"
- label: "数据结构"
description: "类、实体、关系、模式"
- label: "交互"
description: "调用序列、消息、API流"
# 问题2：工具约束（MCP：CLI最佳实践 - 输出格式）
question: "您有工具或平台约束吗？"
header: "工具"
options:
- label: "GitHub/GitLab Markdown（推荐）"
description: "使用Mermaid - 原生渲染，无需设置"
- label: "最大定制"
description: "使用PlantUML - 更多样式、精灵、图标"
- label: "企业架构"
description: "使用PlantUML - C4, ArchiMate支持"
- label: "无偏好"
description: "我会根据图表类型推荐"
使用这些响应来应用决策树并推荐合适的图表类型和工具。
概述
此技能帮助您为可视化需求选择正确的图表类型和工具。当您需要决定时使用此技能：
- 哪种图表类型 最能代表您的信息
- 哪种工具（Mermaid或PlantUML）使用
- 如何结构 图表以保持清晰
图表类型决策树
开始
|
+-- 随时间交互？ --> 序列图
|
+-- 对象/类结构？ --> 类图
|
+-- 数据库模式？ --> ER图
|
+-- 状态转换？ --> 状态图
|
+-- 过程/工作流？ --> 流程图或活动图
|
+-- 系统架构？
| |
| +-- 高级上下文？ --> C4上下文图
| +-- 容器/服务？ --> C4容器图或组件图
| +-- 基础设施？ --> 部署图
|
+-- 项目时间线？ --> 甘特图
|
+-- Git分支？ --> Git图（仅Mermaid）
|
+-- 层次化想法？ --> 思维导图（仅PlantUML）
|
+-- 数据结构？ --> JSON图（仅PlantUML）
工具选择指南
快速决策矩阵
| 需求 | 推荐工具 | 原因 |
|---|---|---|
| GitHub/GitLab渲染 | Mermaid | 原生支持 |
| 复杂C4模型 | PlantUML | 成熟，更好渲染 |
| 简单序列/类图 | Mermaid | 语法更简单 |
| 思维导图 | PlantUML | 仅选项 |
| JSON可视化 | PlantUML | 仅选项 |
| GitGraph | Mermaid | 仅选项 |
| ER图 | Mermaid | 默认渲染更好 |
| 状态图 | Mermaid | 输出更清晰 |
| 最大定制 | PlantUML | 更多样式选项 |
| 零设置 | Mermaid | 基于浏览器 |
| 企业架构 | PlantUML | 更好的ArchiMate，C4 |
详细比较
| 功能 | Mermaid | PlantUML |
|---|---|---|
| 设置 | 无（浏览器） | Java + GraphViz |
| Markdown集成 | 原生（GitHub，GitLab） | 需要图像嵌入 |
| 学习曲线 | 温和 | 更陡峭 |
| 定制 | 有限 | 广泛 |
| C4支持 | 实验性 | 成熟 |
| 图表类型 | ~10 | 15+ |
| JSON/思维导图 | 否 | 是 |
| GitGraph | 是 | 否 |
何时选择Mermaid
- 文档位于GitHub/GitLab仓库中
- 快速图表，无需设置
- 技术背景不同的团队
- 简单到中等复杂度的图表
何时选择PlantUML
- 复杂企业架构（C4，ArchiMate）
- 对外观的最大控制
- 专业化图表（思维导图，JSON，WBS）
- 需要精灵/图标
快速参考：选择图表类型
| 问题 | 如果是，使用 |
|---|---|
| 显示系统间消息流？ | 序列图 |
| 建模OOP类和关系？ | 类图 |
| 文档数据库表？ | ER图 |
| 显示有效状态转换？ | 状态图 |
| 描述过程或算法？ | 流程图 |
| 高级系统概述？ | C4上下文图 |
| 服务/容器架构？ | C4容器图 |
| 时间线或日程？ | 甘特图 |
| Git分支策略？ | Git图 |
| 头脑风暴层次？ | 思维导图 |
参考
详细模式和示例，请参阅：
| 参考 | 内容 | 何时加载 |
|---|---|---|
| sequence-class-patterns.md | API流、认证、异步、域模型、存储库 | 创建序列/类图时 |
| er-state-flow-patterns.md | 博客/电商模式、订单生命周期、决策树 | 创建ER/状态/流程图时 |
| c4-patterns.md | C4上下文/容器、工具推荐 | 创建架构图时 |
| best-practices.md | 通用指南、图表技巧、反模式 | 提高图表质量时 |
委托
详细语法参考：
- Mermaid语法：调用
visualization:mermaid-syntax技能 - PlantUML语法：调用
visualization:plantuml-syntax技能
测试场景
场景1：选择图表类型
查询： “我应该使用什么图表来显示API请求流？”
预期： 技能激活，推荐序列图，提供工具比较
场景2：工具选择
查询： “对于C4图，我应该使用Mermaid还是PlantUML？”
预期： 技能激活，推荐PlantUML用于复杂C4，Mermaid用于简单上下文
场景3：模式查找
查询： “给我一个认证序列图模式”
预期： 技能激活，指向sequence-class-patterns.md参考
最后更新： 2025-12-28
版本历史
- v1.1.0 (2025-12-28)：重构为渐进式披露 - 提取模式到references/
- v1.0.0 (2025-12-26)：初始发布