cathrynlavery/diagram-design

这是什么？

核心功能

• 01生成单个自包含的 HTML 文件，内含内联 SVG，可在任意浏览器中打开。
• 02支持 45 种图表类型，包括架构图、时序图、流程图、ER 图、甘特图和各类统计图。
• 03可从网站提取配色与字体，并应用到所有图表。
• 04可将已有的 draw.io、Mermaid 和 Excalidraw 文件重绘为统一风格。
• 05支持导出 SVG 或 PNG，并可选择不依赖网络字体的离线模式。

适用场景

• 为技术博客或文档页面制作架构图、时序图。
• 将 Mermaid 或 draw.io 图表转换为适合幻灯片的精致视觉稿。
• 在项目中让所有图表与公司网站的品牌风格保持一致。
• 为演示制作象限图、韦恩图或时间线图形。

快速上手

1. 1

   使用 skills CLI 安装该技能

   npx skills add cathrynlavery/diagram-design
2. 2

   在 Claude Code 中添加插件市场（可选）

   /plugin marketplace add cathrynlavery/diagram-design
3. 3

   在 Claude Code 中安装插件（可选）

   /plugin install diagram-design@diagram-design
4. 4

   用自然语言向代理描述所需图表；它会生成一个可在浏览器中打开的 .html 文件

使用前须知

• !输出质量取决于所用模型，同一提示词每次生成的布局可能不同。
• !输出不是可编辑的源格式，无法像文本那样做差异对比，也不能直接在画布上拖动编辑。
• !如果通过托管安装自定义风格指南，包更新可能会覆盖你的修改。

标签

常见问题

diagram-design 是什么？

一个智能体技能，可将图表生成为单个自包含的 HTML + SVG 文件，支持 45 种图表类型和品牌配色匹配。 Diagram Design 是一个面向 Claude Code、Codex、GitHub Copilot、Cursor 和 Pi 等编码智能体的技能。用户用自然语言描述图表需求，智能体从 45 种图表类型中选择合适的类型，生成一个包含内联 SVG 的 HTML 文件，双击即可在浏览器中打开，无需构建步骤或 JavaScript。

diagram-design 可以免费使用吗？用的什么许可证？

diagram-design 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

diagram-design 还在维护吗？

活跃维护中。diagram-design 最近一次提交是在 2026年10月16日。

diagram-design 适合用来做什么？

为技术博客或文档页面制作架构图、时序图。 将 Mermaid 或 draw.io 图表转换为适合幻灯片的精致视觉稿。 在项目中让所有图表与公司网站的品牌风格保持一致。 为演示制作象限图、韦恩图或时间线图形。

diagram-design 怎么安装和运行？

使用 skills CLI 安装该技能: npx skills add cathrynlavery/diagram-design 在 Claude Code 中添加插件市场（可选）: /plugin marketplace add cathrynlavery/diagram-design 在 Claude Code 中安装插件（可选）: /plugin install diagram-design@diagram-design 用自然语言向代理描述所需图表；它会生成一个可在浏览器中打开的 .html 文件

在哪里获取 diagram-design？

源代码和安装说明在 GitHub 上：https://github.com/cathrynlavery/diagram-design