Examples

Examples

Use these as starting templates, then adjust positions and labels for the user’s content.

Minimal two-step flowchart

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "type": "rectangle",
      "id": "start",
      "x": 120,
      "y": 100,
      "width": 220,
      "height": 80,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "#a5d8ff",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 112233,
      "version": 1,
      "versionNonce": 554433,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": [{ "id": "a1", "type": "arrow" }],
      "link": null,
      "locked": false,
      "roundness": { "type": 3 }
    },
    {
      "type": "text",
      "id": "start-label",
      "x": 175,
      "y": 128,
      "width": 110,
      "height": 24,
      "text": "Start",
      "fontSize": 20,
      "fontFamily": 2,
      "textAlign": "center",
      "verticalAlign": "middle",
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 334455,
      "version": 1,
      "versionNonce": 665544,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": null,
      "originalText": "Start",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "rectangle",
      "id": "step-1",
      "x": 120,
      "y": 260,
      "width": 220,
      "height": 80,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "#b2f2bb",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 778899,
      "version": 1,
      "versionNonce": 998877,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": [{ "id": "a1", "type": "arrow" }],
      "link": null,
      "locked": false,
      "roundness": { "type": 3 }
    },
    {
      "type": "text",
      "id": "step-1-label",
      "x": 150,
      "y": 288,
      "width": 160,
      "height": 24,
      "text": "Process Step",
      "fontSize": 20,
      "fontFamily": 2,
      "textAlign": "center",
      "verticalAlign": "middle",
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 123321,
      "version": 1,
      "versionNonce": 456654,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": null,
      "originalText": "Process Step",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "arrow",
      "id": "a1",
      "x": 230,
      "y": 180,
      "width": 0,
      "height": 80,
      "points": [[0, 0], [0, 80]],
      "startArrowhead": null,
      "endArrowhead": "arrow",
      "startBinding": { "elementId": "start", "focus": 0, "gap": 1 },
      "endBinding": { "elementId": "step-1", "focus": 0, "gap": 1 },
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 321123,
      "version": 1,
      "versionNonce": 654456,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false
    }
  ],
  "appState": {
    "viewBackgroundColor": "#ffffff",
    "gridSize": null
  },
  "files": {}
}