/ diagrams
Gallery
Editor
API
Open editor
fig. 0.2 · api playground
POST
/api/v1/render
Accepts canonical Diagram IR JSON and returns deterministic SVG vector output.
send request
request · json
10972 bytes
{ "document": { "schemaVersion": "1.0", "rendererVersion": "1.0.0", "theme": "polished-dark", "metadata": { "title": "AWS Three-Tier with ElastiCache", "description": "A classic three-tier web architecture on AWS with a managed Redis read cache.", "width": 1320, "height": 760, "background": { "type": "grid", "gridSize": 24 }, "author": "platform / reference", "tags": [ "aws", "three-tier", "elasticache", "rds", "reference" ] }, "nodes": [ { "id": "node-client", "type": "user", "shape": "user_avatar", "position": { "x": 60, "y": 320 }, "size": { "width": 170, "height": 96 }, "data": { "title": "Customer", "subtitle": "Web / Mobile", "role": "client", "icon": "user_colored" } }, { "id": "node-cdn", "type": "cdn", "shape": "bento_card", "position": { "x": 290, "y": 200 }, "size": { "width": 200, "height": 92 }, "data": { "title": "CloudFront", "subtitle": "Global Edge Cache", "badge": "CDN", "role": "network", "icon": "globe_colored" } }, { "id": "node-alb", "type": "load_balancer", "shape": "bento_card", "position": { "x": 290, "y": 410 }, "size": { "width": 200, "height": 92 }, "data": { "title": "Application LB", "subtitle": "Layer-7 Routing", "badge": "ALB", "role": "network", "icon": "load_balancer_colored" } }, { "id": "node-api-gateway", "type": "api_gateway", "shape": "gateway_ribbon", "position": { "x": 550, "y": 200 }, "size": { "width": 220, "height": 92 }, "data": { "title": "API Gateway", "subtitle": "Auth + Rate Limit", "badge": "Kong", "role": "network", "icon": "gateway_colored", "pulsing": true } }, { "id": "node-order", "type": "service", "shape": "bento_card", "position": { "x": 550, "y": 330 }, "size": { "width": 200, "height": 92 }, "data": { "title": "Order Service", "subtitle": "Go / gRPC", "badge": "Go", "role": "compute", "icon": "compute_service" } }, { "id": "node-catalog", "type": "service", "shape": "bento_card", "position": { "x": 550, "y": 460 }, "size": { "width": 200, "height": 92 }, "data": { "title": "Catalog Service", "subtitle": "Python / FastAPI", "badge": "Py", "role": "compute", "icon": "compute_service" } }, { "id": "node-queue", "type": "kafka", "shape": "event_stream", "position": { "x": 820, "y": 130 }, "size": { "width": 220, "height": 88 }, "data": { "title": "Event Bus", "subtitle": "MSK (Kafka)", "badge": "Kafka", "role": "messaging", "icon": "event_stream", "tags": [ "orders", "inventory", "audit" ] } }, { "id": "node-worker", "type": "worker", "shape": "bento_card", "position": { "x": 820, "y": 260 }, "size": { "width": 200, "height": 92 }, "data": { "title": "Fulfillment Worker", "subtitle": "Consumer", "badge": "ECS", "role": "compute", "icon": "cog" } }, { "id": "node-redis", "type": "redis", "shape": "data_cylinder", "position": { "x": 820, "y": 400 }, "size": { "width": 168, "height": 110 }, "data": { "title": "ElastiCache", "subtitle": "Redis / Read Cache", "badge": "Redis", "role": "cache", "icon": "cache_colored" } }, { "id": "node-rds", "type": "postgresql", "shape": "data_cylinder", "position": { "x": 1010, "y": 400 }, "size": { "width": 168, "height": 110 }, "data": { "title": "RDS Primary", "subtitle": "PostgreSQL 16", "badge": "PG", "role": "storage", "icon": "sql_db" } }, { "id": "node-replica", "type": "database", "shape": "data_cylinder", "position": { "x": 1200, "y": 400 }, "size": { "width": 100, "height": 110 }, "data": { "title": "Replica", "subtitle": "Read-only", "role": "storage", "icon": "sql_db" } }, { "id": "node-s3", "type": "object_storage", "shape": "bento_card", "position": { "x": 820, "y": 560 }, "size": { "width": 200, "height": 92 }, "data": { "title": "S3", "subtitle": "Product Images", "badge": "S3", "role": "storage", "icon": "bucket" } } ], "edges": [ { "id": "e1", "source": { "nodeId": "node-client" }, "target": { "nodeId": "node-cdn" }, "routing": "orthogonal", "data": { "label": "HTTPS", "stepNumber": 1, "animated": true, "flowColor": "#5EEAD4" } }, { "id": "e2", "source": { "nodeId": "node-cdn" }, "target": { "nodeId": "node-alb" }, "routing": "orthogonal", "data": { "label": "origin", "stepNumber": 2, "animated": true, "flowColor": "#5EEAD4" } }, { "id": "e3", "source": { "nodeId": "node-alb" }, "target": { "nodeId": "node-api-gateway" }, "routing": "orthogonal", "data": { "label": "forward", "stepNumber": 3, "animated": true, "flowColor": "#FF5A1F" } }, { "id": "e4", "source": { "nodeId": "node-api-gateway" }, "target": { "nodeId": "node-order" }, "routing": "orthogonal", "data": { "label": "POST /orders", "animated": true, "flowColor": "#FF5A1F" } }, { "id": "e5", "source": { "nodeId": "node-api-gateway" }, "target": { "nodeId": "node-catalog" }, "routing": "orthogonal", "data": { "label": "GET /catalog", "animated": true, "flowColor": "#FF5A1F" } }, { "id": "e6", "source": { "nodeId": "node-order" }, "target": { "nodeId": "node-redis" }, "routing": "orthogonal", "data": { "label": "read cache", "animated": true, "flowColor": "#5EEAD4" } }, { "id": "e7", "source": { "nodeId": "node-order" }, "target": { "nodeId": "node-rds" }, "routing": "orthogonal", "data": { "label": "write tx", "stepNumber": 4, "animated": true, "flowColor": "#E8C580" } }, { "id": "e8", "source": { "nodeId": "node-order" }, "target": { "nodeId": "node-queue" }, "routing": "orthogonal", "data": { "label": "publish", "stepNumber": 5, "animated": true, "flowColor": "#E8C580" } }, { "id": "e9", "source": { "nodeId": "node-queue" }, "target": { "nodeId": "node-worker" }, "routing": "orthogonal", "data": { "label": "consume", "animated": true, "flowColor": "#E8C580" } }, { "id": "e10", "source": { "nodeId": "node-catalog" }, "target": { "nodeId": "node-s3" }, "routing": "orthogonal", "data": { "label": "assets", "animated": true, "flowColor": "#A5B4FC" } }, { "id": "e11", "source": { "nodeId": "node-rds" }, "target": { "nodeId": "node-replica" }, "routing": "orthogonal", "data": { "label": "replicate", "animated": true, "flowColor": "#5EEAD4" } } ], "groups": [ { "id": "g-edge", "title": "EDGE", "subtitle": "Global edge and routing", "position": { "x": 280, "y": 170 }, "size": { "width": 220, "height": 360 }, "style": "swimlane" }, { "id": "g-app", "title": "APPLICATION", "subtitle": "Stateless service tier", "position": { "x": 540, "y": 170 }, "size": { "width": 230, "height": 400 }, "style": "container" }, { "id": "g-data", "title": "PERSISTENCE & ASYNC", "subtitle": "Managed data services", "position": { "x": 810, "y": 100 }, "size": { "width": 500, "height": 570 }, "style": "boundary" } ], "annotations": [ { "id": "a-step-1", "type": "callout", "position": { "x": 60, "y": 80 }, "size": { "width": 240, "height": 70 }, "title": "Read path", "text": "CDN → ALB → API Gateway → Service → Cache → DB. Hot reads never reach primary.", "variant": "tip" } ] }, "theme": "polished-dark" }
response
awaiting request…
↳ click "send request" to compile