draw-io

Original：🇺🇸 English

Translated

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.

1installs

Sourceekusiadadus/draw-mcp

Added on2026-02-09

NPX Install

npx skill4agent add ekusiadadus/draw-mcp draw-io

SKILL.md Content

View Translation Comparison →

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

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

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 - Complete XML structure reference
examples.md - Production-ready diagram examples
checklist.md - Pre-commit validation checklist