技能说明
适合网页产品架构、用户流程、数据关系和方案讲解；支持 39 种图表类型、品牌风格提取、对比度检查和 SVG 可访问性。静态输出是默认方式，首次使用可能要求确认样式；提取品牌时请注意公开页面和资料边界。
关于此技能
把架构、流程、数据关系和产品逻辑做成有品牌感的自包含 HTML/SVG 图表，支持从网站提取视觉风格。
核心能力
39 种图表类型
覆盖架构、流程、时序、状态机、ER 模型、时间线、用户旅程、依赖图、数据流和数据库结构等场景。
编辑式视觉规范
使用清晰层级、有限强调色、直角连接和可读字体，避免阴影、无意义圆角框和 Mermaid 默认布局。
品牌与可访问性
可从网站提取颜色和字体，检查对比度，并为内嵌 SVG 添加可访问名称与描述。
适用场景
网页产品架构图
把系统组件、接口、服务边界和数据流做成可以放入产品页或方案文档的图表。
用户流程与产品方案
用用户旅程、流程图、泳道或故事地图解释页面流程、角色分工和版本范围。
研究与数据表达
将数据模型、依赖关系、风险、决策逻辑和比较结果整理为静态可分享图表。
使用步骤
- 01
第一步：确定图表类型
先判断图表是否真的比文字或表格更清楚，再选择类型、尺寸和需要表达的关系。
- 02
第二步：确认视觉方向
首次使用时检查样式配置；需要品牌化时先从网站、设计系统或手动令牌提取并确认颜色与字体。
- 03
第三步：生成并检查
绘制自包含 HTML/SVG，检查连线、标签间距、移动端可读性、对比度和可访问性后再交付。
常见问题
它能直接生成网页界面吗？+
它主要生成架构图、流程图和数据图表，不是网页 UI 生成器；网页界面可配合前端设计技能使用。
会默认使用动态效果吗？+
不会。静态 HTML 是默认输出，只有确实有助于解释顺序变化时才启用动效。
运行时要注意什么？+
首次使用会检查品牌样式并可能要求确认；从网站提取品牌时会读取公开页面，敏感地址或资料不要直接提供。安装后可自定义样式，但更新可能覆盖直接修改的工作文件。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Claude Code · Codex · Pi
已提供来源链接
命令可直接复制
2026/09/01
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
codex plugin marketplace add cathrynlavery/diagram-design && codex plugin add diagram-design@diagram-design