Privacy Sketch LLM Reference Guide

This document serves as the ground truth for Large Language Models (LLMs) to generate valid JSON diagrams for Privacy Sketch. Privacy Sketch uses a Rough.js-based rendering engine to create hand-drawn style diagrams.

🚨 CRITICAL LINE & ARROW RULES — READ THIS FIRST

This is different from mathematical lines! The rendering engine requires minimum dimension values.

💡 Why h=1 and w=1?

The Privacy Sketch rendering engine uses the w and h values to determine arrow direction and calculate the arrowhead position. A value of 0 would cause the arrow to not render or render incorrectly. Using 1 ensures proper rendering while keeping the line essentially straight.

⚠️ Common Mistakes to Avoid

These are the most frequent errors when generating line and arrow elements:

Horizontal Lines/Arrows

❌ WRONG — Will not render correctly
{ "type": "arrow", "x": 100, "y": 100, "w": 200, "h": 0 }

Using h: 0 breaks the arrow rendering!

✅ CORRECT — Renders properly
{ "type": "arrow", "x": 100, "y": 100, "w": 200, "h": 1 }

Using h: 1 creates a proper horizontal arrow.

Vertical Lines/Arrows

❌ WRONG — Will not render correctly
{ "type": "arrow", "x": 100, "y": 100, "w": 0, "h": 200 }

Using w: 0 breaks the arrow rendering!

✅ CORRECT — Renders properly
{ "type": "arrow", "x": 100, "y": 100, "w": 1, "h": 200 }

Using w: 1 creates a proper vertical arrow.

Lines (Same Rules Apply)

❌ WRONG — Horizontal line with h=0
{ "type": "line", "x": 50, "y": 150, "w": 300, "h": 0 }
✅ CORRECT — Horizontal line with h=1
{ "type": "line", "x": 50, "y": 150, "w": 300, "h": 1 }

📋 Pre-Flight Checklist — Verify Before Generating JSON

All horizontal arrows/lines have h = 1 (not 0)
All vertical arrows/lines have w = 1 (not 0)
NO arrows/lines have both w = 0 AND h = 0
Diagonal lines are intentional (both w and h are large values)
All elements have unique id values
Version is set to "2.0"

Quick Reference

TL;DR for LLMs: Every element needs: id (unique string), type, x, y, w, h. Version must be "2.0". Use w/h not width/height. Text color is set via options.stroke.
⚠️ CRITICAL for Lines/Arrows: For horizontal lines/arrows, set h = 1 (NOT 0!). For vertical lines/arrows, set w = 1 (NOT 0!). If both w and h are large, the line will be DIAGONAL!
Table of Contents
  1. ⚠️ Critical Line & Arrow Rules
  2. Common Mistakes to Avoid
  3. JSON Schema Structure
  4. Options Reference
  5. Element Reference
  6. Icon Reference
  7. Multi-shot Examples
  8. Minimal Complete Example
  9. Common Patterns
  10. Anti-Patterns
  11. Step-by-Step Tutorials

1. JSON Schema Structure

A valid Privacy Sketch file is a JSON object with the following structure:

{
    "version": "2.0",
    "elements": [
        // Array of Element objects (see Element Reference)
    ],
    "appState": {
        "zoom": 1,
        "panX": 0,
        "panY": 0
    },
    "theme": {
        "roughness": 1.5,
        "bowing": 1,
        "fillStyle": "hachure" // solid, hachure, zigzag, cross-hatch, dots
    }
}

1.1 TypeScript Interface Definition

For LLMs: This is the formal type definition. Use these interfaces as the ground truth.

// Root Document Structure
interface PrivacySketchDocument {
  version: "2.0";                    // REQUIRED - must be exactly "2.0"
  elements: Element[];               // REQUIRED - array of elements
  appState?: AppState;               // OPTIONAL - viewport settings
  theme?: Theme;                     // OPTIONAL - global style defaults
}

// Shared base for ALL elements
interface BaseElement {
  id: string;                        // REQUIRED - unique identifier
  type: ElementType;                 // REQUIRED - element type
  x: number;                         // REQUIRED - left edge X coordinate
  y: number;                         // REQUIRED - top edge Y coordinate
  w: number;                         // REQUIRED - width in pixels
  h: number;                         // REQUIRED - height in pixels
  angle?: number;                    // OPTIONAL - rotation in radians, default: 0
  borderRadius?: number;             // OPTIONAL - corner radius, default: 0
  options?: StyleOptions;            // OPTIONAL - visual styling
  animation?: Animation;             // OPTIONAL - animation settings
}

type ElementType = 
  | "rectangle" | "ellipse" | "diamond" | "cloud" 
  | "cylinder" | "actor" | "line" | "arrow" 
  | "curvedArrow" | "text" | "icon" | "tablerIcon" | "group";

interface StyleOptions {
  stroke?: string;                   // Border color
  strokeWidth?: number;              // Border thickness (default: 2)
  fill?: string;                     // Fill color or "transparent"
  fillStyle?: FillStyle;             // Fill pattern
  roughness?: number;                // Sketchiness 0-5 (default: 1.5)
  bowing?: number;                   // Line curvature (default: 1)
  lineStyle?: "solid" | "dashed" | "dotted";
  seed?: number;                     // Random seed for consistent rendering
}

type FillStyle = "solid" | "hachure" | "zigzag" | "cross-hatch" | "dots" | "dashed" | "zigzag-line";

1.2 Coordinate System

Privacy Sketch uses a standard screen coordinate system:

    (0,0) ────────────────────────► X (increases right)
      │
      │    ┌───────────────┐
      │    │  x:100, y:50  │
      │    │  w:200, h:100 │
      │    └───────────────┘
      │
      ▼
      Y (increases down)
Property Description Typical Range
x Distance from left edge of canvas to left edge of element 0 - 1400
y Distance from top edge of canvas to top edge of element 0 - 1000
w Width of the element's bounding box 50 - 400
h Height of the element's bounding box 30 - 300
Canvas Size Recommendations: Start elements at x:40, y:40 minimum to leave margin.

1.3 ID Generation Rules

Rule ✅ Valid ❌ Invalid
Must be unique across all elements "box-1", "box-2" Two elements with same id
Use kebab-case convention "user-profile", "stage-dev" "user profile"
Only alphanumeric + hyphens "arrow-a1", "text-title" "arrow@1", "text#1"
Start with letter "a1", "box1" "1box"

Recommended pattern: {type}-{purpose} e.g., "rect-header", "arrow-flow1", "text-title"

2. Options Reference

The options object controls the visual style of elements. All properties are optional.

Property Type / Values Description Example
stroke Color String (Hex, Name) Border color of the shape. "#000000", "blue.500"
strokeWidth Number Thickness of the border lines. 2 (default), 4
fill Color String | "transparent" Fill color. Use "transparent" for no fill. "#ff0000", "rgba(0,0,255,0.5)"
fillStyle Enum: "hachure", "solid", "zigzag", "cross-hatch", "dots", "dashed", "zigzag-line" Pattern used to fill the shape. "solid" fills completely. "hachure" (sketchy default)
roughness Number (0 - 5) How "sketchy" the lines look. 0 is perfect/flat, higher is messier. 1.5 (default), 0 (clean)
bowing Number How much lines curve. Higher values look more organic. 1 (default)
lineStyle Enum: "solid", "dashed", "dotted" Style of the stroke lines. "solid"
seed Number Random seed for Rough.js generation. Keep constant to prevent jitter on re-render. 12345

2.1 Valid Color Formats

Colors can be specified in multiple formats:

Format Example Notes
Hex (6-digit) "#ff5733", "#1e293b" Most reliable
Hex (3-digit) "#f00", "#0af" Expands to 6-digit
Tailwind Token "blue.500", "green.900" Semantic colors
Named "black", "white", "transparent" CSS named colors
RGBA "rgba(255,0,0,0.5)" With transparency

Tailwind Color Tokens

Format: {colorName}.{shade}. Available shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
slate
gray
zinc
neutral
Tip: Use .500 for standard color, .200-.300 for light fills, .700-.900 for dark backgrounds.

2.2 Arrow and Line Positioning (Critical)

🚨 MANDATORY DIMENSION RULES

Failure to follow these rules will result in broken or diagonal lines/arrows!

Arrow and line coordinates define a bounding box, NOT traditional start/end points:

Arrow: { x: 200, y: 100, w: 150, h: 1 }  // ← Note: h=1 for horizontal!

Start Point = (x, y)           = (200, 100)
End Point   = (x + w, y + h)   = (350, 101)  // Essentially horizontal
⚠️ CRITICAL RULE for Lines and Arrows:

Dimension Rules for Straight Lines/Arrows

Direction w value h value Result
→ Horizontal Right positive (length) 1 to 5 Straight horizontal line pointing right
← Horizontal Left negative (length) 1 to 5 Straight horizontal line pointing left
↓ Vertical Down 1 to 5 positive (length) Straight vertical line pointing down
↑ Vertical Up 1 to 5 negative (length) Straight vertical line pointing up
↘ Diagonal positive (both large) positive (both large) Diagonal line (intentional)

Examples: Correct vs Incorrect

// ✅ CORRECT: Horizontal arrow (h is small)
{ "type": "arrow", "x": 100, "y": 200, "w": 150, "h": 2, "endArrowhead": "arrow" }

// ✅ CORRECT: Vertical arrow (w is small)
{ "type": "arrow", "x": 100, "y": 200, "w": 2, "h": 100, "endArrowhead": "arrow" }

// ❌ WRONG: This creates a DIAGONAL arrow, not horizontal!
{ "type": "arrow", "x": 100, "y": 200, "w": 150, "h": 50, "endArrowhead": "arrow" }

// ❌ WRONG: This creates a DIAGONAL arrow, not vertical!
{ "type": "arrow", "x": 100, "y": 200, "w": 80, "h": 100, "endArrowhead": "arrow" }

Connecting Two Shapes

Box A: { x: 50, y: 100, w: 100, h: 60 }
Box B: { x: 250, y: 100, w: 100, h: 60 }

// Arrow from right edge of A to left edge of B (horizontal)
Arrow: { "x": 150, "y": 130, "w": 100, "h": 1, "endArrowhead": "arrow" }
//                                       ↑ h=1 makes it perfectly horizontal!

Arrowhead Options

Property Values Description
startArrowhead "none", "arrow", "dot" Arrowhead at start point (x, y)
endArrowhead "none", "arrow", "dot" Arrowhead at end point (x+w, y+h)

2.3 Text Element Deep Dive

Property Type Required Default
text string ✅ Yes -
fontSize number No 16
fontFamily string No "Comic Sans MS"
align "left" | "center" | "right" No "left"
fontWeight "normal" | "bold" No "normal"
fontStyle "normal" | "italic" No "normal"
backgroundColor color | null No null
Note: For text, options.stroke sets the TEXT COLOR.

2.4 Animation Reference

"animation": { "type": "fadeIn", "delay": 500, "duration": 300 }
type Description
"none" No animation (default)
"fadeIn" Fade in from transparent
"slideIn" Slide in from off-screen
"bounce" Bounce entrance effect

3. Element Reference

Use these element types in the elements array. All elements share base properties: id, type, x, y, w, h, angle, options.

rectangle
Basic rectangular shape. Supports rounded corners.
{
  "type": "rectangle",
  "x": 100,
  "y": 100,
  "w": 200,
  "h": 100,
  "borderRadius": 10,
  "options": {
    "fill": "blue.200",
    "stroke": "black"
  }
}
ellipse
Circles and ovals.
{
  "type": "ellipse",
  "x": 100,
  "y": 100,
  "w": 100,
  "h": 100,
  "options": {
    "fill": "red.200"
  }
}
text
Text label. Supports multiline, alignment, and styling.
{
  "type": "text",
  "x": 100,
  "y": 100,
  "w": 200,
  "h": 50,
  "text": "Hello World",
  "fontSize": 20,
  "align": "center",
  "fontFamily": "Comic Sans MS",
  "options": {
    "stroke": "black"
  }
}
arrow
Connecting line with arrowheads.
⚠️ CRITICAL: For horizontal arrows use h: 1. For vertical arrows use w: 1. 
// Horizontal arrow (h=1 is MANDATORY!)
{
  "type": "arrow",
  "x": 100,
  "y": 100,
  "w": 150,   // Length of horizontal arrow
  "h": 1,     // ← MUST be 1, NOT 0!
  "endArrowhead": "arrow"
}

// Vertical arrow (w=1 is MANDATORY!)
{
  "type": "arrow",
  "x": 100,
  "y": 100,
  "w": 1,     // ← MUST be 1, NOT 0!
  "h": 100,   // Length of vertical arrow
  "endArrowhead": "arrow"
}
curvedArrow
Quadratic bezier curve arrow. Control point defines curvature.
{
  "type": "curvedArrow",
  "x": 100,
  "y": 100,
  "w": 200,
  "h": 100,
  "controlX": 0,
  "controlY": -50,
  "options": {
    "stroke": "black"
  }
}
icon
Generic built-in icons (see Icon Reference).
{
  "type": "icon",
  "x": 100,
  "y": 100,
  "w": 64,
  "h": 64,
  "iconCategory": "technology",
  "iconName": "server",
  "options": {
    "stroke": "black"
  }
}
tablerIcon
SVG-based cloud/custom icons. Use for AWS/Azure/GCP.
{
  "type": "tablerIcon",
  "x": 100,
  "y": 100,
  "w": 64,
  "h": 64,
  "iconName": "EC2",
  "svgContent": "",
  "options": {
    "stroke": "orange.500"
  }
}
group
Logical grouping of elements. Groups allow multiple elements to be moved, resized, and selected together.
Key Properties:
  • children - Array of element IDs that belong to this group
  • x, y, w, h - Bounding box (auto-calculated from children)
Usage Notes:
  • Child elements are rendered independently (not nested)
  • Group's bounding box is recalculated from children on load
  • When moving a group, all children move together
  • Groups display a subtle dashed purple border
{
  "type": "group",
  "id": "my-group",
  "x": 100,
  "y": 100,
  "w": 300,
  "h": 200,
  "children": [
    "element-id-1",
    "element-id-2",
    "element-id-3"
  ]
}
diamond
Rhombus shape, often used for decisions.
{
  "type": "diamond",
  "x": 0,
  "y": 0,
  "w": 100,
  "h": 100
}
cylinder
Database or storage representation.
{
  "type": "cylinder",
  "x": 0,
  "y": 0,
  "w": 80,
  "h": 120
}
cloud
Cloud shape.
{
  "type": "cloud",
  "x": 0,
  "y": 0,
  "w": 150,
  "h": 100
}
actor
Stick figure user/actor.
{
  "type": "actor",
  "x": 0,
  "y": 0,
  "w": 60,
  "h": 100
}
line
Simple line segment.
⚠️ CRITICAL: For horizontal lines use h: 1. For vertical lines use w: 1. 
// Horizontal line (h=1 is MANDATORY!)
{
  "type": "line",
  "x": 50,
  "y": 150,
  "w": 200,   // Length of horizontal line
  "h": 1      // ← MUST be 1, NOT 0!
}

// Vertical line (w=1 is MANDATORY!)
{
  "type": "line",
  "x": 150,
  "y": 50,
  "w": 1,     // ← MUST be 1, NOT 0!
  "h": 200    // Length of vertical line
}

4. Icon Reference

Generic Icons

Use the icon element type. Set iconCategory and iconName.

People & Figures
Category: people
person
walking
running
sitting
group
Emoji & Faces
Category: emoji
smiley
sad
wink
surprised
Hand Gestures
Category: gestures
thumbsUp
thumbsDown
pointUp
peace
ok
Business
Category: business
chart
money
briefcase
handshake
Technology
Category: technology
laptop
phone
server
wifi
Objects
Category: objects
house
lightbulb
book
clock
Arrows
Category: arrows
arrowRight
arrowUp
arrowCurved
refresh
Nature
Category: nature
tree
sun
cloud
flower
Symbols & Badges
Category: symbols
heart
star
check
cross
badge
paw
eye
Charts & Data
Category: charts
pieChart
lineChart
trending
Social Media
Category: social
like
share
comment
🎨 Rich Icon Libraries Available! Privacy Sketch includes thousands of professional icons from:
  • AWS — EC2, Lambda, S3, RDS, DynamoDB, CloudFront, and 200+ services
  • Azure — Virtual Machines, Functions, Storage, SQL, App Service, and 200+ services
  • GCP — Compute Engine, Cloud Functions, BigQuery, Cloud Storage, and 150+ services
  • Tabler Icons — 3000+ general-purpose SVG icons for any use case

☁️ Cloud Provider Icons (AWS / Azure / GCP)

When to use: For cloud architecture diagrams, infrastructure diagrams, serverless architectures, or any diagram involving cloud services.

💡 LLM Tip: When the user asks for a cloud architecture diagram, always use these cloud icons instead of generic shapes. It makes diagrams look professional and accurately represents the services.

How to Use Cloud Icons

Use the tablerIcon element type with iconName set to the service name:

// AWS Lambda function icon
{
  "type": "tablerIcon",
  "id": "lambda-fn",
  "x": 100, "y": 100, "w": 64, "h": 64,
  "iconName": "Lambda",
  "iconProvider": "aws"
}

// Azure Function icon
{
  "type": "tablerIcon",
  "id": "azure-fn",
  "x": 200, "y": 100, "w": 64, "h": 64,
  "iconName": "Functions",
  "iconProvider": "azure"
}

// GCP Cloud Function icon  
{
  "type": "tablerIcon",
  "id": "gcp-fn",
  "x": 300, "y": 100, "w": 64, "h": 64,
  "iconName": "Cloud Functions",
  "iconProvider": "gcp"
}

Common Cloud Icon Examples

Use Case AWS Azure GCP
Compute/VMs EC2 Virtual Machine Compute Engine
Serverless Functions Lambda Functions Cloud Functions
Object Storage S3 Blob Storage Cloud Storage
SQL Database RDS SQL Database Cloud SQL
NoSQL Database DynamoDB Cosmos DB Firestore
Container Service ECS / EKS Container Instances Cloud Run
API Gateway API Gateway API Management API Gateway
CDN CloudFront CDN Cloud CDN
Message Queue SQS Service Bus Pub/Sub

🎯 Tabler Icons (General Purpose)

When to use: For general diagrams, flowcharts, infographics, or when you need icons that aren't cloud-specific.

💡 LLM Tip: Tabler icons cover almost every category: arrows, devices, brands, user interface, files, media, weather, and more. Use descriptive names like user, database, server, shield, lock, mail, etc.

How to Use Tabler Icons

// User icon from Tabler
{
  "type": "tablerIcon",
  "id": "user-icon",
  "x": 100, "y": 100, "w": 48, "h": 48,
  "iconName": "user"
}

// Database icon
{
  "type": "tablerIcon",
  "id": "db-icon",
  "x": 200, "y": 100, "w": 48, "h": 48,
  "iconName": "database"
}

Popular Tabler Icon Names

user
users
database
server
cloud
lock
shield
mail
message
phone
device-mobile
device-desktop
browser
api
code
git-branch
settings
refresh
upload
download

Full Cloud Provider Icon Lists

Below are the complete lists of available icons for each cloud provider:

AWS Icons (Provider: aws)

Analytics

Athena
CloudSearch
Data Firehose
DataZone
EMR
FinSpace
Kinesis
Kinesis Data Streams
Kinesis Video
OpenSearch
QuickSight
Redshift
Glue
Lake Formation

Compute

EC2
EC2 Auto Scaling
EC2 Image Builder
Lightsail
Batch
Elastic Beanstalk
Lambda
Outposts
SAR
App Runner
Compute Optimizer
EFA

Containers

ECS Anywhere
ECR
ECS
EKS
Fargate
OpenShift

Database

Aurora
DocumentDB
DynamoDB
ElastiCache
Keyspaces
MemoryDB
Neptune
RDS
Timestream
DMS

Storage

S3
S3 Glacier
EFS
EBS
FSx
Backup
Storage Gateway
Snowball

Networking

API Gateway
CloudFront
Route 53
VPC
App Mesh
Cloud Map
Direct Connect
Global Accelerator
PrivateLink
Transit Gateway
ELB

Security

IAM Identity Center
IAM
Cognito
ACM
KMS
Secrets Manager
Shield
WAF
GuardDuty
Inspector

AI & ML

Bedrock
Amazon Q
SageMaker
Lex
Polly
Rekognition
Textract
Transcribe
Translate
Comprehend
Personalize
Forecast

App Integration

SQS
SNS
EventBridge
Step Functions
Amazon MQ
AppSync
AppFlow

Management

CloudWatch
CloudFormation
CloudTrail
Config
Systems Manager
Organizations
Control Tower
Azure Icons (Provider: azure)

Compute

Virtual Machine
Function Apps
App Services
VM Scale Sets
Availability Sets
Batch
Container Instances

Networking

Virtual Network
Load Balancer
App Gateway
DNS Zones
CDN
ExpressRoute
Private Link

Databases

Azure SQL
Cosmos DB
MySQL
Synapse
PostgreSQL
Data Warehouse

Storage

Storage Account
Recovery Vault
Databox Gateway
File Shares

Containers

AKS
Container Instances
OpenShift
Service Fabric

Security

Defender for IoT
Defender EASM
Secure Score

Identity

Groups
Admin Units
PIM
Tenant

DevOps

App Insights
Load Testing
DevOps Starter
Lab Accounts

Analytics

Synapse
Data Factory
Event Hubs
Stream Analytics
Log Analytics
GCP Icons (Provider: gcp)

Compute

Compute

Compute Engine

Compute Engine

Cloud Run

Cloud Run

GKE

GKE

BigQuery

BigQuery

Cloud Storage

Cloud Storage

Cloud SQL

Cloud SQL

Cloud Spanner

Cloud Spanner

AlloyDB

AlloyDB

Vertex AI

Vertex AI

AI & ML

AI & ML

Networking

Networking

Apigee

Apigee

Anthos

Anthos

Looker

Looker

Data Analytics

Data Analytics

Security

Security Center

DevOps

DevOps

Operations

Operations

5. Multi-shot Examples

These examples demonstrate how to translate natural language prompts into valid Privacy Sketch JSON.

Example 1: CI/CD Pipeline Architecture

Prompt: "Create a CI/CD pipeline diagram showing flow from GitHub to Production."

Example 1: CI/CD Pipeline Architecture
Reasoning:
  • Flow Direction: Left-to-right layout representing time/process progression.
  • Grouping: Uses background rectangles (colored) to visually group stages (Dev, CI, CD, Prod).
  • Icons: Uses standard emojis in Text elements for simple icons (🐙, 📦, 🚀) to keep it lightweight, and specialized Cloud icons (AWS, GCP) for infrastructure.
  • Connectors: Arrows clearly indicate the flow of artifacts between stages.
View JSON Source 
{
  "version": "2.0",
  "elements": [
    {
      "id": "bg",
      "type": "rectangle",
      "x": 20,
      "y": 20,
      "w": 1300,
      "h": 600,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#0f172a",
        "strokeWidth": 3,
        "fill": "#1e293b",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1258370948,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "title",
      "type": "text",
      "x": 350,
      "y": 40,
      "w": 600,
      "h": 35,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#e2e8f0",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1407304900,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udd04 CI/CD Pipeline Architecture",
      "fontSize": 28,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "subtitle",
      "type": "text",
      "x": 400,
      "y": 75,
      "w": 500,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#94a3b8",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 619382392,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Automated Build, Test & Deploy with GitHub Actions",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "italic",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "stage-dev",
      "type": "rectangle",
      "x": 40,
      "y": 110,
      "w": 220,
      "h": 480,
      "angle": 0,
      "borderRadius": 15,
      "options": {
        "stroke": "blue.500",
        "strokeWidth": 2,
        "fill": "#172554",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 392233408,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "stage-dev-t",
      "type": "text",
      "x": 40,
      "y": 125,
      "w": 220,
      "h": 25,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "blue.400",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1192690153,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udcbb DEV",
      "fontSize": 16,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "stage-ci",
      "type": "rectangle",
      "x": 280,
      "y": 110,
      "w": 280,
      "h": 480,
      "angle": 0,
      "borderRadius": 15,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "green.900",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 404058000,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "stage-ci-t",
      "type": "text",
      "x": 280,
      "y": 125,
      "w": 280,
      "h": 25,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.400",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 53201848,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\u2705 CONTINUOUS INTEGRATION",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "stage-cd",
      "type": "rectangle",
      "x": 580,
      "y": 110,
      "w": 280,
      "h": 480,
      "angle": 0,
      "borderRadius": 15,
      "options": {
        "stroke": "amber.500",
        "strokeWidth": 2,
        "fill": "amber.900",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1894797527,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "stage-cd-t",
      "type": "text",
      "x": 580,
      "y": 125,
      "w": 280,
      "h": 25,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "amber.400",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1724529706,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\ude80 CONTINUOUS DELIVERY",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "stage-prod",
      "type": "rectangle",
      "x": 880,
      "y": 110,
      "w": 420,
      "h": 480,
      "angle": 0,
      "borderRadius": 15,
      "options": {
        "stroke": "#8b5cf6",
        "strokeWidth": 2,
        "fill": "#4c1d95",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1706785255,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "stage-prod-t",
      "type": "text",
      "x": 880,
      "y": 125,
      "w": 420,
      "h": 25,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#a78bfa",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1674850497,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\u2601\ufe0f PRODUCTION DEPLOY",
      "fontSize": 16,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "github",
      "type": "rectangle",
      "x": 60,
      "y": 170,
      "w": 180,
      "h": 80,
      "angle": 0,
      "borderRadius": 12,
      "options": {
        "stroke": "#6e7681",
        "strokeWidth": 2,
        "fill": "#21262d",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1948345572,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "github-icon",
      "type": "text",
      "x": 60,
      "y": 185,
      "w": 180,
      "h": 30,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "black",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1454659970,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udc19",
      "fontSize": 28,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "github-t",
      "type": "text",
      "x": 60,
      "y": 220,
      "w": 180,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#e6edf3",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1413415405,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "GitHub Repo",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "commit",
      "type": "rectangle",
      "x": 60,
      "y": 280,
      "w": 180,
      "h": 60,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "blue.500",
        "strokeWidth": 2,
        "fill": "blue.800",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 654613835,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "commit-t",
      "type": "text",
      "x": 60,
      "y": 300,
      "w": 180,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "blue.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 631641005,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udcdd Git Commit",
      "fontSize": 13,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "pr",
      "type": "rectangle",
      "x": 60,
      "y": 370,
      "w": 180,
      "h": 60,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "blue.500",
        "strokeWidth": 2,
        "fill": "blue.800",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1403482274,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "pr-t",
      "type": "text",
      "x": 60,
      "y": 390,
      "w": 180,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "blue.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1585592657,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udd00 Pull Request",
      "fontSize": 13,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "a3",
      "type": "arrow",
      "x": 240,
      "y": 400,
      "w": 50,
      "h": 100,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.400",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 49310459,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    },
    {
      "id": "trigger",
      "type": "diamond",
      "x": 305,
      "y": 180,
      "w": 80,
      "h": 60,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "green.800",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1888530568,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "trigger-t",
      "type": "text",
      "x": 305,
      "y": 200,
      "w": 80,
      "h": 18,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.400",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1091312742,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Trigger",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "lint",
      "type": "rectangle",
      "x": 300,
      "y": 260,
      "w": 120,
      "h": 55,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "green.700",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1460928205,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "lint-icon",
      "type": "text",
      "x": 300,
      "y": 270,
      "w": 120,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "black",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 2127220689,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udd0d",
      "fontSize": 18,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "lint-t",
      "type": "text",
      "x": 300,
      "y": 295,
      "w": 120,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 524077933,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Lint & Format",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "test",
      "type": "rectangle",
      "x": 440,
      "y": 260,
      "w": 100,
      "h": 55,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "green.700",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 283219426,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "test-icon",
      "type": "text",
      "x": 440,
      "y": 270,
      "w": 100,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "black",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1563229605,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83e\uddea",
      "fontSize": 18,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "test-t",
      "type": "text",
      "x": 440,
      "y": 295,
      "w": 100,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 965409256,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Unit Tests",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "build",
      "type": "rectangle",
      "x": 300,
      "y": 340,
      "w": 120,
      "h": 55,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "green.700",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1924941564,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "build-icon",
      "type": "text",
      "x": 300,
      "y": 350,
      "w": 120,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "black",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1576330040,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83c\udfd7\ufe0f",
      "fontSize": 18,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "build-t",
      "type": "text",
      "x": 300,
      "y": 375,
      "w": 120,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1585555683,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Build",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "security",
      "type": "rectangle",
      "x": 440,
      "y": 340,
      "w": 100,
      "h": 55,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "green.700",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 177558803,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "security-icon",
      "type": "text",
      "x": 440,
      "y": 350,
      "w": 100,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "black",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 308340364,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udd12",
      "fontSize": 18,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "security-t",
      "type": "text",
      "x": 440,
      "y": 375,
      "w": 100,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 636614010,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Security Scan",
      "fontSize": 10,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "artifact",
      "type": "rectangle",
      "x": 340,
      "y": 420,
      "w": 160,
      "h": 60,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "green.700",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1820904179,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "artifact-icon",
      "type": "text",
      "x": 340,
      "y": 430,
      "w": 160,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "black",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1153632164,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udce6",
      "fontSize": 18,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "artifact-t",
      "type": "text",
      "x": 340,
      "y": 455,
      "w": 160,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1658349461,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Docker Image",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "a9",
      "type": "arrow",
      "x": 500,
      "y": 450,
      "w": 90,
      "h": 100,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "amber.400",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1743569696,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    },
    {
      "id": "staging",
      "type": "rectangle",
      "x": 600,
      "y": 180,
      "w": 120,
      "h": 70,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "amber.500",
        "strokeWidth": 2,
        "fill": "amber.800",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 2119464985,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "staging-icon",
      "type": "text",
      "x": 600,
      "y": 195,
      "w": 120,
      "h": 25,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "black",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 984750918,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83c\udfad",
      "fontSize": 22,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "staging-t",
      "type": "text",
      "x": 600,
      "y": 225,
      "w": 120,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "amber.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 2060441212,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Staging",
      "fontSize": 13,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "e2e",
      "type": "rectangle",
      "x": 600,
      "y": 280,
      "w": 120,
      "h": 55,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "amber.500",
        "strokeWidth": 2,
        "fill": "amber.800",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 462817975,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "e2e-icon",
      "type": "text",
      "x": 600,
      "y": 290,
      "w": 120,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "black",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 834684321,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udd04",
      "fontSize": 18,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "e2e-t",
      "type": "text",
      "x": 600,
      "y": 315,
      "w": 120,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "amber.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1762881670,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "E2E Tests",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "perf",
      "type": "rectangle",
      "x": 740,
      "y": 280,
      "w": 100,
      "h": 55,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "amber.500",
        "strokeWidth": 2,
        "fill": "amber.800",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1332142383,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "perf-icon",
      "type": "text",
      "x": 740,
      "y": 290,
      "w": 100,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "black",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 230722647,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\u26a1",
      "fontSize": 18,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "perf-t",
      "type": "text",
      "x": 740,
      "y": 315,
      "w": 100,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "amber.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1329897755,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Perf Tests",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "approval",
      "type": "diamond",
      "x": 680,
      "y": 360,
      "w": 100,
      "h": 80,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "amber.500",
        "strokeWidth": 2,
        "fill": "amber.800",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1732468586,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "approval-t",
      "type": "text",
      "x": 680,
      "y": 390,
      "w": 100,
      "h": 18,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "amber.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1509446872,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Approval?",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "a13",
      "type": "arrow",
      "x": 780,
      "y": 400,
      "w": 110,
      "h": 100,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#a78bfa",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 805409025,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    },
    {
      "id": "aws",
      "type": "rectangle",
      "x": 900,
      "y": 170,
      "w": 180,
      "h": 90,
      "angle": 0,
      "borderRadius": 12,
      "options": {
        "stroke": "orange.500",
        "strokeWidth": 2,
        "fill": "orange.900",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 628690880,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "aws-icon",
      "type": "text",
      "x": 900,
      "y": 185,
      "w": 180,
      "h": 30,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "orange.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 624423520,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\u2601\ufe0f AWS",
      "fontSize": 20,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "aws-t",
      "type": "text",
      "x": 900,
      "y": 225,
      "w": 180,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "orange.200",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 215948313,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "ECS + CloudFront",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "gcp",
      "type": "rectangle",
      "x": 1100,
      "y": 170,
      "w": 180,
      "h": 90,
      "angle": 0,
      "borderRadius": 12,
      "options": {
        "stroke": "blue.500",
        "strokeWidth": 2,
        "fill": "blue.800",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 807681331,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "gcp-icon",
      "type": "text",
      "x": 1100,
      "y": 185,
      "w": 180,
      "h": 30,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "blue.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 853608476,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\u2601\ufe0f GCP",
      "fontSize": 20,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "gcp-t",
      "type": "text",
      "x": 1100,
      "y": 225,
      "w": 180,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "blue.200",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1862964699,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Cloud Run + CDN",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "monitor",
      "type": "rectangle",
      "x": 900,
      "y": 290,
      "w": 180,
      "h": 60,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "#8b5cf6",
        "strokeWidth": 2,
        "fill": "#6d28d9",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1275985187,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "monitor-t",
      "type": "text",
      "x": 900,
      "y": 310,
      "w": 180,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#c4b5fd",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 284758887,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udcca Datadog Monitor",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "alerts",
      "type": "rectangle",
      "x": 1100,
      "y": 290,
      "w": 180,
      "h": 60,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "#8b5cf6",
        "strokeWidth": 2,
        "fill": "#6d28d9",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 952633544,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "alerts-t",
      "type": "text",
      "x": 1100,
      "y": 310,
      "w": 180,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#c4b5fd",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 549323281,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udd14 PagerDuty Alerts",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "rollback",
      "type": "rectangle",
      "x": 1000,
      "y": 380,
      "w": 180,
      "h": 60,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "red.500",
        "strokeWidth": 2,
        "fill": "red.900",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 674314592,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "rollback-t",
      "type": "text",
      "x": 1000,
      "y": 400,
      "w": 180,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "red.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 293946674,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udd19 Auto Rollback",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "success",
      "type": "ellipse",
      "x": 1000,
      "y": 470,
      "w": 180,
      "h": 70,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 3,
        "fill": "green.800",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 2011844252,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "success-t",
      "type": "text",
      "x": 1000,
      "y": 495,
      "w": 180,
      "h": 25,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.400",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1530700922,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\u2705 LIVE!",
      "fontSize": 18,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "legend",
      "type": "rectangle",
      "x": 60,
      "y": 465,
      "w": 180,
      "h": 100,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "#475569",
        "strokeWidth": 2,
        "fill": "#334155",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 619117584,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "legend-t",
      "type": "text",
      "x": 70,
      "y": 480,
      "w": 160,
      "h": 18,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#e2e8f0",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 449013706,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\u23f1\ufe0f Pipeline Stats",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "legend-1",
      "type": "text",
      "x": 70,
      "y": 505,
      "w": 160,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#94a3b8",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 102480752,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Avg Build: 4m 32s",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "legend-2",
      "type": "text",
      "x": 70,
      "y": 525,
      "w": 160,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#94a3b8",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1231122347,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Deploy: 2m 15s",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "legend-3",
      "type": "text",
      "x": 70,
      "y": 545,
      "w": 160,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.400",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1799422280,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Success Rate: 98.5%",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "footer",
      "type": "text",
      "x": 450,
      "y": 600,
      "w": 400,
      "h": 18,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#64748b",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1601309434,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\u2728 Created with Privacy Sketch",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "italic",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    }
  ],
  "appState": {
    "zoom": 0.9999999999999999,
    "panX": 277,
    "panY": 105
  },
  "theme": {
    "roughness": 1.8,
    "bowing": 1.2,
    "fillStyle": "solid"
  }
}
Example 2: Web Evolution Timeline

Prompt: "Draw a timeline showing the history of web development from 1991 to 2024."

Example 2: Web Evolution Timeline
Reasoning:
  • Axis: A single, thick horizontal line acts as the central timeline axis.
  • Milestones: Grouped elements (Rectangle + Text) placed above the axis represent distinct eras.
  • Connectors: Vertical alignment implies the relationship to the timeline axis.
  • Color Coding: Each era uses a distinct color palette (Orange, Yellow, Green, Blue, Purple) to visually separate time periods.
View JSON Source 
{
  "version": "2.0",
  "elements": [
    {
      "id": "bg",
      "type": "rectangle",
      "x": 20,
      "y": 20,
      "w": 1100,
      "h": 700,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#1e293b",
        "strokeWidth": 3,
        "fill": "#0f172a",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1119607021,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "title",
      "type": "text",
      "x": 250,
      "y": 40,
      "w": 600,
      "h": 40,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#e2e8f0",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1026638657,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83c\udf10 Evolution of Web Development",
      "fontSize": 32,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "subtitle",
      "type": "text",
      "x": 300,
      "y": 85,
      "w": 500,
      "h": 22,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#94a3b8",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1593443138,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "From Static HTML to Full-Stack Frameworks (1991-2024)",
      "fontSize": 15,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "italic",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "timeline",
      "type": "line",
      "x": 100,
      "y": 420,
      "w": 872,
      "h": 7,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#475569",
        "strokeWidth": 4,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1319302490,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era1-bg",
      "type": "rectangle",
      "x": 60,
      "y": 130,
      "w": 160,
      "h": 250,
      "angle": 0,
      "borderRadius": 15,
      "options": {
        "stroke": "#64748b",
        "strokeWidth": 2,
        "fill": "#1e293b",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1834437370,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era1-year",
      "type": "text",
      "x": 60,
      "y": 145,
      "w": 160,
      "h": 22,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#94a3b8",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1044285243,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "1991-1996",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era1-title",
      "type": "text",
      "x": 60,
      "y": 175,
      "w": 160,
      "h": 30,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "orange.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 279910279,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udcc4 Static Era",
      "fontSize": 18,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era1-html",
      "type": "rectangle",
      "x": 75,
      "y": 215,
      "w": 130,
      "h": 45,
      "angle": 0,
      "borderRadius": 8,
      "options": {
        "stroke": "orange.500",
        "strokeWidth": 2,
        "fill": "orange.900",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1932608443,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era1-html-t",
      "type": "text",
      "x": 75,
      "y": 228,
      "w": 130,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "orange.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 311402978,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "<HTML>",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era1-css",
      "type": "rectangle",
      "x": 75,
      "y": 270,
      "w": 130,
      "h": 45,
      "angle": 0,
      "borderRadius": 8,
      "options": {
        "stroke": "blue.500",
        "strokeWidth": 2,
        "fill": "blue.800",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1217144402,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era1-css-t",
      "type": "text",
      "x": 75,
      "y": 283,
      "w": 130,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "blue.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1981077080,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "{CSS}",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era1-desc",
      "type": "text",
      "x": 70,
      "y": 330,
      "w": 140,
      "h": 40,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#64748b",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 341707605,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Tables for layout\nNo interactivity",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era1-node",
      "type": "ellipse",
      "x": 115,
      "y": 400,
      "w": 50,
      "h": 50,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "orange.500",
        "strokeWidth": 3,
        "fill": "orange.700",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 57843394,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era2-bg",
      "type": "rectangle",
      "x": 250,
      "y": 130,
      "w": 160,
      "h": 250,
      "angle": 0,
      "borderRadius": 15,
      "options": {
        "stroke": "#64748b",
        "strokeWidth": 2,
        "fill": "#1e293b",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 648977251,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era2-year",
      "type": "text",
      "x": 250,
      "y": 145,
      "w": 160,
      "h": 22,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#94a3b8",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 754385426,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "1997-2005",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era2-title",
      "type": "text",
      "x": 250,
      "y": 175,
      "w": 160,
      "h": 30,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "yellow.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1331779978,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\u26a1 Dynamic Era",
      "fontSize": 18,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era2-js",
      "type": "rectangle",
      "x": 265,
      "y": 215,
      "w": 130,
      "h": 45,
      "angle": 0,
      "borderRadius": 8,
      "options": {
        "stroke": "yellow.500",
        "strokeWidth": 2,
        "fill": "yellow.900",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 103260619,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era2-js-t",
      "type": "text",
      "x": 265,
      "y": 228,
      "w": 130,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "yellow.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1896226416,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "JavaScript",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era2-php",
      "type": "rectangle",
      "x": 265,
      "y": 270,
      "w": 130,
      "h": 45,
      "angle": 0,
      "borderRadius": 8,
      "options": {
        "stroke": "#8b5cf6",
        "strokeWidth": 2,
        "fill": "#5b21b6",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1808147257,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era2-php-t",
      "type": "text",
      "x": 265,
      "y": 283,
      "w": 130,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#c4b5fd",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 176774432,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "PHP/ASP",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era2-desc",
      "type": "text",
      "x": 260,
      "y": 330,
      "w": 140,
      "h": 40,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#64748b",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1756635155,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Server-side\nFlash animations",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era2-node",
      "type": "ellipse",
      "x": 305,
      "y": 400,
      "w": 50,
      "h": 50,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "yellow.500",
        "strokeWidth": 3,
        "fill": "yellow.700",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1532675698,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era3-bg",
      "type": "rectangle",
      "x": 440,
      "y": 130,
      "w": 160,
      "h": 250,
      "angle": 0,
      "borderRadius": 15,
      "options": {
        "stroke": "#64748b",
        "strokeWidth": 2,
        "fill": "#1e293b",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1943692160,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era3-year",
      "type": "text",
      "x": 440,
      "y": 145,
      "w": 160,
      "h": 22,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#94a3b8",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 610443289,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "2006-2012",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era3-title",
      "type": "text",
      "x": 440,
      "y": 175,
      "w": 160,
      "h": 30,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 871113416,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udcda Library Era",
      "fontSize": 18,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era3-jq",
      "type": "rectangle",
      "x": 455,
      "y": 215,
      "w": 130,
      "h": 45,
      "angle": 0,
      "borderRadius": 8,
      "options": {
        "stroke": "#0ea5e9",
        "strokeWidth": 2,
        "fill": "#0c4a6e",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1979273412,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era3-jq-t",
      "type": "text",
      "x": 455,
      "y": 228,
      "w": 130,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#7dd3fc",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 413593277,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "jQuery",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era3-ajax",
      "type": "rectangle",
      "x": 455,
      "y": 270,
      "w": 130,
      "h": 45,
      "angle": 0,
      "borderRadius": 8,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "green.800",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1585284966,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era3-ajax-t",
      "type": "text",
      "x": 455,
      "y": 283,
      "w": 130,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1265811995,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "AJAX",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era3-desc",
      "type": "text",
      "x": 450,
      "y": 330,
      "w": 140,
      "h": 40,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#64748b",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1261480636,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "DOM manipulation\nWeb 2.0",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era3-node",
      "type": "ellipse",
      "x": 495,
      "y": 400,
      "w": 50,
      "h": 50,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 3,
        "fill": "green.700",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 206853400,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era4-bg",
      "type": "rectangle",
      "x": 630,
      "y": 130,
      "w": 160,
      "h": 250,
      "angle": 0,
      "borderRadius": 15,
      "options": {
        "stroke": "#64748b",
        "strokeWidth": 2,
        "fill": "#1e293b",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1427254052,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era4-year",
      "type": "text",
      "x": 630,
      "y": 145,
      "w": 160,
      "h": 22,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#94a3b8",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 625688568,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "2013-2019",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era4-title",
      "type": "text",
      "x": 630,
      "y": 175,
      "w": 160,
      "h": 30,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "blue.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1955090185,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\u269b\ufe0f SPA Era",
      "fontSize": 18,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era4-react",
      "type": "rectangle",
      "x": 645,
      "y": 215,
      "w": 130,
      "h": 45,
      "angle": 0,
      "borderRadius": 8,
      "options": {
        "stroke": "cyan.500",
        "strokeWidth": 2,
        "fill": "cyan.900",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1074830371,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era4-react-t",
      "type": "text",
      "x": 645,
      "y": 228,
      "w": 130,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "cyan.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1848262837,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "React",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era4-vue",
      "type": "rectangle",
      "x": 645,
      "y": 270,
      "w": 130,
      "h": 45,
      "angle": 0,
      "borderRadius": 8,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "green.800",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 504015456,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era4-vue-t",
      "type": "text",
      "x": 645,
      "y": 283,
      "w": 130,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1932812038,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Vue/Angular",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era4-desc",
      "type": "text",
      "x": 640,
      "y": 330,
      "w": 140,
      "h": 40,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#64748b",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1229749576,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Components\nVirtual DOM",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era4-node",
      "type": "ellipse",
      "x": 685,
      "y": 400,
      "w": 50,
      "h": 50,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "blue.500",
        "strokeWidth": 3,
        "fill": "blue.700",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 2051840896,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era5-bg",
      "type": "rectangle",
      "x": 820,
      "y": 130,
      "w": 280,
      "h": 250,
      "angle": 0,
      "borderRadius": 15,
      "options": {
        "stroke": "#8b5cf6",
        "strokeWidth": 3,
        "fill": "#1e1b4b",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1255531507,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era5-year",
      "type": "text",
      "x": 820,
      "y": 145,
      "w": 280,
      "h": 22,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#c4b5fd",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 51548007,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "2020-2024",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era5-title",
      "type": "text",
      "x": 820,
      "y": 175,
      "w": 280,
      "h": 30,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#a78bfa",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 142268291,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\ude80 Full-Stack Era",
      "fontSize": 20,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era5-next",
      "type": "rectangle",
      "x": 835,
      "y": 215,
      "w": 120,
      "h": 45,
      "angle": 0,
      "borderRadius": 8,
      "options": {
        "stroke": "#f8fafc",
        "strokeWidth": 2,
        "fill": "#18181b",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 14982034,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era5-next-t",
      "type": "text",
      "x": 835,
      "y": 228,
      "w": 120,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#f8fafc",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1707957915,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Next.js",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era5-nuxt",
      "type": "rectangle",
      "x": 965,
      "y": 215,
      "w": 120,
      "h": 45,
      "angle": 0,
      "borderRadius": 8,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "green.800",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1499048056,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era5-nuxt-t",
      "type": "text",
      "x": 965,
      "y": 228,
      "w": 120,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1960079248,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Nuxt",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era5-ts",
      "type": "rectangle",
      "x": 835,
      "y": 270,
      "w": 120,
      "h": 45,
      "angle": 0,
      "borderRadius": 8,
      "options": {
        "stroke": "blue.500",
        "strokeWidth": 2,
        "fill": "blue.800",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1396754685,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era5-ts-t",
      "type": "text",
      "x": 835,
      "y": 283,
      "w": 120,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "blue.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1933500329,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "TypeScript",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era5-ai",
      "type": "rectangle",
      "x": 965,
      "y": 270,
      "w": 120,
      "h": 45,
      "angle": 0,
      "borderRadius": 8,
      "options": {
        "stroke": "pink.500",
        "strokeWidth": 2,
        "fill": "pink.800",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1799803798,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era5-ai-t",
      "type": "text",
      "x": 965,
      "y": 283,
      "w": 120,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "pink.300",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1856431085,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "AI Copilots",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era5-desc",
      "type": "text",
      "x": 840,
      "y": 330,
      "w": 240,
      "h": 40,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#a78bfa",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1980456423,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "SSR/SSG \u2022 Edge \u2022 AI-assisted coding",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "era5-node",
      "type": "ellipse",
      "x": 935,
      "y": 400,
      "w": 50,
      "h": 50,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#8b5cf6",
        "strokeWidth": 3,
        "fill": "#6d28d9",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 27575602,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "era5-star",
      "type": "star",
      "x": 1070,
      "y": 145,
      "w": 25,
      "h": 25,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "amber.400",
        "strokeWidth": 2,
        "fill": "amber.300",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1751442239,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "points": 5
    },
    {
      "id": "stats",
      "type": "rectangle",
      "x": 60,
      "y": 480,
      "w": 280,
      "h": 120,
      "angle": 0,
      "borderRadius": 12,
      "options": {
        "stroke": "#475569",
        "strokeWidth": 2,
        "fill": "#1e293b",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 792319740,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "stats-t",
      "type": "text",
      "x": 70,
      "y": 495,
      "w": 260,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#e2e8f0",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 282182772,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udcc8 Key Milestones",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "stat1",
      "type": "text",
      "x": 70,
      "y": 525,
      "w": 260,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "yellow.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1427361237,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "1995: JavaScript in 10 days",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "stat2",
      "type": "text",
      "x": 70,
      "y": 545,
      "w": 260,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#0ea5e9",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 113364870,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "2006: jQuery changes everything",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "stat3",
      "type": "text",
      "x": 70,
      "y": 565,
      "w": 260,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "cyan.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 602503392,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "2013: React revolutionizes UI",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "stat4",
      "type": "text",
      "x": 70,
      "y": 585,
      "w": 260,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#8b5cf6",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1225565144,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "2024: 33+ years of web evolution",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "trend",
      "type": "rectangle",
      "x": 360,
      "y": 480,
      "w": 300,
      "h": 120,
      "angle": 0,
      "borderRadius": 12,
      "options": {
        "stroke": "#475569",
        "strokeWidth": 2,
        "fill": "#1e293b",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1453898104,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "trend-t",
      "type": "text",
      "x": 370,
      "y": 495,
      "w": 280,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#e2e8f0",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1418963606,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udd2e 2025 Trends",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "trend1",
      "type": "text",
      "x": 370,
      "y": 525,
      "w": 280,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "pink.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 2080274163,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\u2022 AI-first development workflows",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "trend2",
      "type": "text",
      "x": 370,
      "y": 545,
      "w": 280,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#8b5cf6",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1798630792,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\u2022 Edge computing & streaming",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "trend3",
      "type": "text",
      "x": 370,
      "y": 565,
      "w": 280,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "cyan.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1977060810,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\u2022 WebAssembly everywhere",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "trend4",
      "type": "text",
      "x": 370,
      "y": 585,
      "w": 280,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1505799566,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\u2022 React Server Components",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "footer",
      "type": "text",
      "x": 700,
      "y": 680,
      "w": 400,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#64748b",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1571432931,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\u2728 Created with Privacy Sketch",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "italic",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    }
  ],
  "appState": {
    "zoom": 0.9999999999999999,
    "panX": 277,
    "panY": 5
  },
  "theme": {
    "roughness": 1.8,
    "bowing": 1.2,
    "fillStyle": "solid"
  }
}
Example 3: E-Commerce Checkout Flow

Prompt: "Design a user flow for an e-commerce checkout process including decision points and error handling."

Example 3: E-Commerce Checkout Flow
Reasoning:
  • Flowchart Shapes: Uses standard symbols: ellipse for Start/End, rectangle for Process, and diamond for Decisions.
  • Branching: Clearly shows "Yes" (Green) and "No" (Red) paths from decision diamonds.
  • Feedback Loops: Dotted arrows indicate retry paths (e.g., from Payment Failed back to Payment Selection).
  • Visual Hierarchy: The "Happy Path" moves generally downward/rightward, while error states branch off.
View JSON Source 
{
  "version": "2.0",
  "elements": [
    {
      "id": "bg",
      "type": "rectangle",
      "x": 9,
      "y": 26.99999999999999,
      "w": 1160,
      "h": 900,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#1e293b",
        "strokeWidth": 3,
        "fill": "#f8fafc",
        "fillStyle": "solid",
        "roughness": 1.5,
        "bowing": 1.2,
        "seed": 1632086272,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "title",
      "type": "text",
      "x": 300,
      "y": 40,
      "w": 600,
      "h": 40,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#0f172a",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 69814712,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\uded2 E-Commerce Checkout Flow",
      "fontSize": 32,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "subtitle",
      "type": "text",
      "x": 350,
      "y": 85,
      "w": 500,
      "h": 25,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#64748b",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1908859433,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Multi-Payment Gateway with 3D Secure",
      "fontSize": 16,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "italic",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "start",
      "type": "ellipse",
      "x": 80,
      "y": 150,
      "w": 120,
      "h": 60,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 3,
        "fill": "green.100",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 402528452,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "start-t",
      "type": "text",
      "x": 80,
      "y": 170,
      "w": 120,
      "h": 24,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.800",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1102982735,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udecd\ufe0f Cart Ready",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "a1",
      "type": "arrow",
      "x": 200,
      "y": 180,
      "w": 71,
      "h": -2.6645352591003757e-15,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#64748b",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 71866532,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    },
    {
      "id": "validate-stock",
      "type": "rectangle",
      "x": 270,
      "y": 140,
      "w": 160,
      "h": 80,
      "angle": 0,
      "borderRadius": 12,
      "options": {
        "stroke": "blue.500",
        "strokeWidth": 2,
        "fill": "blue.100",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1037378032,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "validate-stock-t1",
      "type": "text",
      "x": 270,
      "y": 160,
      "w": 160,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "blue.800",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 762565673,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udce6 Check Inventory",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "validate-stock-t2",
      "type": "text",
      "x": 270,
      "y": 185,
      "w": 160,
      "h": 18,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "blue.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 189203255,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Stock availability",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "diamond1",
      "type": "diamond",
      "x": 310,
      "y": 260,
      "w": 80,
      "h": 60,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "amber.500",
        "strokeWidth": 2,
        "fill": "amber.100",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1185843905,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "diamond1-t",
      "type": "text",
      "x": 310,
      "y": 278,
      "w": 80,
      "h": 18,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "amber.800",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 564603608,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "In Stock?",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "a2",
      "type": "arrow",
      "x": 350,
      "y": 220,
      "w": -3.0000000000000018,
      "h": 36,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#64748b",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 661739648,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    },
    {
      "id": "out-of-stock",
      "type": "rectangle",
      "x": 74,
      "y": 303,
      "w": 140,
      "h": 60,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "red.500",
        "strokeWidth": 2,
        "fill": "red.100",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 769702486,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "out-of-stock-t",
      "type": "text",
      "x": 74,
      "y": 323,
      "w": 140,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "red.700",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 205547926,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\u274c Out of Stock",
      "fontSize": 13,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "a-no",
      "type": "arrow",
      "x": 313,
      "y": 290,
      "w": -97,
      "h": 39,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "red.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1987128122,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    },
    {
      "id": "no-label",
      "type": "text",
      "x": 265,
      "y": 275,
      "w": 30,
      "h": 14,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "red.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 6387700,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "No",
      "fontSize": 10,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "a3",
      "type": "arrow",
      "x": 389,
      "y": 290,
      "w": 66,
      "h": -1.000000000000001,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 721278905,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    },
    {
      "id": "yes-label",
      "type": "text",
      "x": 400,
      "y": 275,
      "w": 30,
      "h": 14,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 2001720763,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Yes",
      "fontSize": 10,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "shipping",
      "type": "rectangle",
      "x": 460,
      "y": 250,
      "w": 160,
      "h": 80,
      "angle": 0,
      "borderRadius": 12,
      "options": {
        "stroke": "#8b5cf6",
        "strokeWidth": 2,
        "fill": "#ede9fe",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1420670738,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "shipping-t1",
      "type": "text",
      "x": 460,
      "y": 270,
      "w": 160,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#5b21b6",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1983647147,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\ude9a Shipping Info",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "shipping-t2",
      "type": "text",
      "x": 460,
      "y": 295,
      "w": 160,
      "h": 18,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#7c3aed",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 205091933,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Address validation",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "a4",
      "type": "arrow",
      "x": 540,
      "y": 330,
      "w": 0.9999999999999991,
      "h": 48,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#64748b",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 126080763,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    },
    {
      "id": "payment-select",
      "type": "rectangle",
      "x": 460,
      "y": 380,
      "w": 160,
      "h": 80,
      "angle": 0,
      "borderRadius": 12,
      "options": {
        "stroke": "#0ea5e9",
        "strokeWidth": 2,
        "fill": "#e0f2fe",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1516605091,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "payment-select-t1",
      "type": "text",
      "x": 460,
      "y": 400,
      "w": 160,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#0369a1",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 569545720,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udcb3 Payment Method",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "payment-select-t2",
      "type": "text",
      "x": 460,
      "y": 425,
      "w": 160,
      "h": 18,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#0284c7",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1232255077,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Select gateway",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "branch-label",
      "type": "text",
      "x": 540,
      "y": 470,
      "w": 160,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#475569",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 594953879,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Payment Gateway",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "a5-stripe",
      "type": "arrow",
      "x": 490,
      "y": 460,
      "w": -80,
      "h": 60,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "indigo.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1044290728,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    },
    {
      "id": "a5-paypal",
      "type": "arrow",
      "x": 540,
      "y": 460,
      "w": 7,
      "h": 70,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#0ea5e9",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 370437142,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    },
    {
      "id": "a5-apple",
      "type": "arrow",
      "x": 590,
      "y": 460,
      "w": 77,
      "h": 65,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "gray.800",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 270118256,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    },
    {
      "id": "stripe",
      "type": "rectangle",
      "x": 320,
      "y": 530,
      "w": 140,
      "h": 70,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "indigo.500",
        "strokeWidth": 2,
        "fill": "indigo.50",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1246551960,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "stripe-t",
      "type": "text",
      "x": 320,
      "y": 555,
      "w": 140,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "indigo.600",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1103946807,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udc9c Stripe",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "paypal",
      "type": "rectangle",
      "x": 480,
      "y": 530,
      "w": 140,
      "h": 70,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "#0ea5e9",
        "strokeWidth": 2,
        "fill": "#e0f2fe",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 18627349,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "paypal-t",
      "type": "text",
      "x": 480,
      "y": 555,
      "w": 140,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#0369a1",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1416066089,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83c\udd7f\ufe0f PayPal",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "apple",
      "type": "rectangle",
      "x": 640,
      "y": 530,
      "w": 140,
      "h": 70,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "gray.800",
        "strokeWidth": 2,
        "fill": "gray.100",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1187913767,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "apple-t",
      "type": "text",
      "x": 640,
      "y": 555,
      "w": 140,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "gray.900",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1042318681,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83c\udf4e Apple Pay",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "a6-merge",
      "type": "arrow",
      "x": 390,
      "y": 600,
      "w": 95,
      "h": 47,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#64748b",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 693933475,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    },
    {
      "id": "a6-merge2",
      "type": "arrow",
      "x": 550,
      "y": 600,
      "w": 1.9999999999999996,
      "h": 45,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#64748b",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1947266758,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    },
    {
      "id": "a6-merge3",
      "type": "arrow",
      "x": 710,
      "y": 600,
      "w": -65,
      "h": 55,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#64748b",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 446310031,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    },
    {
      "id": "3dsecure",
      "type": "rectangle",
      "x": 480,
      "y": 650,
      "w": 160,
      "h": 80,
      "angle": 0,
      "borderRadius": 12,
      "options": {
        "stroke": "orange.500",
        "strokeWidth": 2,
        "fill": "orange.100",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 977510313,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "3dsecure-t1",
      "type": "text",
      "x": 480,
      "y": 670,
      "w": 160,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "orange.700",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 238123101,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udd10 3D Secure",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "3dsecure-t2",
      "type": "text",
      "x": 480,
      "y": 695,
      "w": 160,
      "h": 18,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "orange.600",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1569116371,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Bank verification",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "a7",
      "type": "arrow",
      "x": 560,
      "y": 730,
      "w": 0.9999999999999987,
      "h": 51,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#64748b",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 782366714,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    },
    {
      "id": "diamond2",
      "type": "diamond",
      "x": 520,
      "y": 780,
      "w": 80,
      "h": 60,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "amber.500",
        "strokeWidth": 2,
        "fill": "amber.100",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 988845971,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "diamond2-t",
      "type": "text",
      "x": 520,
      "y": 798,
      "w": 80,
      "h": 18,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "amber.800",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1988957381,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Verified?",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "a-fail",
      "type": "arrow",
      "x": 600,
      "y": 810,
      "w": 94,
      "h": -1.0000000000000013,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "red.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1114139932,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    },
    {
      "id": "fail-label",
      "type": "text",
      "x": 620,
      "y": 795,
      "w": 30,
      "h": 14,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "red.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1045509653,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "No",
      "fontSize": 10,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "payment-fail",
      "type": "rectangle",
      "x": 700,
      "y": 780,
      "w": 140,
      "h": 60,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "red.500",
        "strokeWidth": 2,
        "fill": "red.100",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1059895430,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "payment-fail-t",
      "type": "text",
      "x": 700,
      "y": 800,
      "w": 140,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "red.700",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1217558931,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\u274c Payment Failed",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "retry-arrow",
      "type": "arrow",
      "x": 824,
      "y": 774,
      "w": 20,
      "h": -367,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "amber.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 26102252,
        "lineStyle": "dashed"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    },
    {
      "id": "retry-label",
      "type": "text",
      "x": 845,
      "y": 605,
      "w": 50,
      "h": 14,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "amber.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1467204924,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Retry",
      "fontSize": 10,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "a-success",
      "type": "arrow",
      "x": 520,
      "y": 810,
      "w": -77,
      "h": 24,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1379373833,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    },
    {
      "id": "success-label",
      "type": "text",
      "x": 470,
      "y": 825,
      "w": 30,
      "h": 14,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 909140838,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Yes",
      "fontSize": 10,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "order-confirm",
      "type": "rectangle",
      "x": 320,
      "y": 840,
      "w": 160,
      "h": 70,
      "angle": 0,
      "borderRadius": 12,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "green.100",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1800721694,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "order-confirm-t1",
      "type": "text",
      "x": 320,
      "y": 860,
      "w": 160,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.800",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 861894364,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\u2705 Order Created",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "order-confirm-t2",
      "type": "text",
      "x": 320,
      "y": 885,
      "w": 160,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 295611027,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Send confirmation",
      "fontSize": 11,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "a8",
      "type": "arrow",
      "x": 318,
      "y": 869,
      "w": -92,
      "h": -1.1102230246251565e-15,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#64748b",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1336785370,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    },
    {
      "id": "email",
      "type": "rectangle",
      "x": 82,
      "y": 835,
      "w": 140,
      "h": 70,
      "angle": 0,
      "borderRadius": 10,
      "options": {
        "stroke": "indigo.500",
        "strokeWidth": 2,
        "fill": "indigo.50",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1180117552,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "email-t",
      "type": "text",
      "x": 82,
      "y": 860,
      "w": 140,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "indigo.600",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 828707185,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udce7 Email Receipt",
      "fontSize": 13,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "legend-box",
      "type": "rectangle",
      "x": 900,
      "y": 150,
      "w": 250,
      "h": 200,
      "angle": 0,
      "borderRadius": 15,
      "options": {
        "stroke": "#cbd5e1",
        "strokeWidth": 2,
        "fill": "#f1f5f9",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 501745621,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "legend-title",
      "type": "text",
      "x": 910,
      "y": 165,
      "w": 230,
      "h": 24,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#1e293b",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 909449269,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udccb Legend",
      "fontSize": 16,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "l1",
      "type": "ellipse",
      "x": 920,
      "y": 200,
      "w": 20,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "green.100",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 946771495,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "l1-t",
      "type": "text",
      "x": 950,
      "y": 203,
      "w": 100,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#475569",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 932868979,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Start/End",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "l2",
      "type": "rectangle",
      "x": 920,
      "y": 230,
      "w": 20,
      "h": 20,
      "angle": 0,
      "borderRadius": 4,
      "options": {
        "stroke": "blue.500",
        "strokeWidth": 2,
        "fill": "blue.100",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 879043191,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "l2-t",
      "type": "text",
      "x": 950,
      "y": 233,
      "w": 100,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#475569",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1453372330,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Process",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "l3",
      "type": "diamond",
      "x": 920,
      "y": 260,
      "w": 20,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "amber.500",
        "strokeWidth": 2,
        "fill": "amber.100",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 367304686,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "l3-t",
      "type": "text",
      "x": 950,
      "y": 263,
      "w": 100,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#475569",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 807975654,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Decision",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "l4",
      "type": "rectangle",
      "x": 920,
      "y": 290,
      "w": 20,
      "h": 20,
      "angle": 0,
      "borderRadius": 4,
      "options": {
        "stroke": "red.500",
        "strokeWidth": 2,
        "fill": "red.100",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 188977245,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "l4-t",
      "type": "text",
      "x": 950,
      "y": 293,
      "w": 100,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#475569",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1949521566,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Error",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "l5-t",
      "type": "text",
      "x": 920,
      "y": 320,
      "w": 200,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "amber.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1759333423,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "--- Retry path",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "stats-box",
      "type": "rectangle",
      "x": 900,
      "y": 380,
      "w": 250,
      "h": 120,
      "angle": 0,
      "borderRadius": 15,
      "options": {
        "stroke": "#cbd5e1",
        "strokeWidth": 2,
        "fill": "#f1f5f9",
        "fillStyle": "solid",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1199505079,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      }
    },
    {
      "id": "stats-title",
      "type": "text",
      "x": 910,
      "y": 395,
      "w": 230,
      "h": 24,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#1e293b",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1998992305,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\ud83d\udcca Conversion Stats",
      "fontSize": 14,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "bold",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "stat1",
      "type": "text",
      "x": 920,
      "y": 425,
      "w": 200,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "green.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 552903201,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Cart \u2192 Checkout: 68%",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "stat2",
      "type": "text",
      "x": 920,
      "y": 450,
      "w": 200,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "blue.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 351433606,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Checkout \u2192 Payment: 82%",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "stat3",
      "type": "text",
      "x": 920,
      "y": 475,
      "w": 200,
      "h": 16,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#8b5cf6",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 68506464,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "Payment Success: 94%",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "left",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "footer",
      "type": "text",
      "x": 400,
      "y": 930,
      "w": 400,
      "h": 20,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "#94a3b8",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 1768142579,
        "lineStyle": "solid"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "text": "\u2728 Created with Privacy Sketch",
      "fontSize": 12,
      "fontFamily": "Comic Sans MS",
      "align": "center",
      "fontWeight": "normal",
      "fontStyle": "italic",
      "backgroundColor": null,
      "backgroundPadding": 8,
      "backgroundBorderRadius": 4
    },
    {
      "id": "3cmrhpnyl",
      "type": "arrow",
      "x": 847,
      "y": 411,
      "w": -224.00000000000003,
      "h": -7.999999999999998,
      "angle": 0,
      "borderRadius": 0,
      "options": {
        "stroke": "amber.500",
        "strokeWidth": 2,
        "fill": "transparent",
        "fillStyle": "hachure",
        "roughness": 1.8,
        "bowing": 1.2,
        "seed": 26102252,
        "lineStyle": "dashed"
      },
      "animation": {
        "type": "none",
        "delay": 0,
        "duration": 500
      },
      "endArrowhead": "arrow"
    }
  ],
  "appState": {
    "zoom": 0.9999999999999999,
    "panX": 652,
    "panY": -79
  },
  "theme": {
    "roughness": 1.5,
    "bowing": 1.2,
    "fillStyle": "solid"
  }
}

6. Minimal Complete Example

This is the simplest valid JSON that renders. Copy and paste to test:

{
  "version": "2.0",
  "elements": [
    {
      "id": "box1",
      "type": "rectangle",
      "x": 100,
      "y": 100,
      "w": 150,
      "h": 80,
      "options": {
        "stroke": "#333333",
        "fill": "blue.200",
        "fillStyle": "solid"
      }
    },
    {
      "id": "label1",
      "type": "text",
      "x": 100,
      "y": 125,
      "w": 150,
      "h": 30,
      "text": "Hello World",
      "fontSize": 16,
      "align": "center",
      "options": { "stroke": "#1e293b" }
    }
  ]
}

7. Common Patterns

7.1 Labeled Shape Pattern

A shape with centered text inside:

// Rectangle at (100, 100), size 200x80
{ "id": "box", "type": "rectangle", "x": 100, "y": 100, "w": 200, "h": 80, "options": {...} }
// Text positioned at same x, y offset for vertical centering
{ "id": "box-label", "type": "text", "x": 100, "y": 130, "w": 200, "h": 20, "text": "Label", "align": "center" }

7.2 Icon Card Pattern

Rectangle + emoji + label text:

{ "id": "card", "type": "rectangle", "x": 100, "y": 100, "w": 120, "h": 80 }
{ "id": "card-icon", "type": "text", "x": 100, "y": 115, "w": 120, "h": 30, "text": "🚀", "fontSize": 24, "align": "center" }
{ "id": "card-label", "type": "text", "x": 100, "y": 150, "w": 120, "h": 20, "text": "Deploy", "fontSize": 12, "align": "center" }

7.3 Connected Flow Pattern

Two boxes connected by an arrow (left to right):

// Box A at left
{ "id": "a", "type": "rectangle", "x": 50, "y": 100, "w": 100, "h": 60 }
// Box B at right  
{ "id": "b", "type": "rectangle", "x": 250, "y": 100, "w": 100, "h": 60 }
// Arrow: starts at right edge of A (x=150), ends at left edge of B (x=250)
{ "id": "arrow-ab", "type": "arrow", "x": 150, "y": 130, "w": 100, "h": 1, "endArrowhead": "arrow" }

8. Anti-Patterns (Common Mistakes)

❌ Wrong ✅ Correct Reason
"width": 100 "w": 100 Property names are w and h, not width/height
Missing "id" "id": "unique-id" Every element MUST have a unique id
"w": -50 "w": 50 For shapes, use positive w/h values (arrows can be negative)
Two elements with same id Each id must be unique Duplicate IDs cause rendering issues
"color": "red" "stroke": "red" or "fill": "red" Use stroke for border, fill for background
"version": 2 "version": "2.0" Version must be string "2.0"
Text without text property "text": "Hello" Text elements require the text property

9. Step-by-Step Tutorials

For human readers seeking in-depth guidance, we offer comprehensive tutorials that walk through building complete diagrams from scratch:

Available Tutorials:

Each tutorial includes step-by-step JSON code examples, design principles, and tips for creating professional diagrams.