draw-io

# 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: ```xml <mxGraphModel defaultFontFamily="Noto Sans JP" ...> ``` Also explicitly specify `fontFamily` in each text element's style attribute: ```xml style="text;html=1;fontSize=27;fontFamily=Noto Sans JP;" ``` ## 3. Conversion Commands See conversion script at [scripts/convert-drawio-to-png.sh](scripts/convert-drawio-to-png.sh). ```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: ```sh 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`:...