draw-io

# 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:

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

## Core Rules

### Font Settings

```xml
<!-- In mxGraphModel -->
<mxGraphModel defaultFontFamily="Noto Sans JP" page="0" ...>

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

### Arrow Placement (Z-Order)

Arrows must be declared FIRST to render behind other elements:

```xml
<root>
  <mxCell id="0" />
  <mxCell id="1" parent="0" />

  <!-- ARROWS FIRST (renders at back) -->
  <mxCell id="arrow1" edge="1" ... />

  <!-- BOXES AFTER (renders in front) -->
  <mxCell id="box1" vertex="1" ... />
</root>
```

### Label-Arrow Spacing

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

```xml
<!-- Arrow at Y=220 -->
<mxCell id="arrow">
  <mxGeometry>
    <mxPoint y="220" as="sourcePoint"/>
  </mxGeometry>
</mxCell>

<!-- Label at Y=180 (40px above arrow) - CORRECT -->
<mxCell id="label" value="Process">
  <mxGeometry y="180" width="60" height="20" />
</mxCell>
```

### Japanese Text Width

Allocate sufficient width to prevent unwanted line breaks:

```xml
<!-- 8 Japanese characters × 35px = 280px minimum -->
<mxCell id="title" value="シンプルなフロー図">
  <mxGeometry width="300" height="40" />
</mxCell>
```

## Instruction Template

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

1. Understand the diagram requirements
2. Plan the layout (positions, connections)
3. Generate XML with all rules applied
4. Suggest PNG veri