Architecture Diagrams with Draw.io MCP Server and Claude Code

“Can you draw me an architecture diagram?”

That used to mean: open Visio (if you have a license), spend 30 minutes fighting with connectors, export a PNG, paste it into a Word doc that nobody will update. Or worse: open PowerPoint and draw boxes with arrows.

Now I describe what I want in plain text and Claude generates a Draw.io architecture diagram in seconds. No Visio license. No manual dragging. Version-controlled XML that diffs in git as part of your living documentation.

How Do You Generate Architecture Diagrams with Claude and Draw.io?

You describe the system in plain English and Claude produces valid Draw.io XML through the MCP server. The diagram opens in your browser for review, and you save the .drawio file directly into your repo’s /docs folder. The entire process takes under a minute for most diagrams, compared to 30+ minutes of manual work in Visio or Lucidchart.

The Setup

The Draw.io MCP server runs locally and renders diagrams from mxGraphModel XML. Claude Code connects to it through the MCP protocol and can create diagrams from text descriptions.

What It Generates

Here’s a swimlane process diagram generated the same way:

Claude handles these diagram types well:

Real Example: D365 Integration Architecture

I described this to Claude:

“Create a Draw.io architecture diagram showing: Dynamics 365 CE in the center, connected to Azure AI Search (for document indexing), an external ERP via Azure Service Bus, Power Automate for email notifications, and Dataverse audit log feeding into Power BI. Use blue for Azure services, green for D365, gray for external systems.”

30 seconds later:

Would it have taken me 30 minutes in Visio? More.

What It Gets Right

• Structure and layout. Claude understands that swimlanes have horizontal lanes, ERDs have relationships, integration maps have system boundaries.
• Color coding. Tell it your color scheme and it applies consistently.
• Labeling. Connection labels, system names, data flow descriptions.
• XML validity. The generated mxGraphModel XML renders correctly in Draw.io every time.

What It Gets Wrong

• Complex layouts. Diagrams with 20+ elements sometimes overlap. You need to drag things around manually.
• Pixel-perfect positioning. It approximates positioning. Fine for working diagrams, not for presentation slides.
• Your specific codebase. Claude doesn’t know your actual table names or API endpoints unless you tell it. Paste your schema or API spec for accurate diagrams.
• Aesthetic polish. The diagrams are functional, not beautiful. If you need presentation-quality, use Draw.io’s manual tools for final polish.

The Prompt Pattern That Works

Be specific. Don’t say “draw an architecture diagram.” Say:

Create a Draw.io diagram showing:
- [System A] connects to [System B] via [protocol/method]
- [System C] reads from [System B] on a [schedule]
- Use [color] for [category], [color] for [category]
- Include a legend in the top-right corner
- Layout: left-to-right flow

The more context you give, the better the output. Paste your actual table names, API endpoints, or flow definitions for maximum accuracy. For Dataverse projects, you can export your schema with XrmToolBox and feed it directly to Claude for an accurate ERD.

Building a documentation practice for your Power Platform team? Follow Alex on LinkedIn for more patterns on AI-assisted architecture and living docs.

Compared to Other Tools

Draw.io + Claude wins on cost (free), AI generation (full diagrams from text), and git friendliness (XML diffs). It loses on real-time collaboration - you collaborate through pull requests, not simultaneous editing.

What’s Next

Next article: using this workflow to generate ERDs from XrmToolBox schema exports. Export your Dataverse schema, feed it to Claude, get a visual ERD in 5 minutes.

---

AZ365.ai - Azure and AI insights for architects building on Microsoft. Follow Alex on LinkedIn for architecture deep dives.