My OpenClaw named McClaw
Setting it up was straightforward. I pointed McClaw at the Excalidraw MCP server repository, the readme includes a link to the remote MCP, and asked it to configure itself. The one thing I had to specify was to use streamable HTTP instead of Server Sent Events (SSE) for the MCP transport, since OpenClaw defaults MCPs to SSE (deprecated in the MCP specification in favour of streamable HTTP).
My first test was intentionally tiny: one box that said "hello world." The MCP render worked, but the first Excalidraw share link opened an empty scene. The fix: ask it to export a full native Excalidraw scene payload, not just the MCP streaming element data.
conversation with McClaw to get a simple box with text to render
Once I was more specific, it rendered correctly.
A simple diagram with a box with the text Hello World
From there, I thought everything was fixed so I went with a more complicated diagram. McClaw and I tried a Kubernetes diagram. The boxes rendered, but labels disappeared. A later version had labels, but not the hand-drawn Excalifont. After a few rounds of iteration, McClaw and I landed on a reliable pattern:
- Use explicit text elements instead of relying on Excalidraw/MCP label shortcuts.
- Put text on top of shapes in the draw order.
- Set
fontFamily: 1 so text uses Excalidraw's hand-drawn Excalifont.
- Include width and height on text elements.
- Keep diagram elements large enough to read in chat previews.
- Route arrows around labels where possible.
- Never return an Excalidraw link unless the exported scene has real elements in it.
You can see the progression in the links generated along the way:
That debugging process turned into a small OpenClaw skill McClaw and I built called Excaliclaw.
The skill packages everything McClaw and I worked out from the failed exports, missing labels, font weirdness, and arrow-routing issues. Now when I ask for a diagram, McClaw has a repeatable recipe instead of the two of us rediscovering those edge cases on every run.
Now arrows actually connect boxes, and labels are grouped with their shapes.
Here's the final working Kubernetes cluster architecture diagram
barebones Kubernetes cluster architecture diagram moving Excalidraw nodes
If you want to use it, install it via OpenClaw:
openclaw skills install excaliclaw
Create reliable Excalidraw diagrams in OpenClaw using the Excalidraw MCP, with export-safe labels, Excalifont text, and clear system-diagram structure. Use w...
favicon
clawhub.ai
or, install it from GitHub using npx skills:
npx skills add nickytonline/skills --skill excaliclaw
My skills for agentic harnesses
skills
My personal agent skills.
Skills
Skill |
Description |
excaliclaw |
Create reliable Excalidraw diagrams via the Excalidraw MCP, with export-safe labels, Excalifont text, and clear system-diagram structure. |
Usage
OpenClaw
Install a skill via ClawHub:
openclaw skills install excaliclaw
Or directly from this repo:
npx skills add nickytonline/skills --skill excaliclaw
Then invoke it in a prompt, e.g. architecture diagram of my API.
Claude Code
Skills are invoked with a / prefix, e.g. /excaliclaw architecture of my API.
MCP gives the assistant access to a specialized tool. The skill captures the practical lessons that make it reliable.
If you want to stay in touch, all my socials are on nickyt.online.
Until the next one!