/ diagrams
Open editor
compiler-drivenopen sourcev0.42.1canonical 1.0

Diagrams
that think.

An IR-first diagram platform. Prompt an architecture, watch agents compose it against a canonical schema, and ship the same document as SVG, PNG, or PDF — deterministic, versioned, and hashable.

LIVE·rendering sample
CLIENT TIER Public Internet Traffic INTERNAL MICROSERVICES MESH Kubernetes Cluster / Isolated VPC Subnet PERSISTENCE & ASYNC STREAMING Managed Cloud Infrastructure 1 HTTPS / JSON HTTPS / REST 2 Route /orders Route /pay Cache Check 3 Write Order 4 Publish Event 5 Consume https://store.app Web Storefront Mobile App iOS / Android Native v2.4 API Gateway Kong / Envoy Proxy REST/gRPC Order Service Go Microservice PCI-DSS Payment Service Node.js Express Sync Inventory Service Java Spring Boot Redis Cluster Orders Cache PostgreSQL Primary ACID Transactions Kafka Event Log Topic: order-events Worker Email Worker Async Dispatcher Authentication & Rate Limiting
Gateway validates JWT tokens and enforces per-tenant IP rate limits before forwarding.
fig. 01·how it works
01 / prompt

Prompt.

Describe the system in natural language. A three-tier checkout, a Kafka fan-out, a rate-limiter with Redis. The agent drafts an initial topology from a canonical schema.

02 / draft

Draft.

Every node, edge, and group is a typed primitive. The agent iterates by issuing commands against the same IR you would. Undo and redo apply to its changes too.

03 / ship

Ship.

The same document compiles to SVG, PNG, and PDF — deterministic, byte-exact, hashable. Render in CI, ship to a CDN, or fork to a new variant.

fig. 02·from the gallery
Browse the gallery
EDGE Global edge and routing APPLICATION Stateless service tier PERSISTENCE & ASYNC Managed data services 1 HTTPS 2 origin 3 forward POST /orders GET /catalog read cache 4 write tx 5 publish consume assets replicate Customer Web / Mobile CDN CloudFront Global Edge Cache ALB Application LB Layer-7 Routing Kong API Gateway Auth + Rate Limit Go Order Service Go / gRPC Py Catalog Service Python / FastAPI orders inventory audit Event Bus MSK (Kafka) ECS Fulfillment Worker Consumer Redis ElastiCache Redis / Read Cache PG RDS Primary PostgreSQL 16 Replica Read-only S3 S3 Product Images Read path
CDN → ALB → API Gateway → Service → Cache → DB. Hot reads never reach primary.
AWS Three-Tier with ElastiCache
12 nodes · polished-dark
PRODUCER Idempotent + transactional BROKERS Partitioned commit log CONSUMER Read-process-write in a single transaction 1 send(records) PID + epoch 2 poll() 3 BEGIN TX 4 commit offsets 5 read outbox Go Order Producer Idempotent Internal Producer ID State Sequence Tracking orders.0 orders.1 orders.2 Kafka Cluster 3× Partitions __consumer_offsets Transactional Log Java Order Consumer Read-Process-Write PG Outbox Table PostgreSQL Workers Downstream Inventory + Email Atomicity guarantee
Consumer offset commit + business write succeed together or roll back together — no duplicates, no gaps.
Kafka Exactly-Once Semantics
7 nodes · polished-dark
WRITE SIDE Commands and event log READ SIDE Materialized projections 1 command dispatch 2 emit snapshot 3 subscribe index update query GET /search GET /view Operator Admin Console gRPC Command API Validates + dispatches Domain Aggregate Order / Account OrderCreated OrderPaid OrderShipped Event Log Append-only PG Snapshot Store Aggregate State Stream Projection Worker Builds read model OS Search Index OpenSearch PG Read DB Materialized View REST Query API Reads from view Event log is the source of truth
The read models are derived. Rebuild any view from scratch by replaying the log.
CQRS with Event Sourcing
9 nodes · polished-dark
fig. 03·the contract

Zod-validated.
Migration-safe.

The renderer never sees React Flow state. The database never sees a stringified SVG. Every artifact round-trips through the canonical IR — validated, versioned, hashable.

POST/api/v1/render200 · svg
{
  "document": {
    "schemaVersion": "1.0",
    "theme": "editorial-dark",
    "nodes": [
      { "id": "gw",  "type": "api_gateway" },
      { "id": "ord", "type": "service" },
      { "id": "pg",  "type": "database" }
    ],
    "edges": [
      { "source": "gw",  "target": "ord" },
      { "source": "ord", "target": "pg"  }
    ]
  }
}
fits into your stack
Next.jsVercelCursorClaude CodeVS CodeFigmaReact FlowELK.jsSharpPostgreSQLBullMQDrizzle

Start compiling.

Open the editor, save your first canonical DiagramDocument, then call the same payload against the render API.

Open editor Read the API