前言¶
在文档、评审和协作里，架构图和流程图往往比长段文字更有效，但难点通常不在「会不会画」，而在从需求到成图的路径不统一：该用时序图还是状态机、节点和边怎么命名、布局是否合理、最后能不能直接导出 Mermaid 或 SVG。让模型随手画一张，经常出现类型选错、关系含糊或无法复用的问题。
下面介绍 SkillHub 上的 Diagram Workflow Method（@efficient-technology/diagram-workflow-method）。它把「理解需求 → 选图类型 → 抽实体与关系 → 布局 → 输出」写成一套可重复的方法，适合挂在 Cursor、Claude Code 等支持 SKILL.md 的 Agent 上使用。
这是什么¶
Diagram Workflow Method 是一套架构图与流程图绘制方法类 Skill，坐标为 @efficient-technology/diagram-workflow-method，当前版本 1.0.1，来源标注为 enterprise，分类为 design-media，由 效享网络 发布。页面说明其不绑定特定业务领域，目标是让任意系统、流程或数据结构都能被表达为结构化图表。
Skill 在 SkillHub 上标注 requires_api_key=false，安装与使用不依赖额外 API Key。
核心功能¶
根据官方简介，该 Skill 覆盖的能力可以概括为以下几块（均以 SkillHub 页面描述为准）：
- 图表类型：支持将内容可视化为架构图、流程图、时序图、状态机、ER 图、拓扑图等；简介中明确提到 8 种图表类型，且每种配有组件清单与 1 个完整实战范本。
- 流程阶段：从需求理解、图表类型判定、实体提取、关系编码、布局计算，到 SVG / Mermaid 输出，形成端到端工作流。
- 通用性：强调通用方法，不限定某一行业或技术栈。
SkillHub 列表页显示的互动数据（以抓取时页面为准）：评分 100000，下载 752 次。若你本地 SkillHub 客户端与网页统计不一致，以你访问 SkillHub 技能页 时的展示为准。
安装与启用¶
该 Skill 基于通用 SKILL.md 格式。官方推荐的安装方式有两类：用 SkillHub CLI 安装，或把安装提示交给当前 Agent 按文档执行。
1、安装 SkillHub CLI（若尚未安装）¶
先检查是否已安装 CLI：
command -v skillhub && skillhub --version
未安装时，可按 SkillHub 安装文档 执行完整安装（文档中的推荐命令）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
仅需要 CLI 时：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
2、安装本 Skill 到当前 Agent 的 skills 目录¶
安装技能时必须用 --dir 指向当前 Agent 识别的 skills 目录，否则默认会装到 ./skills/，Agent 可能无法加载。文档中给出的常见路径示例：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/
安装命令示例（将 <skills 目录> 换成你的环境路径）：
skillhub install @efficient-technology/diagram-workflow-method --dir <skills 目录>
也可在对话中让 Agent 按官方提示安装（SkillHub 技能页原文）：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@efficient-technology/diagram-workflow-method`。
安装后按你所用客户端的要求重启或刷新技能列表，使 SKILL 生效。
典型用法¶
官方页面未单独给出逐条 CLI 示例外，典型用法是：在已启用该 Skill 的 Agent 对话中，用自然语言描述待可视化的系统或流程，并明确要求走 Skill 中的工作流与输出格式。下面是一种可复现的提问结构，便于模型按「类型判定 → 实体与关系 → 布局 → Mermaid/SVG」推进，而不编造 Skill 内部未公开的脚本名：
请使用 Diagram Workflow Method（@efficient-technology/diagram-workflow-method）：
1. 根据下面描述判定应使用的图表类型（在 8 种支持类型中选择并说明理由）；
2. 列出实体、关系与组件清单；
3. 给出布局说明后，输出 Mermaid 源码；如需矢量图，再给出 SVG。
【在此粘贴：系统边界、主要组件、调用顺序或状态变化等待画图材料】
若你只需要某一类图（例如时序图或 ER 图），在材料中写明约束即可，Skill 简介中已声明对多种图表类型的覆盖。
适用场景与注意¶
适合谁
- 需要在 PR、设计文档或 Wiki 中稳定产出架构图、流程图、时序图等，并希望类型与符号一致的团队。
- 希望由 Agent 完成「从文字需求到 Mermaid/SVG」的中间步骤，而不是每次临时发挥提示词的人。
使用注意
- 成图质量仍取决于你提供的边界、组件名与关系是否清楚；Skill 提供的是方法与范本，不能替代不完整的需求描述。
- 安装路径必须对齐当前 Agent 的 skills 目录，否则会出现「已安装但未加载」的情况。
- 企业来源（enterprise）Skill 的更新与分发以 SkillHub 为准，版本号以页面显示的 v1.0.1 及后续更新为准。
结尾¶
Diagram Workflow Method 把画图从一次性提示变成可重复的工作流：先判类型，再抽实体与关系，最后落到 Mermaid 或 SVG。若你要在 Agent 里系统性地做架构与流程可视化，可从 SkillHub 安装 @efficient-technology/diagram-workflow-method。
