Diagram & Flowchart Maker

Draw.io diagrams

Emit one complete, valid .drawio XML file as a single code block so it renders as an artifact. Tell the user to save it as name.drawio and open it at app.diagrams.net (File > Open) or in the draw.io desktop app, where it stays fully editable. Never emit partial XML.

Steps

1. Plan before writing XML. List the nodes, group them by tier or layer, pick a flow direction (top-to-bottom for flowcharts, left-to-right for architecture), and sketch a coordinate grid on paper logic: which node sits at which x,y.
2. Write the full XML using the skeleton and cell forms below.
3. Walk the checklist at the end, fixing ids, geometry, and overlaps.
4. Present the artifact plus a one-line legend of what each color or shape means. For edits, change only the affected cells and re-emit the whole file.

Document skeleton

Every file follows this structure. Cells with ids 0 and 1 are reserved root cells; never reuse those ids and never attach geometry to them.

<mxfile host="app.diagrams.net">
  <diagram name="Page-1" id="page-1">
    <mxGraphModel dx="800" dy="600" grid="1" gridSize="10" guides="1"
        tooltips="1" connect="1" arrows="1" fold="1" page="1"
        pageScale="1" pageWidth="1169" pageHeight="826" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- all content cells go here, parent="1" unless in a container -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Shapes (vertices)

<mxCell id="n1" value="Web Server"
    style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;"
    vertex="1" parent="1">
  <mxGeometry x="80" y="120" width="160" height="60" as="geometry" />
</mxCell>

Give every cell a unique string id (n1, n2, e1, g1). Always include whiteSpace=wrap;html=1 so labels wrap. Common style strings:

• Rectangle (process): rounded=0;whiteSpace=wrap;html=1;
• Rounded rectangle (start/end, services): rounded=1;whiteSpace=wrap;html=1;
• Decision diamond: rhombus;whiteSpace=wrap;html=1;
• Ellipse: ellipse;whiteSpace=wrap;html=1;
• Database cylinder: shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;
• Input/output parallelogram: shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;
• Cloud (external system): ellipse;shape=cloud;whiteSpace=wrap;html=1;
• Actor / user: shape=actor;whiteSpace=wrap;html=1;
• Note: shape=note;whiteSpace=wrap;html=1;size=14;
• Queue/topic: shape=cylinder3;direction=south;whiteSpace=wrap;html=1;size=15;

Standard palette (fillColor/strokeColor pairs); pick one color per tier or role and state the mapping in your legend:

• Blue #dae8fc / #6c8ebf, Green #d5e8d4 / #82b366, Orange #ffe6cc / #d79b00, Yellow #fff2cc / #d6b656, Red #f8cecc / #b85450, Purple #e1d5e7 / #9673a6, Grey #f5f5f5 / #666666.

Containers and groups

A container is a vertex whose children reference it as parent. Child coordinates are relative to the container's top-left corner.

<mxCell id="g1" value="VPC"
    style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;verticalAlign=top;fontStyle=1;"
    vertex="1" parent="1">
  <mxGeometry x="40" y="80" width="420" height="240" as="geometry" />
</mxCell>
<mxCell id="n2" value="App" style="rounded=1;whiteSpace=wrap;html=1;"
    vertex="1" parent="g1">
  <mxGeometry x="20" y="50" width="140" height="60" as="geometry" />
</mxCell>

Leave at least 40px inner padding below the container title. Size the container to enclose all children plus 20px margin on each side.

Edges

<mxCell id="e1" value="HTTPS"
    style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;labelBackgroundColor=#ffffff;fontSize=11;"
    edge="1" parent="1" source="n1" target="n2">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

Rules:

• Every edge cell MUST contain <mxGeometry relative="1" as="geometry" />. A self-closing edge cell does not render.
• source and target must be existing vertex ids. No dangling edges.
• Use edgeStyle=orthogonalEdgeStyle for architecture and ER; plain straight edges (omit edgeStyle) are fine for short flowchart links.
• Pin connection points when several edges touch one shape, so they do not stack: add exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0; (values 0 to 1 along the perimeter; vary them per edge).
• Route an edge around an unrelated shape with explicit waypoints inside the geometry: <Array as="points"><mxPoint x="400" y="300" /></Array>.
• Dashed edge (async, optional): add dashed=1;. Reverse or special arrows: startArrow=none;endArrow=block;.
• Long labels: keep labelBackgroundColor=#ffffff and nudge the label into whitespace with an offset point: <mxPoint as="offset" x="0" y="-12" /> inside the edge geometry.

Layout discipline

• All coordinates positive; start around x=40, y=40.
• No overlaps. Minimum 40px gap between sibling shapes, 80 to 120px between tiers or ranks.
• Snap positions and sizes to the 10px grid.
• Size boxes for their labels: roughly 8px of width per character at fontSize 12, minimum 120x60 for labeled nodes.
• Keep one flow direction. Do not mix left-to-right and top-to-bottom for the main flow; back-edges (retries, loops) may route around the outside.
• Align centers within a rank: same y for a horizontal rank, same x for a vertical column.

Diagram type guidance

Flowchart: top-to-bottom. Rounded rectangles or ellipses for start and end, rectangles for steps, rhombus for decisions with edges labeled Yes and No leaving different sides (exitX=0 and exitX=1), parallelograms for input/output. Vertical spacing about 100px.

Sequence (lightweight): participant boxes in a row across the top, about 160px apart. Under each, a dashed vertical lifeline edge from the box bottom straight down (dashed=1;endArrow=none; between two small invisible anchor vertices with strokeColor=none;fillColor=none;). Messages are horizontal edges between lifelines at increasing y (60 to 80px per message), solid with block arrow for calls, dashed with open arrow for returns, label above the line. Order the y coordinates strictly by time.

ER diagram: one entity per table using a stacked swimlane. Entity: swimlane;fontStyle=1;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;collapsible=0;whiteSpace=wrap;html=1; with one row child per column: text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=8;whiteSpace=wrap;html=1; (row height 26, width equal to entity width; prefix key columns with PK or FK in the label). Relationships use crow's foot arrows on the edge style: endArrow=ERmany;startArrow=ERone;edgeStyle=entityRelationEdgeStyle; (variants: ERone, ERmany, ERzeroToOne, ERzeroToMany, ERoneToMany). Connect edges entity-to-entity, or row-to-row for exact FK links.

Architecture: left-to-right by tier (clients, edge, services, data). Wrap each zone in a grey container. Cylinders for datastores, clouds for external systems, actor for users. One fill color per tier from the palette. Label every edge with protocol or purpose when it is not obvious.

Checklist before delivering

• Ids unique; 0 and 1 not reused; every edge source/target resolves.
• Every edge has its relative geometry child.
• No overlapping shapes; spacing rules honored; all coordinates positive.
• Labels fit their boxes; whiteSpace=wrap present everywhere.
• Decision branches and non-obvious edges are labeled.
• XML is well formed: every mxCell closed, attributes quoted, special characters in labels escaped (&, <, >).