draw-io

1# draw.io Diagram Skill
2 
3## 1. Basic Rules
4 
5- Edit only `.drawio` files
6- Do not directly edit `.drawio.png` files
7- Use auto-generated `.drawio.png` by pre-commit hook in slides
8 
9## 2. Font Settings
10 
11For diagrams used in Quarto slides,
12specify `defaultFontFamily` in mxGraphModel tag:
13 
14```xml
15<mxGraphModel defaultFontFamily="Noto Sans JP" ...>
16```
17 
18Also explicitly specify `fontFamily` in each text element's style attribute:
19 
20```xml
21style="text;html=1;fontSize=27;fontFamily=Noto Sans JP;"
22```
23 
24## 3. Conversion Commands
25 
26See conversion script at [scripts/convert-drawio-to-png.sh](scripts/convert-drawio-to-png.sh).
27 
28```sh
29# Convert all .drawio files
30mise exec -- pre-commit run --all-files
31 
32# Convert specific .drawio file
33mise exec -- pre-commit run convert-drawio-to-png --files assets/my-diagram.drawio
34 
35# Run script directly (using skill's script)
36bash ~/.claude/skills/draw-io/scripts/convert-drawio-to-png.sh assets/diagram1.drawio
37```
38 
39Internal command used:
40 
41```sh
42drawio -x -f png -s 2 -t -o output.drawio.png input.drawio
43```
44 
45| Option | Description |
46|--------|-------------|
47| `-x` | Export mode |
48| `-f png` | PNG format output |
49| `-s 2` | 2x scale (high resolution) |
50| `-t` | Transparent background |
51| `-o` | Output file path |
52 
53## 4. Layout Adjustment
54 
55### 4.1. Coordinate Adjustment Steps
56 
571. Open `.drawio` file in text editor (plain XML format)
582. Find `mxCell` for element to adjust (search by `value` attribute for text)
593. Adjust coordinates in `mxGeometry` tag
60…