装上这个图表技能,文档配图不用再手画

写文档时，配图往往很耗神。找模板、挑配色、对齐箭头，半小时过去，图还是差口气；通用工具生成的图，又总带着千篇一律的圆角方块味。有个开源技能专门解决这件事：它给 AI 编辑器装上近四十种图表模板，配色和字号照着你的品牌走。项目叫 diagram-design，在 GitHub 上已有三万八千多星（据项目公开资料），本文拆开讲它的设计与用法。

免责声明

：本文为 GitHub 项目开源技术科普分享，基于公开信息整理（项目仓库及公开资料）；文中 diagram-design、Claude Code、Codex、draw.io、Mermaid 等为项目名或产品名，与相关方无商业合作或背书；功能与数据以仓库实时内容为准；安装与使用请遵循项目许可与相关条款；本文不构成任何投资建议。

一、配图耗的是决策，不是画工

一张架构图难画，往往不是手法问题，而是要拿主意的地方太多：哪些组件上、箭头要不要、字号多大、强调色给谁。项目给出的判断很朴素：好用的做法常常是做减法——每个节点要挣得位置，强调色只留给该优先看到的一两处，信息密度控制得克制。

二、近四十种图表类型，打开就是成品

项目提供三十九种视觉类型，每种备了三个静态变体：简约浅色、简约深色、完整编辑风。产出是自包含网页文件，浏览器直接打开即可，没有构建步骤、不依赖脚本、也没有外部图片。

结构类：架构图、层叠图、嵌套图、树形图、组织架构 过程类：流程图、时序图、状态机、泳道图、甘特图 数据类：柱状图、折线图、散点图、雷达图、四象限

新增的一批来自近期版本，包括桑基图、鱼骨图、看板、用户旅程、依赖图与数据库结构图。语义模式与具体版式分开描述，像队列、策略轨迹、信任边界这类概念，可套用现成类型表达，不必新造一种图。

三、六十秒换成你自己的品牌配色

默认配色已经能直接用——纸白底、墨黑字、一个橙色强调。差异点在品牌化：一句话让它读取你的网站，抓取首页、提取主色与字体，再映射成语义角色写进样式表。

你说：把这个技能按你的站点做品牌化 它做：抓取首页 → 提取配色与字体 → 映射为语义角色       （纸色 / 墨色 / 弱化色 / 强调色）       → 展示改动预览 → 确认后写入样式表

对比度会自动核验：按无障碍标准的正文对比要求，检查墨色落在纸色上的表现，不达标会给出调整值。图形本身也带无障碍标注，多个图形放同一页面不会出现标识冲突。

还有个「初次会拦一下」的设计：在新项目里画图时，若样式表仍是默认值，它会停下来问要不要先做品牌化，而不是默默用默认皮肤交差。同时服务多个客户的人，可把每个品牌的配置存成独立档案，项目里放一个标记文件即可切换。

四、四个旋钮：格式、尺寸、细节、受众

同一个源文件，通过四个维度调整可得到不同产出。用意不是炫技，而是让图形适配它要去的地方。

格式：网页 / 矢量图 / 位图 尺寸：文档内嵌 / 通栏 / 幻灯片 / 社交分享 / 打印 细节：忠实（24 节点内）/ 均衡（12 内）/ 简化（7 内） 受众：工程师 / 混合 / 管理层 —— 改措辞，不改数量

细节这一档按固定顺序做减法：先删装饰，再删重复，后删叶子节点。受众这一档容易被忽略但实用：同一套系统，给工程师看可标出端口与算法，给管理层看则换成「登录校验」这样的表述，节点数量不用动。

五、能重绘已有的图，还会交代改了什么

手头已经有图，来源可能是常见绘图格式，也能交给它重新绘制：指定格式、尺寸与细节，产出统一风格的版本。更值得说的是它的交代方式——每次导入结束都附一份改动清单，说明哪些内容被合并、折叠或丢弃。

被导入图纸里的坐标、配色、字体，以及自动布局带来的连线缠绕都不会被继承；组件、关系、分组和方向则会保留。

六、怎么装，以及几点注意

它按 Agent Skill 形式分发，可挂到兼容该规范的编辑器使用，安装方式包括符号链接与本地包注册。

起步：把技能放进编辑器可识别的位置 出图：描述需要的图，指定格式、尺寸、细节与受众 导出：存为矢量图或位图，放进文档或幻灯片

几点提醒。项目采用宽松的开源许可，具体条款以仓库说明为准，商用前建议核对。品牌化会读取你的网站首页，动手前确认这是你期望的行为；站点有访问限制时，也可手动填写配色与字体。生成的图形仍需人工核对信息是否准确，图的正确性由你负责。项目迭代较快，升级前留意变更说明。

写在末尾

这个技能的价值不在「能画图」，而在于把配图里原本靠感觉的决策显式化了：细节留多少、措辞给谁看、颜色代表什么。想清楚这几点，图自然清爽。

工具省下的是调整时间，省不下的是判断。先把要表达的东西想明白，再让它动手，通常一次就成。

📌 信息来源：diagram-design 项目仓库（github.com/cathrynlavery/diagram-design）及相关公开资料。

#开源项目#图表设计