draw-mcp

draw-mcp — AI-Generated draw.io XML Quality Standard

A Claude Code skill and CLI validator for generating high-quality draw.io diagrams. 31 validation rules across 10 modules, 4 validation modes, preset system, and CI-ready tooling.

Positioning

Feature	draw-mcp	draw.io MCP Server	Mermaid.js
Output	Native XML	Image/JSON	Text DSL
Layout control	Pixel-perfect	Auto-layout	Auto-layout
Japanese text	Full support	Limited	No control
Validation	31 rules, 4 modes	None	Syntax only
Presets	YAML-based	None	None
Offline	Yes	Optional	Yes
Best for	Production diagrams	Quick previews	Simple flows

draw-mcp is a Claude Code XML generation skill with strict validator and style guide. The official draw.io MCP server is complementary (use it for previews, Mermaid, CSV). draw-mcp focuses on quality for production diagrams.

Supported Features

Features backed by validator rules, tests, and real examples:

• 31 Validation Rules across 10 modules (defined in claims.yaml)
• 4 Validation Modes: loose, standard, strict, production
• CLI Tool: draw-mcp-validate with text/JSON output, severity filtering, and mode selection
• Preset System: YAML-based presets as validation profiles (--preset)
• Font Management: Enforces fontFamily on all text elements
• Edge Routing: Z-order, relative geometry, arrowhead spacing, node spacing
• Containers: Swimlane, group, custom containers with pointer events
• Layers: Layer structure validation, cross-layer edge detection
• Endpoint Semantics: Source/target validity, floating/orphan edge detection
• Security: Dangerous HTML tag detection, control character validation
• Japanese Text: Width allocation for CJK characters
• CI Integration: GitHub Actions, pre-commit hooks, 153+ tests

Experimental Features

Features documented but not deeply validated:

• Advanced routing heuristics (crossing density, edit tolerance)
• Custom connection-point presets
• PRODUCTION mode auto-detection of preset from example metadata

Non-Goals

Features explicitly out of scope:

• Hosted preview (use draw.io desktop or VS Code extension)
• Mermaid or CSV conversion (use official jgraph/drawio-mcp)
• Dark mode / lightbox runtime options
• Browser tab or editor orchestration
• Auto-layout (use draw.io's built-in layout engines)

Quick Start

Plugin Installation

# Via Claude Code marketplace
/plugin marketplace add ekusiadadus/draw-mcp

# Or install directly
/plugin add https://github.com/ekusiadadus/draw-mcp

Manual Installation

git clone https://github.com/ekusiadadus/draw-mcp ~/.claude/skills/draw-io

CLI Validator

pip install -e ".[dev]"

# Validate a file (default: standard mode)
draw-mcp-validate diagram.drawio

# Specify validation mode
draw-mcp-validate diagram.drawio --mode strict

# JSON output
draw-mcp-validate diagram.drawio --format json

# Errors only
draw-mcp-validate diagram.drawio --severity error

Usage

Once installed, Claude Code uses this skill automatically for draw.io diagrams.

Create a simple flowchart showing: Start -> Process -> End
Draw an architecture diagram with swimlane containers
Create a layered diagram with infrastructure and application layers

Validation Modes

Mode	Purpose	Rule Count
loose	Minimal parseability check	5
standard	Default development mode	22
strict	PR and CI review	31
production	Team-shared artifacts + preset compliance	31

Rule counts are defined in claims.yaml and verified by CI.

Validation Rules (31)

Module	Rules	Mode	Default Severity
structure	root-cells, hierarchy, vertex-edge-exclusivity, parent-reference, unique-ids	LOOSE	ERROR
style	trailing-semicolon, boolean-values, typo, font-family	STANDARD	Mixed
edge	z-order, relative, arrowhead-segment, node-spacing	STANDARD	Mixed
container	pointer-events, children-bounds, swimlane-start-size, collapsible	STANDARD	Mixed
text	japanese-width, html-escape, font-size	STANDARD	Mixed
export	page-setting, embed-diagram	STANDARD	Mixed
endpoint	source-validity, target-validity, floating-edge, orphan-edge	STRICT	Mixed
escape	control-chars, dangerous-tags	STRICT	Mixed
group	missing-container, connectability	STRICT	WARNING
layer	structure, cross-layer-edge	STRICT	WARNING

Project Structure