Claude Skill: draw.io Diagram Generator

A Claude Code skill for generating high-quality draw.io diagrams with proper font settings, arrow placement, and Japanese text support.

Features

• Font Management: Ensures fontFamily is set on all text elements
• Arrow Layering: Correct Z-order placement (arrows behind boxes)
• Japanese Text Support: Proper width allocation for CJK characters
• PNG Validation: Pre-commit hooks for automatic PNG generation
• Best Practices: Comprehensive checklist and examples

Installation

Plugin Installation (Recommended)

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

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

Manual Installation

Clone to your Claude Code skills directory:

# Global (personal use)
git clone https://github.com/ekusiadadus/draw-mcp ~/.claude/skills/draw-io

# Project-specific
git clone https://github.com/ekusiadadus/draw-mcp .claude/skills/draw-io

Usage

Once installed, Claude Code will automatically use this skill when you ask to create draw.io diagrams.

Example Prompts

Create a simple flowchart showing: Start -> Process -> End

Draw an architecture diagram with Web Server, API, and Database

Create a sequence diagram for user login flow

Manual Trigger

If needed, you can explicitly request the skill:

Using the draw-io skill, create a flowchart for the authentication process

Requirements

draw.io CLI (for PNG export)

macOS:

brew install --cask drawio

Linux: Download from draw.io Desktop Releases

Python (for tests and validation)

pip install pytest

Project Structure

draw-mcp/
├── .claude-plugin/
│   ├── plugin.json          # Plugin manifest
│   └── marketplace.json     # Marketplace configuration
├── skills/
│   └── draw-io/
│       ├── SKILL.md         # Main skill definition
│       ├── reference.md     # XML structure reference
│       ├── examples.md      # Production-ready examples
│       └── checklist.md     # Validation checklist
├── scripts/
│   └── convert-drawio-to-png.sh
├── tests/
│   └── test_drawio_skill.py
├── docs/
│   └── RULE.md
├── .pre-commit-config.yaml
├── .gitignore
├── LICENSE
└── README.md

Key Rules

1. Font Settings

<!-- In mxGraphModel -->
<mxGraphModel defaultFontFamily="Noto Sans JP" ...>

<!-- In EVERY text element -->
<mxCell style="...fontFamily=Noto Sans JP;fontSize=18;..." />

2. Arrow Placement

Arrows must be declared FIRST in XML to render behind other elements:

<root>
  <!-- Arrows first (background) -->
  <mxCell id="arrow1" edge="1" ... />

  <!-- Boxes after (foreground) -->
  <mxCell id="box1" vertex="1" ... />
</root>

3. Japanese Text Width

Allocate 30-40px per Japanese character:

<!-- 6 characters × 35px = 210px -->
<mxGeometry width="220" ... />

4. PNG Verification

Always export to PNG and verify visually:

drawio -x -f png -s 2 -t -o diagram.png diagram.drawio

Pre-commit Hooks

This project includes pre-commit hooks for:

1. XML Validation: Check font settings and structure
2. PNG Conversion: Auto-generate PNG on commit
3. Python Tests: Run skill validation tests

Setup:

pip install pre-commit
pre-commit install

Running Tests

# Run all tests
pytest tests/ -v

# Run specific test file
pytest tests/test_drawio_skill.py -v

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests: pytest tests/ -v
5. Submit a pull request

License

MIT License - see LICENSE

Related Resources

• draw.io Desktop
• Claude Code Documentation
• draw.io XML Format Reference

Changelog

v1.0.0 (2025-12-16)

• Initial release
• Core skill with font, arrow, and text handling
• Pre-commit hooks for validation
• Comprehensive documentation and examples