Ask Claude in plain English to generate a system architecture diagram and have it appear inline in your chat window without any installation.
Open generated diagrams directly in the draw.io browser editor so you can fine-tune them after the AI creates a first draft.
Search over 10,000 AWS, Azure, Kubernetes, and UML shapes from within an AI conversation to get the exact shape style for your diagram.
Use the Claude Code skill to generate draw.io diagram files locally as part of a coding or documentation workflow.
| jgraph/drawio-mcp | mozilla/gecko-dev | swiip/generator-gulp-angular | |
|---|---|---|---|
| Stars | 3,691 | 3,689 | 3,694 |
| Language | JavaScript | JavaScript | JavaScript |
| Setup difficulty | easy | hard | easy |
| Complexity | 2/5 | 5/5 | 2/5 |
| Audience | developer | developer | developer |
Figures from each repo's GitHub metadata at analysis time.
The hosted option at mcp.draw.io requires zero installation, the npm server option needs Node.js installed.
Draw.io is a free online diagramming tool used for making flowcharts, system diagrams, network maps, and similar visuals. This repository is the official bridge between draw.io and AI assistants like Claude: it lets an AI generate diagrams and either show them directly in a chat window or open them in the draw.io editor. The connection works through a protocol called MCP (Model Context Protocol), which is a standard way for AI tools to talk to external applications. When an AI assistant is connected to this server, you can ask it in plain language to create a diagram and it will produce one, rather than just describing what one might look like. The repository offers four different ways to set this up, depending on what you need. The hosted app server (at mcp.draw.io) requires no installation and shows diagrams inline inside the chat conversation. The npm tool server opens diagrams directly in the draw.io editor in your browser, and supports three input formats. A skill file for Claude Code generates diagram files locally. A fourth option requires no installation at all: you paste a set of instructions into a Claude project and the AI generates clickable draw.io links using Python. All four approaches share a single reference file that defines how the AI should format draw.io's XML diagram format, covering things like edge routing, shapes, layers, and dark mode. When the guidance needs to be updated, only that one file needs to change. A built-in shape search tool covers more than 10,000 shapes from libraries including AWS, Azure, Kubernetes, UML, and others, so the AI can find the correct shape style string before generating a diagram.
An official bridge that lets AI assistants like Claude create draw.io diagrams from plain-English descriptions, showing them inline in chat or opening them in the draw.io editor.
Mainly JavaScript. The stack also includes JavaScript, MCP, Node.js.
License terms are not described in the explanation.
Setup difficulty is rated easy, with roughly 5min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
Verify against the repo before relying on details.