Most coding conversations with AI end up at the same bottleneck: you have to describe a complex system with text, or accept a static image that you can't edit.
If you’ve ever tried to get an LLM to "draw" an architecture diagram, you know the pain. You usually get ASCII art that breaks on mobile, or a Mermaid script that you have to copy-paste into another tool just to see if it’s right.
That changed this week. Claude can now draw.
Anthropic’s model has started streaming live diagrams directly onto an Excalidraw canvas. It’s not generating a PNG file in the background and handing it to you. It’s actually drawing it, stroke by stroke, right in front of you.
How it works (and why it looks cool)
This isn't magic, though it feels like it. It’s built on the Model Context Protocol (MCP).
You connect Claude (via Claude Code or a terminal setup) to an Excalidraw MCP server. When you ask for a "system architecture for a load balancer" or "a flowchart of this user auth logic," Claude calls a tool to place rectangles, arrows, and text on the canvas.
The difference is the feedback loop. Because it’s streaming, you see the logic unfold. You see it place the database first, then the API layer, then the connections. It feels like watching a colleague sketch on a whiteboard during a meeting.
Why I actually use this
The "cool factor" wears off after five minutes. The utility doesn't.
1. It’s not a flat image
This is the big one. If DALL-E generates a diagram and misspells "PostgreSQL," you’re stuck. You have to prompt it again and hope.
With this Excalidraw integration, every box and arrow is a real object. If Claude puts a box in the wrong spot, you just drag it. If it makes a typo, you double-click and fix it. You aren't fighting the AI; you're just fixing its draft.
2. It lives in your repo
Because these are standard Excalidraw JSON files, you can commit them.
I’ve started using this to document old codebases. I paste a messy file into Claude and ask, "Draw me a map of how these functions call each other." It sketches it out, I tweak the layout, and I commit the .excalidraw file right next to the code.
3. Vibe coding the visuals
We talk a lot about "vibe coding"—building apps by describing the feel rather than the syntax. This is the visual equivalent. You can say, "Make the database red and angry because it's the bottleneck," and Claude updates the stroke color. It turns diagramming from a chore into a conversation.
The technical bit
To get this running, you generally need an MCP-compatible environment. The community has rallied around tools like excalidraw-mcp. There are also some great repositories popping up, like drawbridge and robtaylor/excalidraw-diagrams, which wrap these capabilities into easier packages.
It’s still early days—sometimes the arrows don't quite connect, or the text overflows the box. But compared to staring at ASCII art? It’s a massive step up.
Official Links
Conclusion
We’re moving away from chat interfaces where text is the only output. Giving AI a cursor and a canvas changes the dynamic completely. It stops being a chatbot and starts feeling like a remote pair programmer with a marker in hand.
If you have access to Claude 3.7 (or the new Opus builds), try asking for a diagram. Just watching the arrows fly across the screen is worth the API credits.