這是參加OpenClaw 寫作挑戰賽的作品。

我已經在 Claude 和 ChatGPT 中使用Excalidraw 模型上下文協定 (MCP) 遠端伺服器,但我很好奇它在 OpenClaw 中會如何運作。在 Claude 和 ChatGPT 中,MCP 會將圖表直接渲染到程式內部。我可以迭代修改,即時查看更改,直接編輯,滿意後再在 Excalidraw 中開啟。

在 Claude 中執行的 Excalidraw MCP 應用程式

OpenClaw 無法渲染 MCP 的使用者介面,所以困難在於如何讓我的 OpenClaw 程式 McClaw 產生場景,並傳回一個可分享的 Excalidraw 連結。另外,也來認識 McClaw 吧!

我的 OpenClaw 控制器名叫 McClaw

設定過程非常簡單。我讓 McClaw 指向 Excalidraw MCP 伺服器倉庫,README 文件中包含指向遠端 MCP 的連結,然後讓它自動配置。我唯一需要指定的是使用可串流 HTTP而不是伺服器發送事件 (SSE) 作為 MCP 傳輸協議,因為 OpenClaw 預設的 MCP 協定是 SSE(MCP 規範已棄用 SSE,建議使用可串流 HTTP)。

我的第一次測試刻意做得非常小:只有一個寫著「hello world」的方格。 MCP渲染成功了,但第一個Excalidraw共享連結打開的卻是一個空場景。解決方法是:讓它導出完整的Excalidraw原生場景資料,而不僅僅是MCP流元素資料。

與 McClaw 溝通,取得一個帶有文字的簡單方塊來渲染。

當我把參數說得更具體一些後,它就正確渲染了

一個簡單的圖表,其中包含一個寫著「Hello World」的方框。

從那時起,我以為一切都解決了,於是我開始繪製更複雜的圖表。我和 McClaw 嘗試繪製 Kubernetes 圖。方格渲染出來了,但標籤卻消失了。後來的版本加入了標籤,但卻沒有手繪的 Excalifont 字體。經過幾輪迭代,我和 McClaw 最終找到了一個可靠的模式:

  • 請使用顯式文字元素,而不是依賴 Excalidraw/MCP 標籤捷徑。

  • 依繪製順序將文字放在形狀上方。

  • 設定fontFamily: 1 ,使文字使用 Excalidraw 手繪的 Excalifont 字體。

  • 為文字元素設定寬度和高度。

  • 圖表元素要夠大,以便在聊天預覽中清晰可見。

  • 盡可能讓箭頭繞過標籤。

  • 除非匯出的場景包含真實元素,否則切勿傳回 Excalidraw 連結。

您可以從過程中產生的連結中看到進展:

那個除錯過程最終演變成我和 McClaw 開發的一個名為 Excaliclaw 的小型 OpenClaw 技能。

這項技能整合了我和 McClaw 先前總結的所有經驗,包括匯出失敗、標籤缺失、字體顯示異常和箭頭路徑問題。現在,當我需要圖表時,McClaw 已經有了可重複使用的方案,而不用像以前那樣,每次執行程序都要重新摸索這些特殊情況。

現在箭頭確實連接了方框,標籤也與其形狀分組在一起。

這是最終的 Kubernetes 叢集架構圖。

Kubernetes 叢集架構圖(行動 Excalidraw 節點)

如果想使用它,請透過 OpenClaw 安裝:

openclaw skills install excaliclaw

https://clawhub.ai/nickytonline/excaliclaw

或者,使用npx skills從 GitHub 安裝:

npx skills add nickytonline/skills --skill excaliclaw

https://www.github.com/nickytonline/skills

MCP 提供助手使用專用工具的權限。此技能總結了使其可靠的實用經驗。

如果你想和我保持聯繫,我的所有社交帳號都在nickyt.online

期待下次!


原文出處:https://dev.to/nickytonline/introducing-excaliclaw-a-skill-for-openclaw-to-generate-excalidraw-diagrams-48k6


精選技術文章翻譯,幫助開發者持續吸收新知。

共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。
🏆 本月排行榜
🥇
站長阿川
📝2   💬10   ❤️1
140
🥈
我愛JS
💬2  
8
🥉
Gigi
2
評分標準:發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次
📢 贊助商廣告 · 我要刊登