agent-canvas

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 指令來列出、建立與重新命名畫布，以便在多個儲存庫中進行組織化的專案管理。

• 隨時確保畫布與當前工作分支同步；在實作前後利用此工具視覺化變更，以加速審查週期並提升對程式碼庫的理解。