应用工具Agent Skill
Diagram Design：为编码智能体生成编辑级品质的 HTML/SVG 图表技能
cathrynlavery/diagram-design · 38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.
ELI5：它是什么，解决什么问题
Diagram Design 是一个面向 Claude Code、Codex、Factory Droid、Pi 以及兼容 Agent Skills 宿主的图表技能包，提供 39 种编辑风格图表类型，输出为自包含的 HTML + SVG，无需构建步骤、JavaScript 或外部图片依赖。它提供 minimal light、minimal dark、full-editorial 三种静态变体，并可用语义模式描述行为，还支持将 draw.io、Mermaid 或 Excalidraw 源图按指定格式、尺寸和细节层级重绘。
核心能力与快速开始
★ 39168 · HTML
- 能做什么
- 提供 39 种编辑风格图表类型，覆盖架构图、流程图、时序图、状态机、ER 图、时间线、泳道图、象限图、雷达图、飞轮、嵌套图、树图、组织架构图、层叠图、维恩图、金字塔/漏斗、柱状图、树状图、折线图、甘特图、散点图、High-Level、Process、Medallion、数据流、DP integration、DP security matrix、Sankey、鱼骨图、Wardley map、看板、用户旅程、部署图、依赖图、UML 类图、故事地图、数据库 schema、极坐标图、瀑布图。所有类型提供 minimal light、minimal dark、full-editorial 三种静态变体，输出自包含 HTML + SVG，无构建步骤、JavaScript 或外部图片依赖。通过语义模式将行为与布局分离，可用最接近的现有类型表达队列、策略链路或信任边界。可选动效用于有序说明，静态输出仍为默认。可读取网站以匹配品牌。可将 draw.io、Mermaid、Excalidraw 源图按指定格式、尺寸和细节层级重绘。
- 适用场景
- 在 Claude Code、Codex、GitHub Copilot、Factory Droid、Pi 等支持 Agent Skills 的宿主机中，通过自然语言请求生成与品牌一致的编辑级图表；用于文档、架构说明、流程梳理、数据可视化、用户旅程、项目排期等场景；将已有的 Mermaid、draw.io 或 Excalidraw 图表重绘为指定风格。
- 项目形态
- 可直接使用的工具
- 部署方式
- 作为 Agent Skills 插件或技能安装，支持 Claude Code、Codex、GitHub Copilot、Factory Droid、Pi、Kiro、OpenCode 等宿主；也可将技能目录复制或符号链接到本地技能目录。未说明运行所需的硬件或托管环境。
- 主要依赖
- 未说明除受支持宿主机以外的具体运行环境要求。
- 使用限制
- README 未说明明确限制；已知输出为静态 HTML + SVG，动效为可选项而非默认。文档中未说明 API 成本或商业使用条款，license 为 MIT。
- 许可证
- MIT
- 最近推送
- 2026-09-11 06:33
资料检查：2026-09-14 07:00 · 卡片整理：2026-09-14 07:00
卡片由 AI 根据仓库资料整理，未进行安装或运行验证 · 本次更新未完成，保留上次成功内容
职业应用
程序员
程序员在编写技术文档或设计说明时，可使用该技能生成架构图、流程图、时序图、状态机、ER 图、UML 类图、依赖图、数据库模式图等编辑级 HTML/SVG 图表，并可将 draw.io、Mermaid 或 Excalidraw 源图按指定格式、尺寸和细节层级重绘。
查看内容依据
39 editorial diagram types for Claude Code, Codex, Factory Droid, Pi, and Agent Skills-compatible hosts. Self-contained HTML + SVG. No shadows. No Mermaid slop. Semantic patterns describe behavior separately from layout, so a queue, policy trace, or trust boundary can use the nearest existing type without expanding the type count. Static HTML remains the default; optional motion is available for ordered explanations. The skill also redraws draw.io, Mermaid, or Excalidraw sources at a chosen format, size, and detail level.
由 AI 根据来源材料整理，未进行安装或运行验证
产品经理
产品经理在需求分析、原型设计或数据分析中，可使用该技能生成用户旅程图、故事地图、看板、甘特图、象限图、金字塔/漏斗图、桑基图、鱼骨图、Wardley 地图等编辑级 HTML/SVG 图表，用于展示用户行为、发布切片、工作进度、任务排期、优先级定位、转化流失、数量分流、因果分析和价值链演化。
查看内容依据
39 editorial diagram types for Claude Code, Codex, Factory Droid, Pi, and Agent Skills-compatible hosts. Self-contained HTML + SVG. No shadows. No Mermaid slop. Semantic patterns describe behavior separately from layout, so a queue, policy trace, or trust boundary can use the nearest existing type without expanding the type count. Static HTML remains the default; optional motion is available for ordered explanations. The skill also redraws draw.io, Mermaid, or Excalidraw sources at a chosen format, size, and detail level.
由 AI 根据来源材料整理，未进行安装或运行验证
讨论 0
登录后参与讨论，阅读资讯无需注册。
还没有评论，来分享第一个看法。