做技术或产品的同学在工作中肯定有做内部分享或自己写技术架构等的经历以前都是用Vison、ProcessOn等画图工具一点点的自己绘制现在AI这么发达了自然想偷点懒。可是当你真用裸奔的Agent去绘制各种架构、流程、时序图时你会发现完全不够用。裸奔Agent 画架构图出来的东西圆角盒子堆叠、配色像模板跟自己的风格完全不搭。对着AI一顿疯狂输出调试了半天效果也不佳无赖还是手搓。不巧这样的事前些天我也碰到过。前两天写东西想通过一张架构图描述前端、后端、数据库、缓存的层级关系我直接直接丢给Codex干效果一般。于是我去 GitHub 搜索刷到diagram-design这个神级skill官网提供完整预览效果图。它能给 AgentCC、Codex、 Pi等 提供 39 种编辑级图表类型HTML形式直接输出图片使用的SVG不是使用 Mermaid 那套自动布局。来看看实际跑起来是啥样你在 Agent 里说帮我画一个应用架构图前端、后端、数据库、Redis 缓存。它会选合适的图表类型生成 HTML 文件浏览器双击就能打开。静态版不依赖 JavaScript也没有外部图片资源。每种类型都有三种皮肤minimal light、minimal dark、full-editorial官网的画廊可以预览全部 39 种效果见第一张图。它把图表能力拆成了几块39 种编辑级图表类型。覆盖架构图、流程图、时序图、状态机、ER 图、时间线、泳道图、象限图、Sankey、鱼骨图、Wardley map、看板、用户旅程等等。v2.5.10 刚补齐最后 10 种。品牌 onboarding。对 Agent 说 onboard diagram-design to https://yoursite.com它会抓取首页提取主色和字体映射到 paper、ink、accent 等语义 token写入 style-guide.md。README 说大约 60 秒完成之后新图都用你的品牌色。draw.io 和 Mermaid 重绘。已有 。drawio 或 。mmd 文件可以让 skill 按同一设计系统重画。支持调 format、size、detail、audience 四个参数比如 slide-16x9 给 PPTsimplified 给高管版。导出 PNG 和 SVG。HTML 可直接用也能导出 SVG 进 Figma或 PNG 进幻灯片。PNG 需要 Playwright 和 ChromiumREADME 写了 pip install playwright 的步骤。安装体验Codex 用户codex plugin marketplaceaddcathrynlavery/diagram-design codex pluginadddiagram-designdiagram-designCC 用户/plugin marketplaceaddcathrynlavery/diagram-design /plugininstalldiagram-designdiagram-design这几点得提一下这个skill默认是输出静态html如果想要动画效果需要额外安装一些插件。另外如果要导出 PNG 图还要装 Playwright。任何工具都有它适用的场景这个工具不适合推文级 unicode 小图也不适合纯列表或单框内容这些readme中已明确说明。写在最后如果你们公司经常要写技术文章、做分享 PPT我感觉还是非常合适的做出来的效果不仅漂亮最重要的是效率高呀。仓库地址https://github.com/cathrynlavery/diagram-design感谢阅读。持续更新中竹叶获取最新所有分享工具信息。