whatisgithub

What is drawio-mcp?

jgraph/drawio-mcp — explained in plain English

Analysis updated 2026-07-03

3,691JavaScriptAudience · developerComplexity · 2/5Setup · easy

In one sentence

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.

Mindmap

mindmap
  root((drawio-mcp))
    What it does
      AI generates diagrams
      Plain English input
    Setup options
      Hosted app server
      npm tool server
      Claude Code skill
      No-install link method
    Features
      10000+ shapes
      AWS Azure K8s UML
      Dark mode support
    Output
      Inline in chat
      Opens in draw.io editor
      Local diagram files
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Ask Claude in plain English to generate a system architecture diagram and have it appear inline in your chat window without any installation.

USE CASE 2

Open generated diagrams directly in the draw.io browser editor so you can fine-tune them after the AI creates a first draft.

USE CASE 3

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 CASE 4

Use the Claude Code skill to generate draw.io diagram files locally as part of a coding or documentation workflow.

What is it built with?

JavaScriptMCPNode.js

How does it compare?

jgraph/drawio-mcpmozilla/gecko-devswiip/generator-gulp-angular
Stars3,6913,6893,694
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyhardeasy
Complexity2/55/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

The hosted option at mcp.draw.io requires zero installation, the npm server option needs Node.js installed.

License terms are not described in the explanation.

So what is it?

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.

Copy-paste prompts

Prompt 1
Using the draw.io MCP server, create a flowchart showing a user signup flow: landing page, email form, email verification, onboarding screen, and dashboard.
Prompt 2
Generate a draw.io system architecture diagram for a web app with a React frontend, a Node.js API, a PostgreSQL database, and a Redis cache layer.
Prompt 3
Search the draw.io MCP shape library for Kubernetes shapes and create a cluster diagram showing a deployment with 3 pods behind a load balancer.
Prompt 4
Create a draw.io sequence diagram showing an OAuth2 authorization code flow between a browser, an app server, and an identity provider.

Frequently asked questions

What is drawio-mcp?

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.

What language is drawio-mcp written in?

Mainly JavaScript. The stack also includes JavaScript, MCP, Node.js.

What license does drawio-mcp use?

License terms are not described in the explanation.

How hard is drawio-mcp to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is drawio-mcp for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.