画图不再来回切工具！这个 38.9 万星的 Skill 用嘴就能画架构图

每次想画个架构图或者流程图，你是怎么解决的？打开 Figma 太重，Excalidraw 虽然方便但还是要手动拖拽，有没有什么 AI 工具能直接把你说的需求变成一张完整的图？

还真有——就是今天要推荐的这个 Skill：diagram-maker。

三种模式，按需切换

diagram-maker 支持三种完全不同的输出模式：

• clean-svg：生成干净的 SVG 图，适合教育概念图、流程图、物理系统示意图、生命周期图。
• architecture-svg：专做软件架构和云架构图，支持数据库、队列、信任边界等云原生组件。
• excalidraw：生成可编辑的 .excalidraw 文件，直接在 Excalidraw 里打开，手绘风格，白板协作神器。

简单说：你要正式文档用 SVG，你要团队讨论用 Excalidraw，你要画云架构直接 architecture-svg。

怎么用

安装就一行命令：

npx skills add https://github.com/openclaw/openclaw --skill diagram-maker

之后直接告诉它你要画什么，比如：”帮我画一个用户登录的完整流程图，包含前端、API、数据库三个节点”——它会自动选择合适的布局（左到右 or 上下 or 中心辐射），生成独立的 HTML 文件，直接浏览器打开就能看。

为什么推荐

几个让我觉得好用的细节：

• 零依赖：输出的 HTML 里 CSS 和 SVG 都是内联的，没有任何外部字体、JS 和图片，拷贝走哪都能用。
• 语义配色：不是彩虹配色，而是用 neutral/input/process/storage/external/risk 这类语义颜色，画出来很专业。
• 布局智能：支持 hub-spoke、swimlanes、分层堆叠、时序图等多种布局，自动选不需要你指挥。
• Excalidraw 可协作：生成的 .excalidraw 文件可以直接丢给队友，大家一起在白板上改。

适合谁

产品经理、架构师、技术写作者、老师或者任何需要经常画图的人。尤其是当你需要在文档里嵌入图表、又不想来回切换设计工具的时候，这个 Skill 能省很多时间。

GitHub 开源免费，仓库 star 38.9 万，品质有保证。设计师和 AIGC 爱好者可以收藏试试。

仓库：https://github.com/openclaw/openclaw

GitHub: https://github.com/openclaw/openclaw