Custom Format

Build architecture diagrams, system designs, and process flows with full control over nodes and edges.

Open Live Example: System Architecture Diagram

Example

{
  "nodes": [
    {
      "id": "client",
      "label": "Mobile App",
      "imageUrl": "https://cdn-icons-png.flaticon.com/512/149/149071.png",
      "platform": "iOS/Android",
      "version": "2.1.0"
    },
    {
      "id": "api-gateway",
      "label": "API Gateway",
      "port": 443,
      "protocol": "HTTPS",
      "requests_per_sec": 1500
    },
    {
      "id": "backend",
      "label": "Backend Services",
      "nodes": [
        {
          "id": "auth-service",
          "label": "Auth Service",
          "status": "healthy",
          "uptime": 99.9
        },
        {
          "id": "data-service",
          "label": "Data Service",
          "instances": 3,
          "load_balanced": true
        }
      ]
    },
    {
      "id": "database",
      "label": "PostgreSQL",
      "imageUrl": "https://cdn-icons-png.flaticon.com/512/5968/5968342.png",
      "size": "500GB",
      "replicas": 2
    }
  ],
  "edges": [
    { "from": "client", "to": "api-gateway", "label": "HTTPS Request" },
    { "from": "api-gateway", "to": "auth-service", "label": "Authenticate" },
    { "from": "api-gateway", "to": "data-service", "label": "Fetch Data" },
    { "from": "auth-service", "to": "database", "label": "Verify User" },
    { "from": "data-service", "to": "database", "label": "Query" }
  ]
}

Structure

Nodes

Every node must have an id field. Beyond that, you can include any primitive key-value pairs.

Prop

Type

Custom Fields Example:

{
  "id": "server",
  "label": "API Server",
  "port": 3000,
  "status": "active",
  "uptime": 99.9,
  "ssl": true
}

All custom fields are automatically rendered in the node's visual representation.

Edges

Edges define connections between nodes.