企业官网建设流程全解析

做技术或产品的同学，在工作中肯定有做内部分享或自己写技术架构等的经历，以前都是用Vison、ProcessOn等画图工具，一点点的自己绘制，现在AI这么发达了，自然想偷点懒。

可是当你真用裸奔的Agent去绘制各种架构、流程、时序图时，你会发现完全不够用。

裸奔Agent 画架构图，出来的东西圆角盒子堆叠、配色像模板，跟自己的风格完全不搭。对着AI一顿疯狂输出，调试了半天，效果也不佳，无赖还是手搓。

不巧，这样的事前些天我也碰到过。前两天写东西，想通过一张架构图描述前端、后端、数据库、缓存的层级关系，我直接直接丢给Codex干，效果一般。

于是我去 GitHub 搜索，刷到diagram-design这个神级skill，官网提供完整预览效果图。

它能给 Agent（CC、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 给 PPT，simplified 给高管版。

导出 PNG 和 SVG。

HTML 可直接用，也能导出 SVG 进 Figma，或 PNG 进幻灯片。PNG 需要 Playwright 和 Chromium，README 写了 pip install playwright 的步骤。

安装体验

Codex 用户：

codex plugin marketplaceaddcathrynlavery/diagram-design codex pluginadddiagram-design@diagram-design

CC 用户：

/plugin marketplaceaddcathrynlavery/diagram-design /plugininstalldiagram-design@diagram-design

这几点得提一下

这个skill默认是输出静态html，如果想要动画效果需要额外安装一些插件。

另外，如果要导出 PNG 图，还要装 Playwright。

任何工具都有它适用的场景，这个工具不适合推文级 unicode 小图，也不适合纯列表或单框内容，这些readme中已明确说明。

写在最后

如果你们公司经常要写技术文章、做分享 PPT，我感觉还是非常合适的，做出来的效果不仅漂亮，最重要的是效率高呀。

仓库地址：https://github.com/cathrynlavery/diagram-design

感谢阅读。

持续更新中，竹叶获取最新所有分享工具信息。