AI Draw.io

AI-powered draw.io diagram generator for Claude Code. Generate flowcharts, architecture diagrams, mind maps, and technical illustrations from natural language descriptions with browser preview.

Features

Natural Language to Diagram: Describe what you want, get a professional diagram
Browser Preview: Automatically renders diagrams using diagrams.net viewer
Multiple Diagram Types:
- Flowcharts & Process diagrams
- AWS/GCP/Azure architecture diagrams
- Mind maps
- Entity relationship diagrams
- Sequence diagrams
- Technical illustrations
Rich Styling: Colors, shapes, connectors, animations
Real-time Editing: Modify existing diagrams through conversation

Installation

As Claude Code Plugin

# Clone the repository
git clone https://github.com/GBSOSS/ai-drawio.git

# Create symlink to Claude Code plugins directory
ln -s "$(pwd)/ai-drawio" ~/.claude/plugins/ai-drawio

Or manually add to your Claude Code settings (~/.claude/settings.json):

{
  "plugins": [
    "/path/to/ai-drawio"
  ]
}

Usage

Simply describe the diagram you want:

Draw a user login flowchart

Create an AWS architecture diagram with EC2, S3, RDS and Lambda

Generate a mind map about machine learning concepts

The skill will:

Generate valid draw.io XML
Create an HTML file with the embedded diagram
Start a local server and open browser to render
Take a screenshot to show the result

Triggers

The skill responds to these keywords:

draw, diagram, flowchart, architecture, mindmap
Chinese: 画图, 流程图, 架构图

Example Output

Simple Flowchart

Users → Cloudflare → Load Balancer → API Gateway → Microservices

Complex Architecture

20+ nodes with multiple shapes (ellipse, rectangle, cylinder)
Multiple connection types (solid, dashed, colored)
Grouping/containers (Service Mesh border)
Color-coded components

How It Works

XML Generation: Creates draw.io compatible mxGraph XML
HTML Embedding: Wraps XML in HTML with diagrams.net viewer iframe
Local Server: Starts Python HTTP server to serve the file
Browser Automation: Opens Chrome and navigates to the diagram

Requirements

Claude Code with browser automation (Claude in Chrome MCP)
Python 3.x (for local HTTP server)
Internet connection (for diagrams.net viewer)

File Structure

ai-drawio/
├── .claude-plugin/
│   └── plugin.json          # Plugin configuration
├── skills/
│   └── diagram-generator/
│       └── SKILL.md         # Core skill instructions
├── README.md
└── LICENSE

Supported Shapes

Basic Shapes

Rectangle (Process): rounded=1;whiteSpace=wrap;html=1;
Diamond (Decision): rhombus;whiteSpace=wrap;html=1;
Ellipse (Start/End): ellipse;whiteSpace=wrap;html=1;
Cylinder (Database): shape=cylinder3;

AWS Shapes

shape=mxgraph.aws4.ec2
shape=mxgraph.aws4.s3
shape=mxgraph.aws4.rds
shape=mxgraph.aws4.lambda
shape=mxgraph.aws4.api_gateway

Color Palette

Purpose	Fill Color	Stroke Color
Start/Success	#d5e8d4	#82b366
Process/Info	#dae8fc	#6c8ebf
Decision/Warning	#fff2cc	#d6b656
Error/Stop	#f8cecc	#b85450

Credits

Inspired by next-ai-draw-io by Dayuan Jiang.

License

MIT License - see LICENSE file.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Related Projects

next-ai-draw-io - Original web-based implementation

ai-drawio

Popularity

What's Inside

README