【diagram-design】告别丑陋的 AI 默认配图：一键生成专业级品牌专属技术图表

作者提米哥

这是一款专为 AI 编程助手（如 Claude Code、Codex 和 Pi）打造的智能体技能插件，旨在解决 AI 生成图表千篇一律、缺乏设计感的问题，帮助开发者一键生成符合自身品牌风格的专业级编辑图表。

主要功能与特性

  • 丰富的图表类型：内置 27 种图表模板（涵盖架构图、流程图、时序图、状态机、甘特图等），每种均提供极简亮色、极简暗色和完整编辑级三种视觉变体。
  • 60秒品牌克隆：只需提供网站链接，插件即可自动抓取网站的主色调和字体栈，并将其无缝应用到所有生成的图表中。
  • 智能导入与重绘：支持读取 draw.io 和 Mermaid 源文件，能够根据目标尺寸、细节程度和受众群体，自动将粗糙的旧图表重新排版并绘制为精美样式。
  • 多格式导出：支持将图表导出为独立的 HTML、SVG（适配 Figma 等设计软件）或高分辨率 PNG 格式。
  • 无障碍与规范检查：自动验证 WCAG AA 颜色对比度标准，并为 SVG 注入标准的无障碍标签，确保图表对所有人都友好。
  • 渐进式上下文加载：采用按需加载机制，AI 助手仅在需要时读取特定图表的参考文件，保持工作上下文精简高效。

安装与使用示例

该工具支持多种主流 AI 编程助手，以下是各平台的安装命令：

# Pi 安装
pi install https://github.com/cathrynlavery/diagram-design

# Claude Code 安装
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

# Codex 安装
npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design

使用示例：
安装完成后，你可以直接在 AI 助手中使用自然语言进行交互。
* 生成图表：“帮我画一个应用架构图，包含前端、后端、数据库和 Redis 缓存。”
* 品牌适配：“将图表设计风格同步为 https://yoursite.com 的品牌样式。”
* 重绘旧图：“把这个 draw.io 文件重新绘制成适合放在 16:9 幻灯片里的极简风格。”

适用场景与目标用户

适用场景：
* 编写技术博客、产品文档或系统架构说明时，需要高质量且风格统一的配图。
* 制作对外演示的幻灯片，需要将复杂的系统逻辑转化为高管或非技术人员易懂的可视化图形。
* 手头已有大量老旧的 draw.io 或 Mermaid 图表，需要快速进行视觉升级和美化。

目标用户：
* 经常需要输出技术内容的开发者、架构师和技术博主。
* 对文档和演示文稿视觉质量有较高要求的产品经理与设计师。
* 深度使用 Claude Code、Codex 或 Pi 等 AI 辅助编程工具，希望将设计工作流融入 AI 交互的用户。

总结

这款工具巧妙地将严谨的设计系统融入了 AI 编程工作流，极大地降低了制作高质量技术图表的门槛。它让开发者无需在专业设计软件中耗费大量时间调整颜色和对齐，就能通过简单的自然语言指令获得出版级的视觉效果，是提升技术文档专业度的得力助手。

微信联系：timidamen

类似文章