Draw.io Diagram Skill
draw.ioファイル（.drawio）をXML形式で直接作成・編集するためのスキル。
XML基本構造
<mxfile host="app.diagrams.net" modified="2024-01-01T00:00:00.000Z" agent="Claude" version="21.0.0">
<diagram name="Page-1" id="page-1">
<mxGraphModel dx="1000" dy="600" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0" defaultFontFamily="Noto Sans JP">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<!-- 図形要素をここに追加 -->
</root>
</mxGraphModel>
</diagram>
</mxfile>
mxCell要素
矩形（Rectangle）
<mxCell id="rect-1" value="ラベル" style="rounded=0;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>
角丸矩形（Rounded Rectangle）
<mxCell id="rounded-1" value="ラベル" style="rounded=1;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;arcSize=20;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>
楕円（Ellipse）
<mxCell id="ellipse-1" value="ラベル" style="ellipse;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="120" height="80" as="geometry" />
</mxCell>
ひし形（Diamond）
<mxCell id="diamond-1" value="条件" style="rhombus;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="100" height="100" as="geometry" />
</mxCell>
テキスト（Text Only）
<mxCell id="text-1" value="テキスト" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontFamily=Noto Sans JP;fontSize=18;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="120" height="30" as="geometry" />
</mxCell>
矢印・コネクタ
基本の矢印
<mxCell id="arrow-1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Noto Sans JP;fontSize=14;" edge="1" parent="1" source="rect-1" target="rect-2">
<mxGeometry relative="1" as="geometry" />
</mxCell>
ラベル付き矢印
<mxCell id="arrow-2" value="ラベル" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Noto Sans JP;fontSize=14;" edge="1" parent="1" source="rect-1" target="rect-2">
<mxGeometry relative="1" as="geometry" />
</mxCell>
点線矢印
<mxCell id="arrow-3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;fontFamily=Noto Sans JP;fontSize=14;" edge="1" parent="1" source="rect-1" target="rect-2">
<mxGeometry relative="1" as="geometry" />
</mxCell>
スタイル設定ガイド
フォント設定（必須）
mxGraphModelにdefaultFontFamily="Noto Sans JP"を設定- すべてのテキスト要素に
fontFamily=Noto Sans JP;を明示的に追加
推奨設定
| 項目 | 推奨値 | 説明 |
|---|---|---|
| fontSize | 18 | 標準の1.5倍、視認性向上 |
| 日本語テキスト幅 | 30-40px/文字 | レイアウト計算用 |
| 矢印とラベル間隔 | 20px以上 | 重なり防止 |
色設定
fillColor=#ffffff; # 塗りつぶし色
strokeColor=#000000; # 枠線色
fontColor=#333333; # 文字色
よく使う色
| 用途 | 色コード |
|---|---|
| 白背景 | #ffffff |
| 薄い青 | #dae8fc |
| 薄い緑 | #d5e8d4 |
| 薄い黄 | #fff2cc |
| 薄い赤 | #f8cecc |
| 薄いグレー | #f5f5f5 |
配置ルール
XMLの記述順 = 描画順
- 先に書いたものが背面に配置される
- 矢印は図形より先（XMLの先頭側）に記述して最背面に配置
推奨構造
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<!-- 1. 矢印・コネクタ（最背面） -->
<mxCell id="arrow-1" ... edge="1" ... />
<mxCell id="arrow-2" ... edge="1" ... />
<!-- 2. 図形（中間） -->
<mxCell id="rect-1" ... vertex="1" ... />
<mxCell id="rect-2" ... vertex="1" ... />
<!-- 3. テキストラベル（最前面） -->
<mxCell id="text-1" ... vertex="1" ... />
</root>
PNG変換
drawio CLIコマンド
drawio -x -f png -s 2 -t -o output.png input.drawio
| オプション | 説明 |
|---|---|
| -x | エクスポートモード |
| -f png | PNG形式 |
| -s 2 | 2倍スケール（高解像度） |
| -t | 透明背景 |
| -o | 出力ファイル指定 |
検証チェックリスト
作成後、以下を確認：
- mxGraphModelにdefaultFontFamilyが設定されているか
- 全テキスト要素にfontFamilyが明示的に設定されているか
- fontSizeは18px程度か（視認性）
- 矢印がXMLの先頭側に配置されているか（最背面）
- 矢印とラベルの間隔は20px以上か
- 日本語テキストの幅は十分か（30-40px/文字）
- PNG出力で視覚確認したか
テンプレート
基本テンプレートは templates/basic.drawio を参照。