draw.io Diagram Skill

1. Basic Rules

• Edit only .drawio files
• Do not directly edit .drawio.png files
• Use auto-generated .drawio.png by pre-commit hook in slides

2. Font Settings

For diagrams used in Quarto slides, specify defaultFontFamily in mxGraphModel tag:

<mxGraphModel defaultFontFamily="Noto Sans JP" ...>

Also explicitly specify fontFamily in each text element's style attribute:

style="text;html=1;fontSize=27;fontFamily=Noto Sans JP;"

3. Conversion Commands

See conversion script at scripts/convert-drawio-to-png.sh.

# Convert all .drawio files
mise exec -- pre-commit run --all-files

# Convert specific .drawio file
mise exec -- pre-commit run convert-drawio-to-png --files assets/my-diagram.drawio

# Run script directly (using skill's script)
bash ~/.claude/skills/draw-io/scripts/convert-drawio-to-png.sh assets/diagram1.drawio

Internal command used:

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

Option	Description
-x	Export mode
-f png	PNG format output
-s 2	2x scale (high resolution)
-t	Transparent background
-o	Output file path

4. Layout Adjustment

4.1. Coordinate Adjustment Steps

1. Open .drawio file in text editor (plain XML format)
2. Find mxCell for element to adjust (search by value attribute for text)
3. Adjust coordinates in mxGeometry tag
   • x: Position from left
   • y: Position from top
   • width: Width
   • height: Height
4. Run conversion and verify

4.2. Coordinate Calculation

• Element center coordinate = y + (height / 2)
• To align multiple elements, calculate and match center coordinates

5. Design Principles

5.1. Basic Principles

• Clarity: Create simple, visually clean diagrams
• Consistency: Unify colors, fonts, icon sizes, line thickness
• Accuracy: Do not sacrifice accuracy for simplification