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
