draw-io

draw.io ダイアグラム スキル

1. 基本ルール

• 編集するのは .drawio ファイルのみにしてください
• .drawio.png ファイルを直接編集しないでください
• スライドでは、pre-commit フックによって自動生成された .drawio.png を使用してください

2. フォント設定

Quarto スライドで使用するダイアグラムでは、 mxGraphModel タグに defaultFontFamily を指定してください:

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

また、各テキスト要素の style 属性にも fontFamily を明示的に指定してください:

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

3. 変換コマンド

変換スクリプトは 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

内部で使用しているコマンド:

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

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

4. レイアウト調整

4.1. 座標調整の手順

1. .drawio ファイルをテキストエディタで開きます（プレーンな XML 形式です）
2. 調整したい要素の mxCell を探します（テキストの場合は value 属性で検索します）
3. mxGeometry タグの座標を調整します
   • x: 左からの位置
   • y: 上からの位置
   • width: 幅
   • height: 高さ
4. 変換を実行して確認します

4.2. 座標の計算

• 要素の中心座標 = y + (height / 2)
• 複数の要素を揃えるには、中心座標を計算して一致させてください

5. デザイン原則

5.1. 基本原則

• 明快さ: シンプルで視覚的にすっきりしたダイアグラムを作成してください
• 一貫性: 色、フォント、アイコンサイズ、線の太さを統一してください
• 正確さ: 単純化のために正確さを犠牲にしないでください

5.2. 要素のルール

• すべての要素にラベルを付けてください
• 方向を示すには矢印を使用してください （双方向の矢印より、単方向の矢印を 2 本使う方が望ましいです）
• 最新の公式アイコンを使用してください
• 独自の記号は凡例を追加して説明してください

5.3. アクセシビリティ

• 十分な色のコントラストを確保してください
• 色に加えてパターンも使用してください

5.4. 段階的な開示

複雑なシステムは段階的なダイアグラムに分割してください:

ダイアグラムの種類	目的
コンテキストダイアグラム	外部の視点から見たシステムの概要
システムダイアグラム	主要なコンポーネントとその関係
コンポーネントダイアグラム	技術的な詳細と連携ポイント
デプロイメントダイアグラム	インフラ構成
データフローダイアグラム	データの流れと変換
シーケンスダイアグラム	時系列でのやり取り

5.5. メタデータ

ダイアグラムには、タイトル、説明、最終更新日、作成者、バージョンを含めてください。

6. ベストプラクティス

6.1. 背景色

• background="#ffffff" を削除してください
• 透過背景は、さまざまなテーマに適応します

6.2. フォントサイズ

• PDF での読みやすさのため、標準のフォントサイズの 1.5 倍（約 18px）を使用してください

6.3. 日本語テキストの幅

• 1 文字あたり 30〜40px の幅を確保してください
• 幅が不足すると、意図しない改行が発生します

<mxGeometry x="140" y="60" width="400" height="40" />

6.4. 矢印の配置

• 矢印は必ず背面に配置してください（XML 内で Title の直後の位置にします）
• ラベルと重ならないように矢印を配置してください
• 矢印の始点・終点は、ラベルの下端から少なくとも 20px 離してください

<mxCell id="title" value="..." .../>


<mxCell id="arrow1" style="edgeStyle=..." .../>


<mxCell id="box1" .../>

6.5. テキストラベルへの矢印の接続

テキスト要素では exitX/exitY が機能しないため、明示的な座標を使用してください:

<mxCell id="arrow" style="..." edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="1279" y="500" as="sourcePoint"/>
    <mxPoint x="119" y="500" as="targetPoint"/>
    <Array as="points">
      <mxPoint x="1279" y="560"/>
      <mxPoint x="119" y="560"/>
    </Array>
  </mxGeometry>
</mxCell>

6.6. edgeLabel のオフセット調整

offset 属性を調整して、矢印のラベルを矢印から適切な距離に配置してください:

<mxPoint x="0" y="-40" as="offset"/>


<mxPoint x="0" y="40" as="offset"/>

6.7. 不要な要素の削除

• 文脈に関係のない装飾的なアイコンは削除してください
• 例: ECR がある場合、個別の Docker アイコンは不要です

6.8. ラベルと見出し

• サービス名のみの場合: 1 行
• サービス名 + 補足情報の場合: 改行して 2 行
• 冗長な表記（例: ECR Container Registry）は、1 行に短縮してください
• 改行には <br> タグを使用してください

6.9. 背景フレームと内部要素の配置

背景フレーム（グループボックス）の内側に要素を配置する場合は、十分な余白を確保してください。

• YOU MUST: 内部要素はフレームの境界から少なくとも 30px の余白を設ける必要があります
• YOU MUST: 角丸（rounded=1）と線の太さを考慮してください
• YOU MUST: 必ず PNG 出力を目視で確認し、はみ出しがないかチェックしてください

座標計算の検証:

Background frame: y=20, height=400 -> range is y=20-420
Internal element top: frame y + 30 or more (e.g., y=50)
Internal element bottom: frame y + height - 30 or less (e.g., up to y=390)

悪い例（はみ出す可能性あり）:

<mxCell id="bg" style="rounded=1;strokeWidth=3;...">
  <mxGeometry x="500" y="20" width="560" height="400" />
</mxCell>

<mxCell id="label" value="Title" style="text;...">
  <mxGeometry x="510" y="30" width="540" height="35" />
</mxCell>

良い例（十分な余白あり）:

<mxCell id="bg" style="rounded=1;strokeWidth=3;...">
  <mxGeometry x="500" y="20" width="560" height="430" />
</mxCell>

<mxCell id="label" value="Title" style="text;...">
  <mxGeometry x="510" y="50" width="540" height="35" />
</mxCell>

7. リファレンス

• レイアウトガイドライン
• AWS アイコン
• AWS アイコン検索スクリプト

AWS アイコン検索の例:

python ~/.claude/skills/draw-io/scripts/find_aws_icon.py ec2
python ~/.claude/skills/draw-io/scripts/find_aws_icon.py lambda

8. チェックリスト

• 背景色が設定されていない（page="0"）
• フォントサイズが適切である（大きめを推奨）
• 矢印が背面レイヤーに配置されている
• 矢印がラベルと重なっていない（PNG で確認）
• 矢印の始点・終点がラベルから十分離れている（少なくとも 20px）
• 矢印がボックスやアイコンを貫通していない（PNG で確認）
• 内部要素が背景フレームからはみ出していない（PNG で確認）
• 背景フレームと内部要素の間に 30px 以上の余白がある
• AWS サービス名が正式名称または正しい略称である
• AWS アイコンが最新版である（mxgraph.aws4.*）
• 不要な要素が残っていない
• PNG 変換後に目視で確認済みである

9. reveal.js スライドでの画像表示

YAML ヘッダーに auto-stretch: false を追加します:

---
title: "Your Presentation"
format:
  revealjs:
    auto-stretch: false
---

これにより、モバイルデバイスで画像が正しく表示されます。