mirror of
https://github.com/eggent-ai/eggent.git
synced 2026-05-03 23:36:33 +00:00
32 KiB
32 KiB
Excalidraw Diagram Examples
Complete, working examples of common diagram types.
Simple Flowchart
A basic yes/no decision flowchart:
{
"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:
{
"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:
{
"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
- Start simple - Create shapes first, then add text, then arrows
- Calculate positions - Plan your layout on paper first
- Use consistent spacing - 50-100px between elements works well
- Unique seeds - Every element needs a unique seed number
- Test incrementally - Paste into excalidraw.com to verify after each addition