# drawio

> draw.io (.drawio) 形式の図を作成・編集する際に使用。アーキテクチャ図、フローチャート、シーケンス図、ER図などの作成時に自動発動。AWS構成図のサポートあり。

- Author: Yuto Kimura
- Repository: biosugar0/dotfiles
- Version: 20260114133919
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/biosugar0/dotfiles
- Web: https://mule.run/skillshub/@@biosugar0/dotfiles~drawio:20260114133919

---

---
name: drawio
description: "draw.io (.drawio) 形式の図を作成・編集する際に使用。アーキテクチャ図、フローチャート、シーケンス図、ER図などの作成時に自動発動。AWS構成図のサポートあり。"
---

# draw.io 図作成ガイド

## 核心ルール

### 1. フォント設定
- `mxGraphModel` に `defaultFontFamily` を設定しても不十分
- **各mxCellのstyleに `fontFamily=Noto Sans JP;` を明示する**

```xml
<!-- 悪い例 -->
<mxCell style="text;html=1;fontSize=18;" />

<!-- 良い例 -->
<mxCell style="text;html=1;fontSize=18;fontFamily=Noto Sans JP;" />
```

### 2. 矢印配置
- XML記述順 = 描画順（先に書いたものが背面）
- **矢印は最初に記述して最背面に配置**

```xml
<root>
  <mxCell id="0"/>
  <mxCell id="1" parent="0"/>
  <!-- 矢印を先に（最背面） -->
  <mxCell id="arrow" style="edgeStyle=..." edge="1" parent="1">...</mxCell>
  <!-- 図形を後に（前面） -->
  <mxCell id="box" style="rounded=1;..." vertex="1" parent="1">...</mxCell>
</root>
```

### 3. ラベル配置
- **矢印とラベルは最低20px離す**
- テキスト要素への矢印接続は `exitY/entryY` が効かないことがある
- 明示的に座標を指定する

```xml
<!-- 良い例: 明示的座標指定 -->
<mxCell id="arrow" edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="190" y="300" as="sourcePoint"/>
    <mxPoint x="490" y="300" as="targetPoint"/>
  </mxGeometry>
</mxCell>
```

### 4. テキストサイズ
- **フォントサイズは標準の1.5倍（18px推奨）**
- **日本語テキストは幅を1文字あたり30-40px確保**

```xml
<!-- 悪い例: 幅不足で改行される -->
<mxGeometry x="240" y="60" width="200" height="40" />

<!-- 良い例: 十分な幅 -->
<mxGeometry x="140" y="60" width="400" height="40" />
```

### 5. 背景設定
- `page="0"` で透明背景

## XML基本構造

```xml
<mxfile host="Electron">
  <diagram name="Page-1" id="unique-id">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1"
                  tooltips="1" connect="1" arrows="1" fold="1" page="0"
                  pageScale="1" pageWidth="827" pageHeight="1169"
                  defaultFontFamily="Noto Sans JP">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <!-- ここに要素を追加 -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
```

## PNG変換コマンド

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

| オプション | 説明 |
|-----------|------|
| `-x` | エクスポートモード |
| `-f png` | PNG形式 |
| `-s 2` | 2倍スケール（高解像度） |
| `-t` | 透明背景 |
| `-o` | 出力ファイル |

## チェックリスト

作成後に確認:
- [ ] 全テキスト要素に `fontFamily` が設定されているか
- [ ] フォントサイズは18px以上か
- [ ] 矢印が最背面（XML先頭）に配置されているか
- [ ] 矢印とラベルが被っていないか（20px以上離れているか）
- [ ] 日本語テキストが意図しない改行をしていないか
- [ ] PNGで視覚確認したか

## AWS構成図

AWSアーキテクチャ図を作成する場合は `references/aws-icons.md` を参照。