agent-canvas
让AI智能体在Excalidraw上绘制图表、流程图和可视化架构图。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：agent-canvas。 它的用途是：让AI智能体在Excalidraw上绘制图表、流程图和可视化架构图。 完整的 Skill 内容见：https://321skill.com/skills/agent-canvas/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘分析当前项目的代码结构，并绘制一个微服务架构图。’ 它会先扫描你的代码目录，理解模块划分，然后调用agent-canvas命令在Excalidraw上逐步绘制出包含服务、数据库和通信关系的架构图。你还可以接着说：‘把数据库图标换成蓝色的，并添加一个API网关层。’ AI会理解这些指令并实时更新画布。
介绍
Agent Canvas 是一款专为AI智能体设计的绘图技能，解决了在协作开发或设计过程中，AI难以直接参与可视化创作的痛点。它通过一个轻量级的CLI工具，让AI能够理解你的代码库上下文，并实时在Excalidraw画布上执行绘制命令，生成准确的架构图、流程图或UI原型。
使用时，只需在支持技能的AI代理（如Claude Code、Cursor）中安装此技能，然后通过自然语言指令（如“为这个项目画一个架构图”）即可驱动AI分析代码并开始绘图。整个过程通过WebSocket实现实时同步，你可以在浏览器中即时看到绘图结果，并与AI进行迭代对话来修改和完善。
该技能非常适合需要将复杂逻辑、系统架构或产品设计可视化的开发者、技术负责人和产品设计师。无论是梳理遗留代码、规划新系统，还是快速制作演示素材，它都能大幅提升沟通和设计效率。
建议在使用前确保本地环境可以运行Node.js和npm。由于绘图基于Excalidraw，手动在画布上进行的调整也能被AI识别并继续协作，实现了真正的人机双向编辑。初次使用可尝试从简单的流程图开始，熟悉AI的绘图逻辑和指令风格。
核心特点
与普通网页绘图工具不同，它能让AI智能体直接读取你的代码库上下文，从而生成与项目结构高度吻合的准确图表；同时采用高效的CLI命令通信而非生成冗长的JSON，极大优化了Token消耗并实现实时迭代绘图。
注意事项
不适合需要生成高度艺术化或非结构图（如写实绘画）的场景，其核心是基于Excalidraw的矢量图形绘制。
常见问题
支持哪些AI代理使用？
支持任何集成了技能系统并能执行bash命令的AI代理，如Claude Code、Cursor、Codex等。
需要手动安装Excalidraw吗？
不需要，启动技能后会自动在本地浏览器打开一个集成的Excalidraw实例。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/agent-canvas/raw/index.md 读取 agent-canvas 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/agent-canvas/raw/index.md（查看排版版本）