# Excalidraw Diagram Examples

Complete, working examples of common diagram types.

## Simple Flowchart

A basic yes/no decision flowchart:

```json
{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "type": "ellipse",
      "id": "start",
      "x": 200,
      "y": 50,
      "width": 100,
      "height": 60,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "#b2f2bb",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 1001,
      "version": 1,
      "versionNonce": 1001,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": [
        { "id": "text-start", "type": "text" },
        { "id": "arrow-1", "type": "arrow" }
      ],
      "link": null,
      "locked": false
    },
    {
      "type": "text",
      "id": "text-start",
      "x": 225,
      "y": 68,
      "width": 50,
      "height": 25,
      "text": "Start",
      "fontSize": 20,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 1002,
      "version": 1,
      "versionNonce": 1002,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": "start",
      "originalText": "Start",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "diamond",
      "id": "decision",
      "x": 175,
      "y": 180,
      "width": 150,
      "height": 120,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "#ffec99",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 1003,
      "version": 1,
      "versionNonce": 1003,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": [
        { "id": "text-decision", "type": "text" },
        { "id": "arrow-1", "type": "arrow" },
        { "id": "arrow-yes", "type": "arrow" },
        { "id": "arrow-no", "type": "arrow" }
      ],
      "link": null,
      "locked": false
    },
    {
      "type": "text",
      "id": "text-decision",
      "x": 210,
      "y": 225,
      "width": 80,
      "height": 25,
      "text": "Ready?",
      "fontSize": 20,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 1004,
      "version": 1,
      "versionNonce": 1004,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": "decision",
      "originalText": "Ready?",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "rectangle",
      "id": "process-yes",
      "x": 50,
      "y": 380,
      "width": 140,
      "height": 80,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "#a5d8ff",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 1005,
      "version": 1,
      "versionNonce": 1005,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": [
        { "id": "text-yes", "type": "text" },
        { "id": "arrow-yes", "type": "arrow" }
      ],
      "link": null,
      "locked": false,
      "roundness": { "type": 3 }
    },
    {
      "type": "text",
      "id": "text-yes",
      "x": 75,
      "y": 407,
      "width": 90,
      "height": 25,
      "text": "Do Thing",
      "fontSize": 20,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 1006,
      "version": 1,
      "versionNonce": 1006,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": "process-yes",
      "originalText": "Do Thing",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "rectangle",
      "id": "process-no",
      "x": 310,
      "y": 380,
      "width": 140,
      "height": 80,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "#ffc9c9",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 1007,
      "version": 1,
      "versionNonce": 1007,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": [
        { "id": "text-no", "type": "text" },
        { "id": "arrow-no", "type": "arrow" }
      ],
      "link": null,
      "locked": false,
      "roundness": { "type": 3 }
    },
    {
      "type": "text",
      "id": "text-no",
      "x": 355,
      "y": 407,
      "width": 50,
      "height": 25,
      "text": "Wait",
      "fontSize": 20,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 1008,
      "version": 1,
      "versionNonce": 1008,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": "process-no",
      "originalText": "Wait",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "arrow",
      "id": "arrow-1",
      "x": 250,
      "y": 115,
      "width": 0,
      "height": 60,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 1009,
      "version": 1,
      "versionNonce": 1009,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "points": [[0, 0], [0, 60]],
      "startArrowhead": null,
      "endArrowhead": "arrow",
      "startBinding": { "elementId": "start", "focus": 0, "gap": 5 },
      "endBinding": { "elementId": "decision", "focus": 0, "gap": 5 }
    },
    {
      "type": "arrow",
      "id": "arrow-yes",
      "x": 200,
      "y": 300,
      "width": 80,
      "height": 75,
      "angle": 0,
      "strokeColor": "#2f9e44",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 1010,
      "version": 1,
      "versionNonce": 1010,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "points": [[0, 0], [-80, 75]],
      "startArrowhead": null,
      "endArrowhead": "arrow",
      "startBinding": { "elementId": "decision", "focus": -0.5, "gap": 5 },
      "endBinding": { "elementId": "process-yes", "focus": 0, "gap": 5 }
    },
    {
      "type": "arrow",
      "id": "arrow-no",
      "x": 300,
      "y": 300,
      "width": 80,
      "height": 75,
      "angle": 0,
      "strokeColor": "#e03131",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 1011,
      "version": 1,
      "versionNonce": 1011,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "points": [[0, 0], [80, 75]],
      "startArrowhead": null,
      "endArrowhead": "arrow",
      "startBinding": { "elementId": "decision", "focus": 0.5, "gap": 5 },
      "endBinding": { "elementId": "process-no", "focus": 0, "gap": 5 }
    },
    {
      "type": "text",
      "id": "label-yes",
      "x": 130,
      "y": 320,
      "width": 40,
      "height": 25,
      "text": "Yes",
      "fontSize": 16,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "angle": 0,
      "strokeColor": "#2f9e44",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 1012,
      "version": 1,
      "versionNonce": 1012,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": null,
      "originalText": "Yes",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "text",
      "id": "label-no",
      "x": 330,
      "y": 320,
      "width": 30,
      "height": 25,
      "text": "No",
      "fontSize": 16,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "angle": 0,
      "strokeColor": "#e03131",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 1013,
      "version": 1,
      "versionNonce": 1013,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": null,
      "originalText": "No",
      "autoResize": true,
      "lineHeight": 1.25
    }
  ],
  "appState": {
    "viewBackgroundColor": "#ffffff",
    "gridSize": null
  },
  "files": {}
}
```

---

## Architecture Diagram (3-Tier)

Client, Server, Database architecture:

```json
{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "type": "rectangle",
      "id": "client",
      "x": 50,
      "y": 100,
      "width": 160,
      "height": 120,
      "angle": 0,
      "strokeColor": "#1971c2",
      "backgroundColor": "#a5d8ff",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 2001,
      "version": 1,
      "versionNonce": 2001,
      "isDeleted": false,
      "groupIds": ["client-group"],
      "boundElements": [{ "id": "arrow-client-server", "type": "arrow" }],
      "link": null,
      "locked": false,
      "roundness": { "type": 3 }
    },
    {
      "type": "text",
      "id": "client-title",
      "x": 85,
      "y": 115,
      "width": 90,
      "height": 30,
      "text": "Client",
      "fontSize": 24,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "top",
      "angle": 0,
      "strokeColor": "#1971c2",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 2002,
      "version": 1,
      "versionNonce": 2002,
      "isDeleted": false,
      "groupIds": ["client-group"],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": null,
      "originalText": "Client",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "text",
      "id": "client-desc",
      "x": 70,
      "y": 155,
      "width": 120,
      "height": 50,
      "text": "React App\nBrowser",
      "fontSize": 16,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "top",
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 2003,
      "version": 1,
      "versionNonce": 2003,
      "isDeleted": false,
      "groupIds": ["client-group"],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": null,
      "originalText": "React App\nBrowser",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "rectangle",
      "id": "server",
      "x": 320,
      "y": 100,
      "width": 160,
      "height": 120,
      "angle": 0,
      "strokeColor": "#2f9e44",
      "backgroundColor": "#b2f2bb",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 2004,
      "version": 1,
      "versionNonce": 2004,
      "isDeleted": false,
      "groupIds": ["server-group"],
      "boundElements": [
        { "id": "arrow-client-server", "type": "arrow" },
        { "id": "arrow-server-db", "type": "arrow" }
      ],
      "link": null,
      "locked": false,
      "roundness": { "type": 3 }
    },
    {
      "type": "text",
      "id": "server-title",
      "x": 355,
      "y": 115,
      "width": 90,
      "height": 30,
      "text": "Server",
      "fontSize": 24,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "top",
      "angle": 0,
      "strokeColor": "#2f9e44",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 2005,
      "version": 1,
      "versionNonce": 2005,
      "isDeleted": false,
      "groupIds": ["server-group"],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": null,
      "originalText": "Server",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "text",
      "id": "server-desc",
      "x": 340,
      "y": 155,
      "width": 120,
      "height": 50,
      "text": "Node.js\nREST API",
      "fontSize": 16,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "top",
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 2006,
      "version": 1,
      "versionNonce": 2006,
      "isDeleted": false,
      "groupIds": ["server-group"],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": null,
      "originalText": "Node.js\nREST API",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "ellipse",
      "id": "database",
      "x": 590,
      "y": 100,
      "width": 140,
      "height": 120,
      "angle": 0,
      "strokeColor": "#9c36b5",
      "backgroundColor": "#d0bfff",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 2007,
      "version": 1,
      "versionNonce": 2007,
      "isDeleted": false,
      "groupIds": ["db-group"],
      "boundElements": [{ "id": "arrow-server-db", "type": "arrow" }],
      "link": null,
      "locked": false
    },
    {
      "type": "text",
      "id": "db-title",
      "x": 610,
      "y": 130,
      "width": 100,
      "height": 30,
      "text": "Database",
      "fontSize": 20,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "top",
      "angle": 0,
      "strokeColor": "#9c36b5",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 2008,
      "version": 1,
      "versionNonce": 2008,
      "isDeleted": false,
      "groupIds": ["db-group"],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": null,
      "originalText": "Database",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "text",
      "id": "db-desc",
      "x": 620,
      "y": 165,
      "width": 80,
      "height": 25,
      "text": "PostgreSQL",
      "fontSize": 14,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "top",
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 2009,
      "version": 1,
      "versionNonce": 2009,
      "isDeleted": false,
      "groupIds": ["db-group"],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": null,
      "originalText": "PostgreSQL",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "arrow",
      "id": "arrow-client-server",
      "x": 215,
      "y": 160,
      "width": 100,
      "height": 0,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 2010,
      "version": 1,
      "versionNonce": 2010,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "points": [[0, 0], [100, 0]],
      "startArrowhead": "arrow",
      "endArrowhead": "arrow",
      "startBinding": { "elementId": "client", "focus": 0, "gap": 5 },
      "endBinding": { "elementId": "server", "focus": 0, "gap": 5 }
    },
    {
      "type": "arrow",
      "id": "arrow-server-db",
      "x": 485,
      "y": 160,
      "width": 100,
      "height": 0,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 2011,
      "version": 1,
      "versionNonce": 2011,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "points": [[0, 0], [100, 0]],
      "startArrowhead": "arrow",
      "endArrowhead": "arrow",
      "startBinding": { "elementId": "server", "focus": 0, "gap": 5 },
      "endBinding": { "elementId": "database", "focus": 0, "gap": 5 }
    },
    {
      "type": "text",
      "id": "arrow-label-1",
      "x": 235,
      "y": 130,
      "width": 60,
      "height": 20,
      "text": "HTTP",
      "fontSize": 14,
      "fontFamily": 3,
      "textAlign": "center",
      "verticalAlign": "middle",
      "angle": 0,
      "strokeColor": "#868e96",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 2012,
      "version": 1,
      "versionNonce": 2012,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": null,
      "originalText": "HTTP",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "text",
      "id": "arrow-label-2",
      "x": 510,
      "y": 130,
      "width": 50,
      "height": 20,
      "text": "SQL",
      "fontSize": 14,
      "fontFamily": 3,
      "textAlign": "center",
      "verticalAlign": "middle",
      "angle": 0,
      "strokeColor": "#868e96",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 2013,
      "version": 1,
      "versionNonce": 2013,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": null,
      "originalText": "SQL",
      "autoResize": true,
      "lineHeight": 1.25
    }
  ],
  "appState": {
    "viewBackgroundColor": "#ffffff",
    "gridSize": null
  },
  "files": {}
}
```

---

## Sequence-Style Diagram

User authentication flow:

```json
{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "type": "rectangle",
      "id": "user-box",
      "x": 50,
      "y": 50,
      "width": 100,
      "height": 50,
      "angle": 0,
      "strokeColor": "#1971c2",
      "backgroundColor": "#a5d8ff",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 3001,
      "version": 1,
      "versionNonce": 3001,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": [{ "id": "user-label", "type": "text" }],
      "link": null,
      "locked": false,
      "roundness": { "type": 3 }
    },
    {
      "type": "text",
      "id": "user-label",
      "x": 75,
      "y": 62,
      "width": 50,
      "height": 25,
      "text": "User",
      "fontSize": 20,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "angle": 0,
      "strokeColor": "#1971c2",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 3002,
      "version": 1,
      "versionNonce": 3002,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": "user-box",
      "originalText": "User",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "rectangle",
      "id": "auth-box",
      "x": 250,
      "y": 50,
      "width": 100,
      "height": 50,
      "angle": 0,
      "strokeColor": "#2f9e44",
      "backgroundColor": "#b2f2bb",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 3003,
      "version": 1,
      "versionNonce": 3003,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": [{ "id": "auth-label", "type": "text" }],
      "link": null,
      "locked": false,
      "roundness": { "type": 3 }
    },
    {
      "type": "text",
      "id": "auth-label",
      "x": 275,
      "y": 62,
      "width": 50,
      "height": 25,
      "text": "Auth",
      "fontSize": 20,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "angle": 0,
      "strokeColor": "#2f9e44",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 3004,
      "version": 1,
      "versionNonce": 3004,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": "auth-box",
      "originalText": "Auth",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "rectangle",
      "id": "db-box",
      "x": 450,
      "y": 50,
      "width": 100,
      "height": 50,
      "angle": 0,
      "strokeColor": "#9c36b5",
      "backgroundColor": "#d0bfff",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 3005,
      "version": 1,
      "versionNonce": 3005,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": [{ "id": "db-label", "type": "text" }],
      "link": null,
      "locked": false,
      "roundness": { "type": 3 }
    },
    {
      "type": "text",
      "id": "db-label",
      "x": 485,
      "y": 62,
      "width": 30,
      "height": 25,
      "text": "DB",
      "fontSize": 20,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "angle": 0,
      "strokeColor": "#9c36b5",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 3006,
      "version": 1,
      "versionNonce": 3006,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": "db-box",
      "originalText": "DB",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "line",
      "id": "user-lifeline",
      "x": 100,
      "y": 105,
      "width": 0,
      "height": 300,
      "angle": 0,
      "strokeColor": "#1971c2",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "strokeStyle": "dashed",
      "roughness": 0,
      "opacity": 100,
      "seed": 3007,
      "version": 1,
      "versionNonce": 3007,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "points": [[0, 0], [0, 300]],
      "startArrowhead": null,
      "endArrowhead": null
    },
    {
      "type": "line",
      "id": "auth-lifeline",
      "x": 300,
      "y": 105,
      "width": 0,
      "height": 300,
      "angle": 0,
      "strokeColor": "#2f9e44",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "strokeStyle": "dashed",
      "roughness": 0,
      "opacity": 100,
      "seed": 3008,
      "version": 1,
      "versionNonce": 3008,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "points": [[0, 0], [0, 300]],
      "startArrowhead": null,
      "endArrowhead": null
    },
    {
      "type": "line",
      "id": "db-lifeline",
      "x": 500,
      "y": 105,
      "width": 0,
      "height": 300,
      "angle": 0,
      "strokeColor": "#9c36b5",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "strokeStyle": "dashed",
      "roughness": 0,
      "opacity": 100,
      "seed": 3009,
      "version": 1,
      "versionNonce": 3009,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "points": [[0, 0], [0, 300]],
      "startArrowhead": null,
      "endArrowhead": null
    },
    {
      "type": "arrow",
      "id": "msg-1",
      "x": 105,
      "y": 150,
      "width": 190,
      "height": 0,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 3010,
      "version": 1,
      "versionNonce": 3010,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "points": [[0, 0], [190, 0]],
      "startArrowhead": null,
      "endArrowhead": "arrow"
    },
    {
      "type": "text",
      "id": "msg-1-label",
      "x": 150,
      "y": 125,
      "width": 100,
      "height": 20,
      "text": "1. Login request",
      "fontSize": 14,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 3011,
      "version": 1,
      "versionNonce": 3011,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": null,
      "originalText": "1. Login request",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "arrow",
      "id": "msg-2",
      "x": 305,
      "y": 200,
      "width": 190,
      "height": 0,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 3012,
      "version": 1,
      "versionNonce": 3012,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "points": [[0, 0], [190, 0]],
      "startArrowhead": null,
      "endArrowhead": "arrow"
    },
    {
      "type": "text",
      "id": "msg-2-label",
      "x": 350,
      "y": 175,
      "width": 100,
      "height": 20,
      "text": "2. Verify user",
      "fontSize": 14,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 3013,
      "version": 1,
      "versionNonce": 3013,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": null,
      "originalText": "2. Verify user",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "arrow",
      "id": "msg-3",
      "x": 495,
      "y": 250,
      "width": 190,
      "height": 0,
      "angle": 0,
      "strokeColor": "#2f9e44",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "dashed",
      "roughness": 1,
      "opacity": 100,
      "seed": 3014,
      "version": 1,
      "versionNonce": 3014,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "points": [[0, 0], [-190, 0]],
      "startArrowhead": null,
      "endArrowhead": "arrow"
    },
    {
      "type": "text",
      "id": "msg-3-label",
      "x": 350,
      "y": 225,
      "width": 100,
      "height": 20,
      "text": "3. User found",
      "fontSize": 14,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "angle": 0,
      "strokeColor": "#2f9e44",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 3015,
      "version": 1,
      "versionNonce": 3015,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": null,
      "originalText": "3. User found",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "arrow",
      "id": "msg-4",
      "x": 295,
      "y": 300,
      "width": 190,
      "height": 0,
      "angle": 0,
      "strokeColor": "#2f9e44",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "dashed",
      "roughness": 1,
      "opacity": 100,
      "seed": 3016,
      "version": 1,
      "versionNonce": 3016,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "points": [[0, 0], [-190, 0]],
      "startArrowhead": null,
      "endArrowhead": "arrow"
    },
    {
      "type": "text",
      "id": "msg-4-label",
      "x": 150,
      "y": 275,
      "width": 100,
      "height": 20,
      "text": "4. JWT token",
      "fontSize": 14,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "angle": 0,
      "strokeColor": "#2f9e44",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "seed": 3017,
      "version": 1,
      "versionNonce": 3017,
      "isDeleted": false,
      "groupIds": [],
      "boundElements": null,
      "link": null,
      "locked": false,
      "containerId": null,
      "originalText": "4. JWT token",
      "autoResize": true,
      "lineHeight": 1.25
    }
  ],
  "appState": {
    "viewBackgroundColor": "#ffffff",
    "gridSize": null
  },
  "files": {}
}
```

---

## Tips for Creating Your Own Diagrams

1. **Start simple** - Create shapes first, then add text, then arrows
2. **Calculate positions** - Plan your layout on paper first
3. **Use consistent spacing** - 50-100px between elements works well
4. **Unique seeds** - Every element needs a unique seed number
5. **Test incrementally** - Paste into excalidraw.com to verify after each addition