drawio

Draw.io Diagram Skill

A skill for directly creating and editing draw.io files (.drawio) in XML format.

Basic XML Structure

<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 Element

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>

Arrows and Connectors

Basic Arrow

<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>

Arrow with Label

<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>

Dashed Arrow

<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>

Style Setting Guide

Font Settings (Required)

1. mxGraphModelにdefaultFontFamily="Noto Sans JP"Configure
2. All text elementsにfontFamily=Noto Sans JP;explicitly add

Recommended Settings

Item	Recommended Value	Description
fontSize	18	1.5 times the standard, improved visibility
Japanese text width	30-40px/character	For layout calculation
Spacing between arrow and label	20px or more	Prevent overlap

Color Settings

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

Commonly Used Colors

Use	Color Code
White background	#ffffff
Light blue	#dae8fc
Light green	#d5e8d4
Light yellow	#fff2cc
Light red	#f8cecc
Light gray	#f5f5f5

Placement Rules

XML description order = drawing order

• What is written first is placed in the backgroundis placed
• Describe arrows before shapes (earlier in the XML) to place them in the very back

Recommended Structure

<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 Conversion

drawio CLI command

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

Options	Description
-x	Export mode
-f png	PNG format
-s 2	2x scale (high resolution)
-t	Transparent background
-o	Output file specification

Verification Checklist

After creation, check the following:

• Is defaultFontFamily set in mxGraphModel
• Is fontFamily explicitly set for all text elements
• Is fontSize around 18px (visibility)
• Are arrows placed earlier in the XML (in the very back)
• Is the spacing between arrows and labels 20px or more
• Is the width sufficient for Japanese text (30-40px/character)
• Was visual confirmation done with PNG output

Template

For the basic template, refer to templates/basic.drawio .