Draw.io Diagrams

/draw-io

Create, edit, and review draw.io (diagrams.net) diagrams as plain XML. Ask the user to paste or upload their .drawio file when editing; deliver new or updated diagrams as complete XML chat artifacts they can open at app.diagrams.net or in the draw.io desktop app.

1. Basic Rules

• Work only on .drawio XML content; never hand-edit exported .drawio.png files
• After changes, ask the user to open the XML in draw.io and visually verify the result (or export a PNG and share it back for review)

2. Font Settings

For consistent typography, specify defaultFontFamily in the mxGraphModel tag:

<mxGraphModel defaultFontFamily="Noto Sans JP" ...>

Also explicitly specify fontFamily in each text element's style attribute:

style="text;html=1;fontSize=27;fontFamily=Noto Sans JP;"

3. Rendering and Export

The user opens the XML at app.diagrams.net (File > Open) or in draw.io desktop. For high-quality PNG export from draw.io desktop, the equivalent settings are: export mode, PNG format, 2x scale, transparent background. Recommend exporting at 2x scale with a transparent background so the diagram adapts to slides and themes.

4. Layout Adjustment

4.1. Coordinate Adjustment Steps

1. Treat the .drawio file as plain XML
2. Find the mxCell for the element to adjust (search by value attribute for its text)
3. Adjust coordinates in the mxGeometry tag:
   • x: position from left
   • y: position from top
   • width: width
   • height: height
4. Deliver the updated XML and ask the user to verify visually

4.2. Coordinate Calculation

• Element center coordinate = y + (height / 2)
• To align multiple elements, calculate and match center coordinates

5. Design Principles

5.1. Basic Principles

• Clarity: create simple, visually clean diagrams
• Consistency: unify colors, fonts, icon sizes, line thickness
• Accuracy: do not sacrifice accuracy for simplification

5.2. Element Rules

• Label all elements
• Use arrows to indicate direction (prefer 2 unidirectional arrows over bidirectional)
• Use latest official icons
• Add a legend to explain custom symbols

5.3. Accessibility

• Ensure sufficient color contrast
• Use patterns in addition to colors

5.4. Progressive Disclosure

Separate complex systems into staged diagrams:

5.5. Metadata

Include title, description, last updated, author, and version in diagrams.

6. Best Practices

6.1. Background Color

• Remove background="#ffffff"
• Transparent background adapts to various themes

6.2. Font Size

• Use 1.5x standard font size (around 18px) for PDF readability

6.3. CJK Text Width

• Allow 30-40px per character for Japanese/Chinese/Korean text
• Insufficient width causes unintended line breaks

<!-- For 10-character text, allow 300-400px -->
<mxGeometry x="140" y="60" width="400" height="40" />

6.4. Arrow Placement

• Always place arrows at the back (position in XML right after the Title)
• Position arrows to avoid overlapping with labels
• Keep arrow start/end at least 20px from label bottom edge

<!-- Title -->
<mxCell id="title" value="..." .../>

<!-- Arrows (back layer) -->
<mxCell id="arrow1" style="edgeStyle=..." .../>

<!-- Other elements (front layer) -->
<mxCell id="box1" .../>

6.5. Arrow Connection to Text Labels

For text elements, exitX/exitY do not work, so use explicit coordinates:

<!-- Good: Explicit coordinates with sourcePoint/targetPoint -->
<mxCell id="arrow" style="..." edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="1279" y="500" as="sourcePoint"/>
    <mxPoint x="119" y="500" as="targetPoint"/>
    <Array as="points">
      <mxPoint x="1279" y="560"/>
      <mxPoint x="119" y="560"/>
    </Array>
  </mxGeometry>
</mxCell>

6.6. edgeLabel Offset Adjustment

Adjust the offset attribute to distance arrow labels from arrows:

<!-- Place above arrow (negative value to distance) -->
<mxPoint x="0" y="-40" as="offset"/>

<!-- Place below arrow (positive value to distance) -->
<mxPoint x="0" y="40" as="offset"/>

6.7. Remove Unnecessary Elements

• Remove decorative icons irrelevant to context
• Example: if ECR exists, a separate Docker icon is unnecessary

6.8. Labels and Headings

• Service name only: 1 line
• Service name + supplementary info: 2 lines with line break
• Redundant notation (e.g., ECR Container Registry): shorten to 1 line
• Use <br> tag for line breaks

6.9. Background Frame and Internal Element Placement

When placing elements inside background frames (grouping boxes), ensure sufficient margin.

• YOU MUST: internal elements must have at least 30px margin from the frame boundary
• YOU MUST: account for rounded corners (rounded=1) and stroke width
• YOU MUST: ask the user to visually verify the rendered output for overflow

Coordinate calculation verification:

Background frame: y=20, height=400 -> range is y=20-420
Internal element top: frame y + 30 or more (e.g., y=50)
Internal element bottom: frame y + height - 30 or less (e.g., up to y=390)

Bad example (may overflow):

<!-- Background frame -->
<mxCell id="bg" style="rounded=1;strokeWidth=3;...">
  <mxGeometry x="500" y="20" width="560" height="400" />
</mxCell>
<!-- Text: y=30 is too close to frame top (y=20) -->
<mxCell id="label" value="Title" style="text;...">
  <mxGeometry x="510" y="30" width="540" height="35" />
</mxCell>

Good example (sufficient margin):

<!-- Background frame -->
<mxCell id="bg" style="rounded=1;strokeWidth=3;...">
  <mxGeometry x="500" y="20" width="560" height="430" />
</mxCell>
<!-- Text: y=50 is 30px from frame top (y=20) -->
<mxCell id="label" value="Title" style="text;...">
  <mxGeometry x="510" y="50" width="540" height="35" />
</mxCell>

7. AWS Icons

Use the current AWS icon set (mxgraph.aws4.* shape styles) and official service names or correct abbreviations. In draw.io, icons are referenced via the style attribute, e.g. shape=mxgraph.aws4.lambda_function. If unsure of the exact shape name, describe the icon and ask the user to confirm from the draw.io AWS shape library search.

8. Checklist

• No background color set
• Font size appropriate (larger recommended)
• Arrows placed at back layer
• Arrows not overlapping labels (verify in rendered output)
• Arrow start/end sufficiently distant from labels (at least 20px)
• Arrows not penetrating boxes or icons (verify in rendered output)
• Internal elements not overflowing background frame (verify in rendered output)
• 30px+ margin between background frame and internal elements
• AWS service names are official names/correct abbreviations
• AWS icons are latest version (mxgraph.aws4.*)
• No unnecessary elements remaining
• User has visually verified the rendered diagram

9. Image Display in reveal.js Slides

If the user embeds exported diagrams in Quarto/reveal.js slides, add auto-stretch: false to the YAML header:

---
title: "Your Presentation"
format:
  revealjs:
    auto-stretch: false
---

This ensures correct image display on mobile devices.

Usage

/draw-io $ARGUMENTS