diagram-design简介
开发工具
Diagram Design 是一个专为 AI 编程助手（如 Claude Code、Codex 等）设计的图表生成技能插件。它解决了开发者在使用 AI 生成架构图、流程图时，产出物往往是千篇一律的圆角方框、缺乏设计感且难以融入品牌视觉的问题。
它提供 39 种编辑级图表类型，输出为纯静态的 HTML+SVG 文件，无需任何构建步骤或外部依赖。它能自动抓取网站的品牌色和字体来定制图表风格，并支持将现有的 draw.io 或 Mermaid 图表源文件按照统一的设计规范重新绘制，同时提供格式、尺寸、细节层级和目标受众等多维度的导出控制。
亮点特性
01极致的视觉设计规范
严格遵循 4px 网格对齐、单强调色聚焦、无阴影、特定字体组合（Instrument Serif + Geist），彻底消除「AI 生成感」
02零依赖的静态输出
所有图表均为自包含的 HTML+SVG 文件，双击即可离线查看，无需 JavaScript 运行时或外部图片资源
03智能的导入重绘引擎
不仅支持格式转换，还提供 Format（格式）、Size（尺寸）、Detail（细节层级）、Audience（受众）四个调节旋钮，并附带保真度清单说明删减了哪些节点
04渐进式上下文加载
Agent 仅在需要时才加载特定的图表类型参考文档，避免一次性消耗大量 Token 上下文窗口
05内置无障碍与动效支持
默认包含 ARIA 标签和屏幕阅读器支持，并提供可选的、尊重 prefers-reduced-motion 的平滑动画模式
使用场景
场景 1技术博客与文档配图
为文章快速生成符合网站品牌调性的高质量架构图或流程图，告别丑陋的默认样式
场景 2项目提案与高管汇报
将复杂的系统架构转化为简化版、面向非技术人员的可视化图表，用于幻灯片展示
场景 3遗留图表翻新
将团队历史积累的 draw.io 或 Mermaid 图表一键重绘为统一风格的现代设计
使用环境
快速上手
安装配置
以 Claude Code 为例，通过插件市场安装：
|
其他支持的宿主工具（Codex、Pi、Kiro 等）均有对应的安装命令，也可通过克隆仓库后创建符号链接进行本地可编辑安装。
品牌适配（Onboarding）
在对话中直接要求 AI 抓取你的网站风格：
|
插件会自动提取网站的背景色、主文本色、强调色以及字体栈，并将其映射到图表的设计令牌中，确保生成的图表与你的品牌视觉完全一致。
核心用法示例
1. 自然语言生成图表
直接在 AI 助手中描述需求：
|
2. 从现有文件导入并重绘
将已有的 draw.io 或 Mermaid 文件转换为新风格，并可指定尺寸、细节程度和目标受众：
|
3. 导出为图片或矢量图
|
替代方案
对比 1Mermaid.js
基于文本的图表渲染工具，生态成熟但默认样式较为普通且高度模板化；Diagram Design 则专注于编辑级排版美学，且能将 Mermaid 源码作为输入进行美化重绘
对比 2Excalidraw
流行的手绘风格白板工具，适合头脑风暴和非正式草图；Diagram Design 更偏向严谨、专业的出版物级别技术图表
对比 3D2 (Declarative Diagramming)
现代化的声明式图表脚本语言，语法简洁且支持多种布局引擎；Diagram Design 不定义新语法，而是作为 AI Agent 的技能直接通过自然语言驱动生成
相关资源
项目地址github.com/cathrynlavery/diagram-design