GitHub: https://github.com/agentdraw/agentdraw
写技术文章、产品方案、复盘报告、评审文档时，最麻烦的事情之一往往不是写文字，而是配一张合适的图。
直接让 AI 生成图片，效果可能很好看，但后面很难改。直接让 AI 写 HTML ，表达力很强，但通常不适合继续手动编辑。让 AI 直接生成白板 JSON ，又经常出现文字不居中、连线乱飞、元素不对齐、整体缺少设计感的问题。
AgentDraw 想解决的就是这个空白：让 Claude Code 、Codex 、Cursor 这类 coding agent 可以为文章、文档和方案生成稳定、好看、有设计感的可编辑画板配图。
它不是单纯的画图工具，而是一套给 agent 使用的 skill 和 CLI 工具集。Agent 可以先根据文章内容选择合适的表达方式、设计风格和版式结构，再生成 SVG 或 Mermaid ，最后转换成可编辑的 Excalidraw 白板。用户可以直接在本地浏览器里打开、拖动、修改文字、调整连线，也可以导出 SVG 、PNG 或结构化 JSON 。
为什么需要 AgentDraw
很多时候，我们真正想要的不是一张“生成完就结束”的图片，而是一张可以参与写作和沟通的图。
比如：
- 给一篇技术文章做核心架构图；
- 给一次方案评审做问题诊断图；
- 给产品思考文章做结构化配图；
- 给团队同步文档做流程图、对比图、路线图；
- 给复杂概念做一张读者一眼能看懂的说明图。
这些图既要好看，也要准确，还要能改。
AgentDraw 的优势在于，它把 AI 生成图的过程拆成了更稳定的工作流：
- 结构明确的流程图、时序图、类图，可以走 Mermaid ；
- 更偏文章配图、架构说明、观点表达的图，可以走 SVG ；
- 最终都转换成可编辑的
.agentdraw.json白板； - 打开前可以进行修复、校验和质量检查；
- 打开后仍然可以在 Excalidraw 里自由编辑。
这样 agent 不需要从零手写复杂白板坐标，用户也不会被锁死在一张不可修改的截图里。
安装
如果你是给 Claude Code 、Codex 、Cursor 这类 agent 使用，推荐同时安装 CLI 和 skill：
npm install -g @aidraw/agentdraw
npx skills add agentdraw/agentdraw --skill agentdraw -g -y
也可以把下面这个安装说明直接发给 agent：
https://raw.githubusercontent.com/agentdraw/agentdraw/main/INSTALL.md
只想临时使用 CLI ，也可以不全局安装：
npx @aidraw/agentdraw@latest import-svg board.svg --out board.agentdraw.json --style boardroom --json
npx @aidraw/agentdraw@latest open board.agentdraw.json --background --open
怎么使用
最简单的用法，是直接让 agent 读取你的文档，然后生成配图：
请阅读这篇文章，使用 AgentDraw 给它生成一张适合放在文章开头的配图。
要求：重点突出、有设计感、像杂志信息图一样好看，并且生成可编辑画板。
如果你已经知道想要的图类型，也可以说得更明确：
使用 AgentDraw 画一张系统架构说明图，突出数据流、agent 协作关系和人工确认节点。
使用 AgentDraw 画一张产品策略对比图，采用四象限或杂志风排版，要求适合放在方案评审文档里。
生成完成后，agent 可以用本地浏览器打开画板。你可以继续手动编辑，也可以导出为 SVG 或 PNG 放进文章、PPT 、飞书文档、GitHub README 或公众号里。
一些生成例子
下面这些都是 AgentDraw 生成的可编辑白板预览，不是一次性截图。对应的源文件在 GitHub 仓库里，可以继续打开编辑。
复杂说明画板
杂志感版式
适合文章开头图、观点总结图、方案评审图。重点不是简单换配色，而是让 agent 使用更明确的表达结构。
分析和决策类版式
适合 SWOT 、路线图、阶段推进、方案对比、生态关系和分层结构。
不同主题风格
AgentDraw 内置了多套设计风格。agent 可以根据文章气质选择更适合的视觉语言，比如偏咨询汇报、产品发布、研究综合、事故复盘、手绘说明、规格文档等。
AgentDraw 适合什么场景
AgentDraw 当前最适合的场景，是“文章和文档里的可编辑说明图”。
它特别适合：
- 技术文章配图；
- 架构说明图；
- 产品方案图；
- 复盘和诊断图；
- 策略分析图；
- 流程图和对比图；
- 需要后续人工微调的白板图。
如果你的目标是做一张完全写实的海报图，或者是复杂的网页交互页面，直接生成图片或 HTML 可能更合适。AgentDraw 的核心价值，是让 AI 生成的图既有设计感，又能保持结构化和可编辑。
它和普通 AI 画图有什么不同
普通 AI 画图更像是“生成一张结果图”。好看时很好看，但修改成本高。
AgentDraw 更像是“让 agent 帮你搭好一张可编辑白板”。它关注的是：
- 图里的文字是否清晰；
- 信息层级是否明确；
- 元素是否对齐；
- 连线是否可读；
- 画板是否能继续编辑；
- 结果是否适合放进真实文章和文档。
这也是为什么 AgentDraw 不只提供一个渲染命令，而是提供 skill 、设计系统、版式参考、校验工具和本地编辑器。
未来
AgentDraw 的目标不是替代所有设计工具，而是成为 agent 生成结构化配图时的默认工作流。
我们希望它能做到：
- 让 agent 更稳定地产出高质量配图；
- 让用户可以继续手动编辑，而不是只能接受最终截图；
- 让技术文章、产品方案、评审文档里的图更清楚、更好看；
- 让 AI 画板从“能画出来”变成“真的能用”。
Select Language