工程开发
agent-canvas avatar

agent-canvas

通过 CLI 在 TLDraw 画布上绘制图表、流程图与注解。适用于架构规划、代码审查与代理程序执行记录可视化。

简介

Agent Canvas 是一款专为 AI 编程代理程序设计的视觉化工作空间管理工具。通过将命令行界面与 TLDraw 白板结合,代理程序可以动态建立视觉文档、架构图与序列图,进而解释复杂的系统逻辑。这项技能使代理程序能够更有效地与人类开发者进行沟通,将画布转化为用于结对编程、除错与系统设计的协作白板。

本工具专为开发人员、架构师与工程团队设计,非常适合处理需要高度视觉化清晰度的复杂工作流。无论是规划微服务依赖关系、解释错误修复,还是通过逻辑性的代码差异区块来审查拉取请求 (Pull Requests),Agent Canvas 都能提供一个结构化的环境,帮助将视觉证据与代码变更维持在正确的上下文中。

  • 完整画布控制能力:可通过程序自动化建立、管理与操作各种形状、箭头与容器。

  • 专用形状支持:提供丰富的形状选择,包含几何图形、用于长篇叙述的 Markdown、代码差异比较 (code-diff)、堆栈追踪显示 (stack-trace) 以及文件树状结构 (file-tree)。

  • 交互式原型设计:支持嵌入式 HTML 形状,可用于沙盒环境的 UI 展示、数据视觉化与实时网页预览。

  • 多代理程序协作:允许多个代理程序或不同的工作流在同一画布上运作,促进蜂群式协作并支持隔离的 Git 工作树追踪。

  • 自动化证据收集:通过专用的终端机与测试结果形状,自动处理日志、测试输出与命令执行记录,大幅减少手动撰写文档的负担。

  • 请尽量使用专用形状类型(例如 ai-terminal 或 code-diff)而非泛用的文字或 Markdown,以维持语义清晰度与视觉一致性。

  • 由于系统依赖 CLI 与 TLDraw 编辑器之间的 WebSocket 中继,操作时请确保浏览器中已开启白板页面。

  • 针对自动化 CI/CD 流程或无需手动监控的后台任务,建议使用无头模式 (headless mode)。

  • 利用提供的 CLI 指令来列出、建立与重新命名画布,以便在多个代码仓库中进行组织化的项目管理。

  • 随时确保画布与当前工作分支同步;在实现前后利用此工具视觉化变更,以加速审查周期并提升对代码库的理解。

仓库统计

Star 数
16
Fork 数
1
Open Issue 数
5
主要语言
TypeScript
默认分支
main
同步状态
空闲
最近同步时间
2026年5月3日 21:44
在 GitHub 查看