Anmelden
bahayonghang

drawio

by @bahayonghang in AI & LLM
9
0
# Install this skill:
npx skills add bahayonghang/drawio-skills --skill "drawio"

Install specific skill from multi-skill repository

# Description

AI-powered Draw.io diagram generation with Design System, 3 workflows, and real-time browser preview

# SKILL.md

name: drawio
version: 2.0.0
description: AI-powered Draw.io diagram generation with Design System, 3 workflows, and real-time browser preview
category: visual-design
tags: [diagram, flowchart, architecture, drawio, design-system]

Draw.io Skill

AI-powered Draw.io diagram generation with real-time browser preview for Claude Code.

Quick Start

What you want to do Command Description
Create new diagram /drawio-create Natural language β†’ diagram
Replicate image /drawio-replicate Image β†’ A-H β†’ diagram
Edit diagram /drawio-edit Modify existing diagram

Tip: You can also use natural language keywords like "create", "replicate", "edit" to trigger workflows.

Features

  • Design System - Unified visual language with themes, tokens, and semantic shapes
  • Real-time Preview - Diagrams update in browser as Claude creates them
  • Version History - Restore previous diagram versions
  • Natural Language - Describe diagrams in plain text
  • Cloud Architecture - AWS, GCP, Azure with official icons
  • Animated Connectors - Dynamic connector animations
  • Semantic Shapes - Auto-select shapes based on node type
  • Math Typesetting - LaTeX/AsciiMath equations in labels
  • IEEE Academic Style - Publication-ready diagrams

Design System

The skill includes a unified design system providing consistent visual language:

Themes

Theme Use Case
Tech Blue Software architecture, DevOps (default)
Academic Color ⭐ Academic papers, research (recommended)
Academic IEEE grayscale print only
Nature Environmental, lifecycle diagrams
Dark Mode Presentations, slides

Semantic Shapes

Automatic shape selection based on node type:

nodes:
  - id: api
    label: API Gateway
    type: service     # β†’ Rounded rectangle

  - id: db
    label: User Database
    type: database    # β†’ Cylinder

  - id: check
    label: Valid?
    type: decision    # β†’ Diamond

Typed Connectors

Type Style Usage
primary Solid 2px, filled arrow Main flow
data Dashed 2px, filled arrow Data/async flow
optional Dotted 1px, open arrow Weak relation
dependency Solid 1px, diamond Dependencies

8px Grid System

All spacing and positions align to 8px grid for professional results:
- Node margin: 32px minimum
- Container padding: 24px
- Canvas padding: 32px

β†’ Full Design System Documentation

Installation

MCP server auto-configures on first use:

{
  "command": "npx",
  "args": ["--yes", "@next-ai-drawio/mcp-server@latest"]
}

Default port: 6002 (auto-increments if in use)

For manual setup, see scripts/.

MCP Tools

Tool Description
start_session Opens browser with real-time preview
create_new_diagram Create diagram from XML
edit_diagram Edit by ID-based operations
get_diagram Get current diagram XML
export_diagram Save to .drawio file

Details: docs/mcp-tools.md

Workflows

/drawio-create - Create from Scratch

Create diagrams from natural language descriptions.

/drawio-create a login flowchart with validation and error handling

A-H format: Optional (use --structured for complex diagrams)

β†’ Full workflow

/drawio-replicate - Replicate Existing

Recreate images/screenshots using structured A-H extraction.

/drawio-replicate
γ€ι’†εŸŸγ€‘θ½―δ»ΆζžΆζž„
[Upload image]

A-H format: Required

β†’ Full workflow

/drawio-edit - Modify Diagram

Edit existing diagrams with natural language instructions.

/drawio-edit
Change "User Service" to "Auth Service"
Make database nodes green

A-H format: Optional (use for structural changes)

β†’ Full workflow

Documentation

Design System

Topic File
Design System Overview docs/design-system/README.md
Design Tokens docs/design-system/tokens.md
Themes docs/design-system/themes.md
Semantic Shapes docs/design-system/shapes.md
Connectors docs/design-system/connectors.md
Icons docs/design-system/icons.md
Formulas docs/design-system/formulas.md
Specification Format docs/design-system/specification.md

Reference

Topic File
Math Typesetting docs/math-typesetting.md
IEEE Diagrams docs/ieee-diagrams.md
Usage Examples docs/examples.md
XML Format docs/xml-format.md
MCP Tools docs/mcp-tools.md

Architecture

Claude Code <--stdio--> MCP Server <--http--> Browser (draw.io)
  1. Ask Claude to create a diagram
  2. Claude calls start_session to open browser
  3. Claude generates diagram XML
  4. Diagram appears in real-time!

Troubleshooting

Issue Solution
"d.setId is not a function" Use numeric mxCell IDs only
Port already in use Server auto-tries ports 6002-6020
"No active session" Call start_session first
Browser not updating Check URL has ?mcp= parameter
Math not rendered Enable Extras > Mathematical Typesetting

License & Author

  • License: Apache-2.0
  • Author: DayuanJiang
  • Skill Version: 1.1.0

# Related Skills

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

⚑ Amp πŸš€ Antigravity πŸ€– Claude Code πŸ¦€ Clawdbot πŸ“ Codex ▢️ Cursor πŸ€– Droid πŸ’Ž Gemini CLI πŸ™ GitHub Copilot πŸͺΏ Goose πŸ“Š Kilo Code πŸ”§ Kiro CLI πŸ’» OpenCode 🦘 Roo Code 🌲 Trae πŸ„ Windsurf

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.