🎯

draw-io

🎯Skill

from ekusiadadus/draw-mcp

What it does

Generates precise draw.io diagrams with advanced XML configuration, supporting complex layouts, fonts, and Japanese text.

📦

Part of

ekusiadadus/draw-mcp(3 items)

draw-io

Installation

Add MarketplaceAdd marketplace to Claude Code

/plugin marketplace add ekusiadadus/draw-mcp

Claude CodeAdd plugin in Claude Code

/plugin add https://github.com/ekusiadadus/draw-mcp

git cloneClone repository

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

git cloneClone repository

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

pip installInstall Python package

pip install pytest

+ 1 more commands

📖 Extracted from docs: ekusiadadus/draw-mcp

Need more details? View full documentation on GitHub →

6Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Generate and edit draw.io diagrams in XML format with proper font settings, arrow placement, and Japanese text support. Use when creating flowcharts, architecture diagrams, sequence diagrams, or any visual diagrams in .drawio format. Handles font family settings, arrow layering, text sizing, and PNG export validation.

Overview

# draw.io Diagram Generation Skill

Overview

This skill enables Claude Code to generate high-quality draw.io diagrams by directly editing XML. It addresses common pitfalls when generating draw.io files programmatically.

Quick Start

When creating a draw.io diagram:

Set defaultFontFamily in mxGraphModel
Add fontFamily=FontName; to ALL text element styles
Use fontSize=18 or larger for readability
Place arrows (edges) BEFORE boxes (vertices) in XML
Allocate 30-40px width per Japanese character
Set page="0" for transparent background
Verify with PNG export

Core Rules

Font Settings

```xml

```

Arrow Placement (Z-Order)

Arrows must be declared FIRST to render behind other elements:

```xml

```

Label-Arrow Spacing

Labels must be at least 20px away from arrow lines:

```xml

```

Japanese Text Width

Allocate sufficient width to prevent unwanted line breaks:

```xml

```

Instruction Template

When asked to create a draw.io diagram, use this approach:

Understand the diagram requirements
Plan the layout (positions, connections)
Generate XML with all rules applied
Suggest PNG verification command

PNG Verification

Always recommend PNG export for visual verification:

```bash

# macOS

drawio -x -f png -s 2 -t -o output.png input.drawio

open output.png

# Linux

drawio -x -f png -s 2 -t -o output.png input.drawio

xdg-open output.png

```

Supporting Files

[reference.md](reference.md) - Complete XML structure reference
[examples.md](examples.md) - Production-ready diagram examples
[checklist.md](checklist.md) - Pre-commit validation checklist

More from this repository2

🔌

draw-io🔌Plugin

Generate high-quality draw.io diagrams with Claude Code. Handles font settings, arrow layering, Japanese text, and PNG export validation.

🏪

ekusiadadus-draw-mcp🏪Marketplace

Marketplace with 1 plugins