Diagram Drawio

draw.io図作成ガイドライン

目次

• 事前準備チェックリスト
• 図の設計原則
  • 段階的開示（Progressive Disclosure）
  • 図の種類と用途
  • シンプルさの原則
• 凡例ルール
  • 線のスタイル
  • 矢印の方向
  • 色の意味（統一ルール）
• メタデータ
  • 推奨メタデータ
• 必須ルール
  • 1. フォント設定（最重要）
  • 2. 矢印の配置（背面配置）
  • 3. テキストサイズと余白
• 図の種類別ガイドライン
  • フローチャート
  • シーケンス図
  • アーキテクチャ図
  • ER図
  • AWSアーキテクチャ図
• スタイル設定テンプレート
  • 基本ノード
  • 矢印スタイル
• 完全なXMLテンプレート
• 出力方法
• よくある問題と対処法

事前準備チェックリスト

図を作成する前に以下を確認する。

• 目的の明確化: この図で何を伝えたいか？
• 対象者の特定: 誰が見る図か？（技術者 / 非技術者 / 経営層）
• 抽象度の決定: どの程度の詳細が必要か？
• 図の種類選択: 目的に最も合う図の種類は？

図の設計原則

段階的開示（Progressive Disclosure）

複雑なシステムは階層化して表現する。

Context図（全体俯瞰）
    ↓
System図（主要コンポーネント）
    ↓
Component図（詳細構成）
    ↓
Sequence図（処理フロー）

図の種類と用途

シンプルさの原則

• 1つの図に詰め込みすぎない
• 1図1目的を心がける
• 詳細は別図に分離する

凡例ルール

線のスタイル

矢印の方向

• 矢印はデータや制御の流れ方向を示す。
• 双方向は避け、単方向矢印×2で表現

色の意味（統一ルール）

メタデータ

図にはメタデータを含める。

<diagram name="[タイトル] - v1.0 - YYYY-MM-DD" id="unique-id">

推奨メタデータ

• タイトル: 図の目的を表す名前
• バージョン: v1.0, v1.1など
• 更新日: YYYY-MM-DD形式
• 作成者:（コメントで記載）

必須ルール

1. フォント設定（最重要）

defaultFontFamilyだけでは不十分。各テキスト要素に明示的にfontFamilyを追加する。

<!-- mxGraphModelにデフォルトフォントを設定 -->
<mxGraphModel defaultFontFamily="Hiragino Sans" ...>

<!-- 各テキスト要素にも明示的に設定 -->
<mxCell value="テキスト" style="...;fontFamily=Hiragino Sans;..." />

推奨フォント:

draw.ioでPNG出力する際、ユーザーのOSに対応するフォントを使用してください。

2. 矢印の配置（背面配置）

矢印はXMLの先頭（root直下の最初）に配置する。 これにより、矢印が他の要素の背面に表示される。

<root>
  <mxCell id="0"/>
  <mxCell id="1" parent="0"/>

  <!-- 矢印を先に配置（最背面） -->
  <mxCell id="arrow1" style="edgeStyle=..." edge="1" .../>
  <mxCell id="arrow2" style="edgeStyle=..." edge="1" .../>

  <!-- その後にノードを配置（前面） -->
  <mxCell id="node1" style="rounded=..." vertex="1" .../>
  <mxCell id="node2" style="rounded=..." vertex="1" .../>
</root>

3. テキストサイズと余白

図の種類別ガイドライン

フローチャート

• 開始/終了: 角丸矩形（fillColor=#dae8fc, strokeColor=#6c8ebf）
• 処理: 矩形（fillColor=#d5e8d4, strokeColor=#82b366）
• 条件分岐: ダイアモンド（fillColor=#fff2cc, strokeColor=#d6b656）
• 入出力: 平行四辺形

シーケンス図

• アクター: stickman形状
• ライフライン: 縦の破線
• メッセージ: 水平矢印（ラベル付き）

アーキテクチャ図

• コンポーネント間の距離: 最低50px
• グループ化: swimlaneまたはcontainer使用
• 色分け: レイヤーごとに統一した配色

ER図

• エンティティ: 矩形（タイトル行 + 属性リスト）
• リレーションシップ: ダイアモンドor線のみ
• カーディナリティ: 矢印のスタイルで表現

AWSアーキテクチャ図

• AWSアイコン: references/aws-icons.md を参照
• VPC/Subnet: グループ形状で境界を表現
• 色分け: AWSカテゴリ別の公式カラーを使用（Compute=#ED7100, Storage=#7AA116など）

スタイル設定テンプレート

基本ノード

<!-- 角丸矩形 -->
<mxCell value="処理" style="rounded=1;whiteSpace=wrap;html=1;fontSize=18;fontFamily=Hiragino Sans;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
</mxCell>

<!-- ダイアモンド（条件分岐） -->
<mxCell value="条件" style="rhombus;whiteSpace=wrap;html=1;fontSize=18;fontFamily=Hiragino Sans;" vertex="1" parent="1">
  <mxGeometry x="100" y="200" width="80" height="80" as="geometry"/>
</mxCell>

矢印スタイル

<!-- 基本矢印 -->
<mxCell style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=14;fontFamily=Hiragino Sans;" edge="1" parent="1" source="node1" target="node2">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

完全なXMLテンプレート

詳細は references/xml-templates.md を参照。

<mxfile host="app.diagrams.net">
  <diagram name="Page-1" id="diagram1">
    <mxGraphModel dx="1434" dy="836" 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="Hiragino Sans">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <!-- 矢印（最背面）-->
        <!-- ノード（前面）-->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

出力方法

1. .drawioファイルとして保存: プロジェクト内に保存し、draw.ioで編集可能
2. ターミナル出力: XMLをコピーしてdraw.ioに貼り付け可能

PNG変換コマンド:

drawio -x -f png -o output.png input.drawio

よくある問題と対処法