drawio

drawio 図生成ツール

クイックスタート： <mxfile> に <diagram> を作成 → グリッド設定を含む <mxGraphModel> を定義 → セルを含む <root> を追加 → 図形とエッジに <mxCell> を使用 → <mxGeometry> でジオメトリを設定 → ```drawio フェンスで囲みます。

重要なルール

構造に関するルール

• S1：ステンシル名を確認する 🚨 ステンシル名を絶対に推測しないでください。正確な名前は stencils/README.md で確認します。誤り：mxgraph.cisco.router → 正しい例：mxgraph.cisco.routers.router
• S2：ステンシルには fillColor が必要 多くのステンシルにはデフォルトの色がありません。必ず fillColor／strokeColor を指定してください。例外：エッジ／リンクのステンシルはデバイスではなく、コネクターです。
• S3：ルートセルが必要 <mxCell id="0"/> と <mxCell id="1" parent="0"/> を含める必要があります。含めないと図がレンダリングされません。
• S4：ステンシルの下にラベルを配置 デバイスのラベルには verticalLabelPosition=bottom;verticalAlign=top;labelPosition=center;align=center; を使用します。
• S5：mxCell は兄弟要素にする すべての mxCell 要素は <root> の直下に兄弟要素として配置する必要があります。mxCell を別の mxCell の中に入れてはいけません。
• S6：コンテナーの透明化 コンテナーの図形には fillColor=none; を使用して背景を透明にし、子要素が隠れないようにします。

プリセットのカラーパレット： 青（#dae8fc、#6c8ebf） 緑（#d5e8d4、#82b366） オレンジ（#ffe6cc、#d79b00） 赤（#f8cecc、#b85450） 紫（#e1d5e7、#9673a6） 黄（#fff2cc、#d6b656） グレー（#f5f5f5、#666666）

レイアウトに関するルール

• L1：開始マージン x=40、y=40 から配置を始めます。
• L2：要素間の間隔 接続された図形間には 40～60px の間隔を確保します。ルーティング用チャネルには 150～200px の間隔を確保します。
• L3：コンパクトなレイアウト 縦方向の積み重ね、またはグリッドレイアウトを使用します。要素を離しすぎないでください。

エッジのルーティングに関するルール — 図をきれいに仕上げるために重要

• E1：経路を共有しない 同じノード間に複数のエッジがある場合、異なる出口／入口位置を使用します（exitY=0.3 と exitY=0.7 のようにし、両方を 0.5 にしないでください）。
• E2：双方向には反対側を使用 A→B：exitX=1、entryX=0。B→A：exitX=0、entryX=1。
• E3：出口／入口の位置を明示 すべてのエッジのスタイルで、exitX、exitY、entryX、entryY を指定します。
• E4：障害物を避けて経路を設定 始点と終点の間に図形がある場合は、ウェイポイントを使用します。20～30px の間隔を空けます。エッジを図形の上に通してはいけません。
• E5：まずレイアウトを計画 図形を列や行に整理します。各エッジについて、「始点と終点の間にどの図形があるか」を頭の中でたどります。
• E6：複数のウェイポイント L 字型または U 字型の経路には、2～3 個のウェイポイントを使用します。方向を変えるたびにウェイポイントが必要です。
• E7：自然な接続位置 角（entryX=1,entryY=1）は絶対に使用しないでください。上から下へ：exitY=1、entryY=0。左から右へ：exitX=1、entryX=0。
• E8：斜めのルーティング原則 離れたノードを斜めに接続する場合は、図の中央を通すのではなく、図の外周に沿って経路を設定します。中央にはほかの図形がある可能性があります。

生成前のチェックリスト

1. エッジが始点／終点以外の図形の上を通っていませんか？ → ウェイポイントを追加
2. 2 本のエッジが同じ経路を共有していませんか？ → 出口／入口の位置を調整
3. 角で接続している箇所はありませんか？ → エッジの中央を使用
4. 図形を配置し直すことで交差を減らせませんか？ → レイアウトを見直す

複数フェーズの生成ワークフロー

複雑な図は、順序に沿ったフェーズで生成する必要があります。XMLを扱いやすくし、エラーを減らすため、各フェーズを個別のチャンクとして出力します。

• P1：計画 図の種類を特定します。トポロジ（エッジがある）か、空間図（フロアプランなど、レイアウトのみ）かを判断します。キャンバスサイズを選び、stencils/README.md からステンシルライブラリを選択します。まず要素の位置を計画し、そのレイアウトからゾーンの境界を決めます。ゾーン内に何があるかを把握しないと、ゾーンのサイズは決められません。
• P2：ゾーン（XMLの出力順） ゾーンは要素の後に計画しますが（P1）、XMLでは先に記述する必要があります。drawioはドキュメントの順序でレンダリングするため、先にあるセルは後にあるセルの背後に配置されます。塗りつぶし：rounded=1;fillColor=#BAC8D3;strokeColor=none;opacity=60。破線の境界線：rounded=1;dashed=1;dashPattern=8 8;fillColor=none;strokeColor=#0BA5C4。ゾーンのラベルには個別の text セルを使用します。バスバー（必要な場合）：shape=line;strokeColor=#23445D。
• P3：要素 グリッド上（10または20の倍数）に図形を配置します。グループ内の間隔は40～60px、グループ間の配線用チャネルは150～200pxにします。ステンシルファミリーごとにデバイスのスタイルを統一します（例：Cisco：fillColor=#036897;strokeColor=#ffffff;strokeWidth=2）。
• P4：接続 空間図（フロアプラン、ワイヤーフレーム）では省略します。これらはエッジではなく近接性を使用します。トポロジ図では、最後にエッジを追加します。ネットワークリンク：endArrow=none;endFill=0。データフロー：endArrow=classic。論理接続／VPNには破線を使用します：dashed=1。図形と交差しないよう、各エッジを頭の中でたどって確認します。
• P5：ラベル 浮動テキスト、凡例、寸法線を追加します。空間図では、ラベルがより重要な意味を担います。すべての要素に value または隣接するラベルセルがあることを確認します。
• P6：分割 図が約30要素を超える場合は、XML出力を分割します。チャンク1 = ヘッダー + ゾーン + 最初の要素グループ、チャンク2 = 残りの要素、チャンク3 = すべてのエッジ + 閉じタグ。

よく使う図形

基本図形

<mxfile><diagram name="Basic Shapes" id="basic-shapes"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="rect" value="Box" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="20" y="20" width="100" height="50" as="geometry"/></mxCell>
  <mxCell id="rounded" value="Rounded" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="140" y="20" width="100" height="50" as="geometry"/></mxCell>
  <mxCell id="circle" value="Circle" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="260" y="10" width="70" height="70" as="geometry"/></mxCell>
  <mxCell id="diamond" value="Decision" style="rhombus;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="350" y="10" width="70" height="70" as="geometry"/></mxCell>
  <mxCell id="db" value="Database" style="shape=cylinder;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="440" y="5" width="60" height="80" as="geometry"/></mxCell>
  <mxCell id="cloud" value="Cloud" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="520" y="10" width="100" height="70" as="geometry"/></mxCell>
</root></mxGraphModel></diagram></mxfile>

コンテナー／スイムレーン

<mxfile><diagram name="Container Example" id="container-ex"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="container" value="Container" style="swimlane;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="40" y="40" width="200" height="150" as="geometry"/>
  </mxCell>
  <mxCell id="zone" value="Zone Name" style="whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=none;verticalAlign=top;fontSize=14;" vertex="1" parent="1"><mxGeometry x="280" y="40" width="200" height="150" as="geometry"/>
  </mxCell>
</root></mxGraphModel></diagram></mxfile>

子要素を含むスイムレーン（相対位置指定）

<mxfile><diagram name="Swimlane" id="swimlane-ex"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="lane1" value="Frontend" style="swimlane;" vertex="1" parent="1"><mxGeometry x="40" y="40" width="200" height="200" as="geometry"/></mxCell>
  <mxCell id="step1" value="Step 1" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="lane1"><mxGeometry x="20" y="60" width="160" height="40" as="geometry"/></mxCell>
  <mxCell id="lane2" value="Backend" style="swimlane;" vertex="1" parent="1"><mxGeometry x="280" y="40" width="200" height="200" as="geometry"/></mxCell>
  <mxCell id="step2" value="Step 2" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="lane2"><mxGeometry x="20" y="60" width="160" height="40" as="geometry"/></mxCell>
  <mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;html=1;" edge="1" parent="1" source="step1" target="step2"><mxGeometry relative="1" as="geometry"/></mxCell>
</root></mxGraphModel></diagram></mxfile>

注： 子要素（step1、step2）は parent="lane1" ／ parent="lane2" を使用し、座標はスイムレーンを基準とした相対位置で指定します。エッジは常に parent="1"（メインキャンバス）を使用します。

ステンシルライブラリ

drawioには、プロフェッショナルな図を作成するための、48カテゴリにわたる8900以上の組み込みステンシルが用意されています。ステンシルの完全なリファレンス： stencils/README.md を参照してください。

カテゴリ	例	用途
クラウド	aws4、azure、gcp2、alibaba_cloud、ibm_cloud	クラウドアーキテクチャ図
ネットワーク	cisco、cisco19、cisco_safe、networks、networks2	ネットワークトポロジ
仮想化	citrix、citrix2、veeam、vvd、kubernetes	インフラストラクチャ図
ソフトウェア	bpmn、flowchart、sitemap、mockup	プロセスおよびUIの設計
ハードウェア	rack、cabinets、electrical	データセンターおよび電気設備
オフィス	office、atlassian、salesforce	ビジネス図

<mxfile><diagram name="Stencil Example" id="stencil-ex"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
<mxCell id="router" value="" style="shape=mxgraph.cisco.routers.router;html=1;fillColor=#036897;strokeColor=#ffffff;strokeWidth=2;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="78" height="53" as="geometry"/></mxCell>
</root></mxGraphModel></diagram></mxfile>

共通スタイルリファレンス

• 矢印の種類： 継承（endArrow=block;endFill=0）実装（endArrow=block;endFill=0;dashed=1）関連（endArrow=open;endFill=1）依存（endArrow=open;dashed=1）集約（startArrow=diamondThin;startFill=0）コンポジション（startArrow=diamondThin;startFill=1）
• 可視性の記号： +（パブリック） #（プロテクト） -（プライベート） ~（パッケージ） /（派生）
• 状態の色： 保留（#dae8fc、#6c8ebf）成功（#d5e8d4、#82b366）エラー（#f8cecc、#b85450）警告（#fff2cc、#d6b656）完了（#e1d5e7、#9673a6）
• 図形のスタイル： rounded（0、1） fillColor（16 進数） strokeColor（16 進数） strokeWidth（数値） dashed（0、1） opacity（0～100） fontColor（16 進数） fontSize（数値） fontStyle（0＝標準、1＝太字、2＝斜体、3＝太字と斜体） align（左、中央、右） verticalAlign（上、中、下）
• エッジのスタイル： edgeStyle（orthogonalEdgeStyle、entityRelationEdgeStyle、elbowEdgeStyle） curved（0、1） endArrow／startArrow（classic、block、open、oval、diamond、none） endFill／startFill（0＝中抜き、1＝塗りつぶし）

エッジの例

基本的なエッジ

<mxfile><diagram name="Edge Examples" id="edge-examples"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="a1" value="A" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="20" y="20" width="60" height="30" as="geometry"/></mxCell>
  <mxCell id="b1" value="B" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="140" y="20" width="60" height="30" as="geometry"/></mxCell>
  <mxCell style="endArrow=classic;html=1;" edge="1" parent="1" source="a1" target="b1"><mxGeometry relative="1" as="geometry"/></mxCell>
  <mxCell id="a2" value="C" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="20" y="80" width="60" height="30" as="geometry"/></mxCell>
  <mxCell id="b2" value="D" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="140" y="80" width="60" height="30" as="geometry"/></mxCell>
  <mxCell style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;dashed=1;html=1;" edge="1" parent="1" source="a2" target="b2"><mxGeometry relative="1" as="geometry"/></mxCell>
</root></mxGraphModel></diagram></mxfile>

同じノード間の2つのエッジ（重なりなし）

<mxfile><diagram name="Bidirectional" id="bidir"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="nodeA" value="A" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="40" y="60" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="nodeB" value="B" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="200" y="60" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="e1" value="Request" style="edgeStyle=orthogonalEdgeStyle;exitX=1;exitY=0.3;entryX=0;entryY=0.3;endArrow=classic;html=1;" edge="1" parent="1" source="nodeA" target="nodeB"><mxGeometry relative="1" as="geometry"/></mxCell>
  <mxCell id="e2" value="Response" style="edgeStyle=orthogonalEdgeStyle;exitX=0;exitY=0.7;entryX=1;entryY=0.7;endArrow=classic;html=1;" edge="1" parent="1" source="nodeB" target="nodeA"><mxGeometry relative="1" as="geometry"/></mxCell>
</root></mxGraphModel></diagram></mxfile>

ウェイポイントのあるエッジ（障害物を迂回）

<mxfile><diagram name="Waypoints" id="waypoints"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="src" value="Source" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="40" y="40" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="obstacle" value="Obstacle" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="1"><mxGeometry x="160" y="100" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="tgt" value="Target" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="280" y="160" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;exitX=1;exitY=0.5;entryX=0.5;entryY=0;endArrow=classic;html=1;" edge="1" parent="1" source="src" target="tgt">
    <mxGeometry relative="1" as="geometry">
      <Array as="points">
        <mxPoint x="320" y="60"/>
      </Array>
    </mxGeometry>
  </mxCell>
</root></mxGraphModel></diagram></mxfile>

斜めのルーティング（外周パターン）

間に障害物があるノード同士を斜めにつなぐ場合は、外周に沿ってルーティングします。

<mxfile><diagram name="Perimeter" id="perimeter"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="main" value="Main" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="200" y="40" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="develop" value="Develop" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="200" y="120" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="hotfix" value="Hotfix" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="350" y="200" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="hotfix_to_main" style="edgeStyle=orthogonalEdgeStyle;exitX=0.5;exitY=0;entryX=1;entryY=0.5;endArrow=classic;html=1;" edge="1" parent="1" source="hotfix" target="main">
    <mxGeometry relative="1" as="geometry">
      <Array as="points">
        <mxPoint x="390" y="60"/>
      </Array>
    </mxGeometry>
  </mxCell>
</root></mxGraphModel></diagram></mxfile>

ポイント： エッジは右（x=390）に進んでから上に向かい、中央にあるDevelopノードを避けます。

完全な例：シンプルなアーキテクチャ

<mxfile><diagram name="Architecture" id="arch-1"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="client" value="Client" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1"><mxGeometry x="40" y="100" width="100" height="50" as="geometry"/></mxCell>
  <mxCell id="server" value="Server" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1"><mxGeometry x="240" y="100" width="100" height="50" as="geometry"/></mxCell>
  <mxCell id="db" value="Database" style="shape=cylinder;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1"><mxGeometry x="440" y="85" width="80" height="80" as="geometry"/></mxCell>
  <mxCell style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;" edge="1" parent="1" source="client" target="server"><mxGeometry relative="1" as="geometry"/></mxCell>
  <mxCell style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;" edge="1" parent="1" source="server" target="db"><mxGeometry relative="1" as="geometry"/></mxCell>
</root></mxGraphModel></diagram</mxfile>

よくある問題

問題	解決策
図形が表示されない	vertex="1" と parent="1" の属性を確認します
エッジが接続されない	source と target がセルIDと一致していることを確認します
スタイルが適用されない	スタイル文字列のセミコロン区切りを確認します
テキストが表示されない	スタイルに html=1;whiteSpace=wrap; を追加します
エッジが図形と交差する	ウェイポイントを使って障害物を迂回します
複数のエッジが重なる	異なる exitY／entryY の値（0.3と0.7）を使います
角での接続が不自然に見える	代わりにエッジの中央を使います（exitX=1,exitY=0.5）
図が広がりすぎている	x: 0～800、y: 0～600の表示範囲内に収めます
XMLコメントによって編集できなくなる	生成するXMLに `` を絶対に含めないでください

AI生成のヒント

1. まずレイアウトを計画する：XMLを書く前に、エッジが交差する可能性のある箇所を特定し、配置を頭の中で下書きします
2. グリッドに合わせる：図形の位置を10または20の倍数にします
3. 一意のIDを使う：ランダムな文字列ではなく、client、server、db のような説明的なIDを使います
4. 間隔を一定にする：接続する図形間は40～60px、ルーティング用の通路は150～200pxの間隔を空けます
5. 背景のレイヤーを先に作る：図形を配置する前に、ゾーンやコンテナーのセルを定義します
6. ゾーンを色分けする：領域を強調するには、strokeColor=none と明るい背景色を使います
7. エッジを頭の中で確認する：生成前に各エッジをたどり、「図形と交差していないか」を確認します
8. 特殊文字をエスケープする：<には <、>には >、&には &、"には " を使います

リソース

• drawioのドキュメント
• mxGraph APIリファレンス