This is a submission for the OpenClaw Writing Challenge
I already use the Excalidraw Model Context Protocol (MCP) remote server in Claude and ChatGPT, but I was curious how it would work in OpenClaw. In Claude and ChatGPT, the MCP renders the diagram inline. I can iterate, see changes in real time, edit directly, and when I am happy, open it in Excalidraw.
OpenClaw does not render the MCP's UI, so the challenge was getting my OpenClaw, McClaw, to generate the scene and hand me back a shareable Excalidraw link instead. Also, meet 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.
Once I was more specific, it rendered correctly.
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: 1so 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
If you want to use it, install it via OpenClaw:
openclaw skills install excaliclaw
Excaliclaw — ClawHub
Create reliable Excalidraw diagrams in OpenClaw using the Excalidraw MCP, with export-safe labels, Excalifont text, and clear system-diagram structure. Use w...
clawhub.ai
or, install it from GitHub using npx skills:
npx skills add nickytonline/skills --skill excaliclaw
nickytonline
/
skills
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!
Top comments (15)
Great overenginering works. My vote for you, but I think excalidraw is the tipical that application which is perfectly fine for realtime communication app. I am using very frequently to fill the communication gap between a different technical and or natural language people, when I would like describe a complex problem. Then I share my excalidraw screen and amazing fast can draw any topic into a visual form, meanwhile of speeking.
Thanks for giving it a read.
Excalidraw is amazing and it is great for real time collaboration for sure. But it’s also useful for creating diagrams that don’t necessarily have collaboration sometimes or need the real-time aspect. The MCP app makes it easy to either get exactly what you want or if it’s not perfect, you just continue in Excaldiraw.
Wow, cool!!!
Very cool idea combining OpenClaw with Excalidraw could make visual thinking and diagram generation much more powerful.
Thanks Laura!
This is such a clever approach! The debugging
journey you shared — going from empty Excalidraw
exports to a reliable skill — is exactly the kind
of practical insight that's hard to find anywhere
else.
The tip about using explicit text elements instead
of relying on label shortcuts is something I would
have spent hours figuring out on my own. Packaging
all those lessons into Excaliclaw is a great idea.
I work with AI agents and MCP integrations daily,
so seeing how you handled the SSE vs streamable
HTTP transport difference was really interesting.
Going to try this out!
Nice!
Omg this is so real!
It's a really great JOB!!!
Thanks!
Good stuff
Some comments may only be visible to logged-in visitors. Sign in to view all comments.