.adraw diagram v1

Top-level object

• version — must be 1
• name — user-visible title (string, max 256 chars)
• customStyles — array of node style definitions (colors, stroke, shape per id). New diagrams ship default brand swatches; extend or override here.
• canvas — { showGrid, gridSpacing, zoom }
• nodes — array of node records
• edges — array of edge records
• textLabels — optional free-floating text (same font size as node labels; omit or [])
• frames — optional named regions behind nodes (omit or [])
• images — optional URL-referenced images, no embedding (omit or [])

Node record

{
  "id": "string",
  "text": "string",
  "x": 0, "y": 0, "w": 160, "h": 72,
  "styleId": "yellow",
  "shape": "roundedRect",   // optional; one of:
  // rectangle | roundedRect | oval | circle | diamond | hexagon | octagon | parallelogram
  "link": "https://example.com",  // optional https URL (opens from editor)
  "locked": true                   // optional; when true, node is not draggable in the editor
}

styleId must exist in customStyles (each entry defines fill, stroke, and default shape for that id).

Edge record

{
  "id": "string",
  "from": "sourceNodeId",
  "to": "targetNodeId",
  "routing": "orthogonal",  // straight | orthogonal | curved
  "dash": "solid",          // solid | dashed | dotted
  "head": "lineArrow",      // none | lineArrow | triangleArrow | triangleReversed | circle | diamond
  "tail": "none",
  "label": "",
  "strokeWidth": 1,
  "sourceHandle": "src",    // optional React Flow handle id
  "targetHandle": "tgt",
  "relationshipPreset": 1, // optional 0–7; aligns with editor presets
  "link": "https://example.com/runbook",  // optional
  "locked": true                           // optional; when true, edge style is fixed in the editor
}

Text labels, frames, and images

These arrays are optional on the wire: older files without them parse as empty. CLI / MCP expose add text, add frame, add image, matching remove/list commands, and renderSVG draws them (frames and images under edges; text labels on top).

{
  "textLabels": [{ "id": "t1", "x": 40, "y": 40, "text": "Region eu-west" }],
  "frames": [{ "id": "f1", "name": "VPC", "x": 32, "y": 120, "w": 520, "h": 280 }],
  "images": [{ "id": "i1", "src": "https://example.com/logo.png", "x": 400, "y": 40, "w": 64, "h": 64, "alt": "Logo" }]
}

Relationship presets (0–7)

Use relationshipPreset or the CLI / MCP --preset / preset field. Each index maps to styling (routing, dash, markers, stroke width).

Share links (inline payload)

Encode the full diagram JSON with gzip, then base64url (no padding). Pass the result as query param d:

• Read-only: /v?d=…
• Free editor: /app?d=… (payload is stripped after load)

In TypeScript, use encodeDiagramSharePayload / decodeDiagramSharePayload from @autodraw/editor. Very large diagrams may exceed URL length limits in some browsers—then use a downloadable .adraw file instead.

Open demo in viewer Open demo in editor

Minimal example (JSON)

{
  "version": 1,
  "name": "Minimal",
  "canvas": {
    "showGrid": true,
    "gridSpacing": 16,
    "zoom": 1
  },
  "nodes": [
    {
      "id": "a",
      "text": "A",
      "x": 200,
      "y": 200,
      "w": 140,
      "h": 64,
      "styleId": "yellow"
    },
    {
      "id": "b",
      "text": "B",
      "x": 420,
      "y": 220,
      "w": 140,
      "h": 64,
      "styleId": "blue"
    }
  ],
  "edges": [
    {
      "id": "e1",
      "from": "a",
      "to": "b",
      "routing": "orthogonal",
      "dash": "solid",
      "head": "lineArrow",
      "tail": "none",
      "label": "",
      "strokeWidth": 1
    }
  ],
  "customStyles": [
    {
      "id": "yellow",
      "fillRed": 0.9411764705882353,
      "fillGreen": 0.9254901960784314,
      "fillBlue": 0.3411764705882353,
      "fillAlpha": 1,
      "strokeRed": 0.9411764705882353,
      "strokeGreen": 0.9254901960784314,
      "strokeBlue": 0.3411764705882353,
      "strokeAlpha": 1,
      "shape": "roundedRect"
    },
    {
      "id": "orange",
      "fillRed": 0.8862745098039215,
      "fillGreen": 0.5215686274509804,
      "fillBlue": 0.43137254901960786,
      "fillAlpha": 1,
      "strokeRed": 0.8862745098039215,
      "strokeGreen": 0.5215686274509804,
      "strokeBlue": 0.43137254901960786,
      "strokeAlpha": 1,
      "shape": "roundedRect"
    },
    {
      "id": "pink",
      "fillRed": 0.41568627450980394,
      "fillGreen": 0.4,
      "fillBlue": 0.6392156862745098,
      "fillAlpha": 1,
      "strokeRed": 0.41568627450980394,
      "strokeGreen": 0.4,
      "strokeBlue": 0.6392156862745098,
      "strokeAlpha": 1,
      "shape": "roundedRect"
    },
    {
      "id": "blue",
      "fillRed": 0.19607843137254902,
      "fillGreen": 0.5647058823529412,
      "fillBlue": 0.5607843137254902,
      "fillAlpha": 1,
      "strokeRed": 0.19607843137254902,
      "strokeGreen": 0.5647058823529412,
      "strokeBlue": 0.5607843137254902,
      "strokeAlpha": 1,
      "shape": "roundedRect"
    },
    {
      "id": "green",
      "fillRed": 0.14901960784313725,
      "fillGreen": 0.7686274509803922,
      "fillBlue": 0.5215686274509804,
      "fillAlpha": 1,
      "strokeRed": 0.14901960784313725,
      "strokeGreen": 0.7686274509803922,
      "strokeBlue": 0.5215686274509804,
      "strokeAlpha": 1,
      "shape": "roundedRect"
    },
    {
      "id": "lime",
      "fillRed": 0.8784313725490196,
      "fillGreen": 0.9372549019607843,
      "fillBlue": 0.5686274509803921,
      "fillAlpha": 1,
      "strokeRed": 0.8784313725490196,
      "strokeGreen": 0.9372549019607843,
      "strokeBlue": 0.5686274509803921,
      "strokeAlpha": 1,
      "shape": "roundedRect"
    },
    {
      "id": "gray",
      "fillRed": 0.82,
      "fillGreen": 0.82,
      "fillBlue": 0.84,
      "fillAlpha": 1,
      "strokeRed": 0.45,
      "strokeGreen": 0.45,
      "strokeBlue": 0.48,
      "strokeAlpha": 1,
      "shape": "roundedRect"
    }
  ],
  "textLabels": [],
  "frames": [],
  "images": []
}

Cloud agent system prompt (SKILL)

Paste the block below into a Custom GPT, Claude Project, or similar. The model emits valid .adraw JSON; the user opens it in Autodraw or saves it as a file.

You are helping the user with Autodraw diagram files (.adraw v1).

OUTPUT RULES:
- When the user wants a diagram, output a SINGLE JSON object only (no markdown fences unless they ask).
- The object MUST satisfy diagram v1:
  - version: 1 (number)
  - name: short string (max 256 chars)
  - canvas: { "showGrid": boolean, "gridSpacing": number, "zoom": number }
  - nodes: array of { id, text, x, y, w, h, styleId, shape?, link?, locked? }
  - edges: array of { id, from, to, routing, dash, head, tail, label, strokeWidth?, sourceHandle?, targetHandle?, relationshipPreset?, link?, locked? }
  - textLabels: array of { id, text, x, y } (optional; omit or [] for none)
  - frames: array of { id, x, y, w, h, name? } (optional; omit or [] for none)
  - images: array of { id, src, x, y, w, h, alt? } — src must be https URL; no base64 (optional; omit or [] for none)
  - customStyles: array of style definitions (fill/stroke/shape per id). New files include default brand swatches; add entries here to define custom colors or shapes.

NODE shapes (optional): rectangle | roundedRect | oval | circle | diamond | hexagon | octagon | parallelogram

EDGE routing: straight | orthogonal | curved
EDGE dash: solid | dashed | dotted
EDGE head/tail: none | lineArrow | triangleArrow | triangleReversed | circle | diamond

For consistent relationship styling you MAY set relationshipPreset to an integer 0–7 instead of hand-picking routing/dash/head/tail:
0 straight solid open head
1 orthogonal solid open head
2 orthogonal bold open head
3 orthogonal double arrow
4 orthogonal dashed open head
5 dashed with diamond tail
6 orthogonal dashed diamond head
7 orthogonal dotted open head

STYLE IDs: each node styleId must match an entry in customStyles (default templates include yellow, orange, pink, blue, green, lime, gray).

SHARING: After emitting JSON, tell the user they can:
- Save as file.adraw and open in the Autodraw Mac app or import in the web editor, OR
- Use Autodraw share encoding (gzip JSON + base64url) as query param d on https://autodraw.ink/v or /app if they have a tool that encodes it.

Never invent binary file contents; always use structured JSON for .adraw v1.