drawio

Draw.io Diagram Skill

draw.ioファイル（.drawio）をXML形式で直接作成・編集するためのスキル。

XML基本構造

<mxfile host="app.diagrams.net" modified="2024-01-01T00:00:00.000Z" agent="Claude" version="21.0.0">
  <diagram name="Page-1" id="page-1">
    <mxGraphModel dx="1000" dy="600" 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="Noto Sans JP">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- 図形要素をここに追加 -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

mxCell要素

矩形（Rectangle）

<mxCell id="rect-1" value="ラベル" style="rounded=0;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>

角丸矩形（Rounded Rectangle）

<mxCell id="rounded-1" value="ラベル" style="rounded=1;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;arcSize=20;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>

楕円（Ellipse）

<mxCell id="ellipse-1" value="ラベル" style="ellipse;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="80" as="geometry" />
</mxCell>

ひし形（Diamond）

<mxCell id="diamond-1" value="条件" style="rhombus;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="100" height="100" as="geometry" />
</mxCell>

テキスト（Text Only）

<mxCell id="text-1" value="テキスト" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontFamily=Noto Sans JP;fontSize=18;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="30" as="geometry" />
</mxCell>

矢印・コネクタ

基本の矢印

<mxCell id="arrow-1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Noto Sans JP;fontSize=14;" edge="1" parent="1" source="rect-1" target="rect-2">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

ラベル付き矢印

<mxCell id="arrow-2" value="ラベル" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Noto Sans JP;fontSize=14;" edge="1" parent="1" source="rect-1" target="rect-2">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

点線矢印

<mxCell id="arrow-3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;fontFamily=Noto Sans JP;fontSize=14;" edge="1" parent="1" source="rect-1" target="rect-2">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

スタイル設定ガイド

フォント設定（必須）

1. mxGraphModelにdefaultFontFamily="Noto Sans JP"を設定
2. すべてのテキスト要素にfontFamily=Noto Sans JP;を明示的に追加

推奨設定

色設定

fillColor=#ffffff;      # 塗りつぶし色
strokeColor=#000000;    # 枠線色
fontColor=#333333;      # 文字色

よく使う色

配置ルール

XMLの記述順 = 描画順

• 先に書いたものが背面に配置される
• 矢印は図形より先（XMLの先頭側）に記述して最背面に配置

推奨構造

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

  <!-- 1. 矢印・コネクタ（最背面） -->
  <mxCell id="arrow-1" ... edge="1" ... />
  <mxCell id="arrow-2" ... edge="1" ... />

  <!-- 2. 図形（中間） -->
  <mxCell id="rect-1" ... vertex="1" ... />
  <mxCell id="rect-2" ... vertex="1" ... />

  <!-- 3. テキストラベル（最前面） -->
  <mxCell id="text-1" ... vertex="1" ... />
</root>

PNG変換

drawio-exportコマンド（推奨）

Dockerコンテナ環境では、xvfb経由でヘッドレス実行するdrawio-exportコマンドを使用：

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

drawio CLIコマンド（直接実行）

ディスプレイ環境がある場合：

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

オプション一覧

実行例

# 基本的なPNG出力
drawio-export -x -f png -o diagram.png diagram.drawio

# 高解像度（2倍スケール）+ 透明背景
drawio-export -x -f png -s 2 -t -o diagram@2x.png diagram.drawio

# SVG出力
drawio-export -x -f svg -o diagram.svg diagram.drawio

# 全ページをまとめてPDF出力
drawio-export -x -f pdf -o diagram.pdf diagram.drawio

検証チェックリスト

作成後、以下を確認：

• mxGraphModelにdefaultFontFamilyが設定されているか
• 全テキスト要素にfontFamilyが明示的に設定されているか
• fontSizeは18px程度か（視認性）
• 矢印がXMLの先頭側に配置されているか（最背面）
• 矢印とラベルの間隔は20px以上か
• 日本語テキストの幅は十分か（30-40px/文字）
• PNG出力で視覚確認したか

テンプレート

基本テンプレートは references/templates/basic.drawio を参照。