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

注：draw.io CLI のフラグとエクスポートオプションについては、drawio-skills スキルを参照してください。

4. レイアウトの調整

• テキストエディターで .drawio を開き、value 属性で mxCell を検索します
• mxGeometry の x（左）、y（上）、width、height を調整します
• 要素の中心 = y + (height / 2)。中心を揃えると、要素を整列できます

5. カラーパレットとレイアウトパターン

自動更新可能な参考ファイル（更新手順についてはセクション 10 を参照してください）：

• カラーパレット - マテリアルデザインの色と使用ルール
• レイアウトガイドライン - パターンカタログ（A-K）と AWS のレイアウトルール

6. デザイン原則

6.1. スライド図表の制約（1920x1080）

• 必須：page="0"（背景を透明にする）を設定します
• 必須：すべてのテキストに fontFamily=Noto Sans JP を使用します
• 必須：図表ごとにアクセントカラーを 1～3 色に制限します
• 必須：下部に要点バー（Note または Primary カラー）を配置します

6.2. 基本原則

• 明瞭さ、一貫性、正確さ
• すべての要素にラベルを付け、方向を矢印で示します（一方向を推奨）
• 1 つの図表につき 1 つの概念を扱います。複雑なシステムは段階ごとの図表に分割します
• 色のコントラストを確保し、色に加えてパターンも使用します

6.3. 関連図表セットの一貫性

• 必須：関連する図表間でキャンバス幅、色、フォント、線幅を統一します
• 図表を作成する前に、図表セットの仕様を定義します
• 完成後、並べて確認します

7. ベストプラクティス

7.1. 一般

• background="#ffffff" を削除します（透明にするとテーマに合わせて表示されます）
• フォントサイズ：読みやすさのため標準の 1.5 倍（約 18px）
• 日本語テキスト：1 文字あたり 30～40px の幅を確保します
• キャンバスサイズ：Zenn の記事では 800px 以下、スライドでは 1920x1080
• フォントサイズを大きくする場合は、キャンバスも比例して拡大します

7.2. 矢印

• 構造を示す矢印（フローチャート、ER）：XML では Title の直後に配置します（背面レイヤー）
• バッジに関連付ける矢印（ナビゲーション）：XML の最後に配置します（前面レイヤー）
• 矢印の始点と終点は、ラベルの下端から少なくとも 20px 離します
• テキスト要素の場合は、sourcePoint／targetPoint を明示的に使用します（exitX/exitY は機能しません）
• エッジラベルのオフセット：<mxPoint x="0" y="-40" as="offset"/>（負の値 = 上）
• 双方向：startArrow=classic;endArrow=classic;startFill=1;endFill=1 を設定します
• 矢印の先端が重なる形（><）を避けるため、間隔を最低 80～100px 確保します
• 図表内で矢印の長さを統一します
• エッジラベル：labelBackgroundColor=#ffffff を指定し、<root> の末尾に <mxCell> を配置します

7.3. コンテナーと間隔

• 内部要素：フレーム境界から少なくとも 30px の余白を確保します
• 親コンテナーのラベルとの間隔：最初の子要素の Y >= parent.y + spacingTop + fontSize + 10 （fontSize >= 24px の場合は、fontSize * 1.5 を使用します）
• ラベルのパディング：ボックスのスタイルに spacingLeft=8;spacingTop=8 を追加します
• コンテナー内で垂直方向の対称性を保ちます（上部の余白 = 下部の余白）
• コンテナーの水平中心線に要素を揃えます

7.4. ラベル

• サービス名のみ：1 行。補足情報がある場合：<br> を使って 2 行にします
• 冗長な表記を削除します（例：「ECR Container Registry」→「ECR」）
• 文脈に関係のない装飾アイコンを削除します

7.5. Zオーダー（XML のドキュメント順序 ＝ 描画順序）

要素の種類	XML 内の位置	理由
構造矢印	タイトルの後、ボックスの前	背面レイヤー
背景／ボックス	中間	ベースレイヤー
バッジ	ボックスの後	前面レイヤー
バッジの矢印	バッジの後	最前面レイヤー
エッジラベル	<root> の末尾	常に表示

8. 参考資料

• カラーパレット - 自動更新可能
• レイアウトガイドライン - 自動更新可能
• AWS アイコン
• AWS アイコン検索スクリプト

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

9. ワークフローとチェックリスト

9.1. フェーズ 0：設計

• 図ごとに概念を 1 つにする
• 参考画像を確認し、内容を理解する
• 図のセット仕様（キャンバスサイズ、色、フォント、線幅）を定義する

9.2. フェーズ 1：レイアウトの計算

• 親コンテナーのサイズを計算する
• 子要素のクリアランスを計算する（7.3 を参照）
• 対称配置の座標を計算する
• 矢印の Z オーダーを決定する（7.5 を参照）

9.3. フェーズ 2：実装

• page="0" を設定する（背景を透明にする）
• フォントサイズを適切にし、キャンバスを比例して拡大縮小する
• キャンバスの幅を対象の表示幅に合わせる
• 矢印を正しい Z オーダーにする
• ラベルのパディングを設定する（spacingLeft／spacingTop）
• 最新バージョンの AWS アイコンを使用する（mxgraph.aws4.*）

9.4. フェーズ 3：検証（PNG の確認）

Read ツールで変換し、目視で確認します。

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

• XML だけを根拠に「問題なし」と決して判断しないでください。必ず PNG を目視で確認してください
• 参考画像を表示できない場合は、正直に報告してください

確認項目：

• 要素がフレームからはみ出していない（余白 30px 以上）
• 矢印がラベルと重なったり、ボックスに食い込んだりしていない
• 双方向矢印が >< ではなく <--> に見える
• テキストが途中で切れたり、欠けたりしていない
• 矢印の長さが均一である
• バッジ／矢印が対称に配置されている
• 親ラベルと子要素が交差していない
• エッジラベルが表示されている（<root> の末尾に配置）
• 図のセットに一貫性がある（横並びで確認）

問題が見つかった場合は、XML を修正し、変換の手順からやり直します。

10. 自動更新プロトコル

新しい .drawio ファイルの作成に伴って更新される、自動更新可能なファイル：

ファイル	更新可能性
references/color-palette.md	更新可能
references/layout-guidelines.md	更新可能
SKILL.md section 7	追記可能
SKILL.md section 9	追記可能

.drawio ファイルの作成／編集後に実行します：

1. すべての mxCell 要素からスタイル属性を解析する
2. 新しい色を検出し、意味上の役割とともに color-palette.md に追加する
3. 新しいレイアウトパターンを検出し、layout-guidelines.md に追加する
4. 新しいベストプラクティスやチェック項目を検出し、SKILL.md に追記する
5. メタデータ（最終更新日時、ソースファイル）を更新する

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

モバイルで画像を正しく表示するため、YAML ヘッダーに auto-stretch: false を追加します。

format:
  revealjs:
    auto-stretch: false