Architecture Builder

Create and visualize your multi-agent architecture

Tip:Drag components from the palette to the canvas to build your architectureClick the + button or connection points to start connecting componentsComponents can connect to themselves and multiple other components

Architecture Canvas

Zoom: 100% • Hold Ctrl+Scroll to zoom
Canvas: 3000×1500px
RequestGetUser
API Gateway
gateway
User Service
service
Database
database

Architecture Code

Read-only
{
  "name": "My Architecture",
  "type": "microservices",
  "components": [
    {
      "id": "api-gateway",
      "type": "gateway",
      "position": {
        "x": 100,
        "y": 200
      },
      "label": "API Gateway",
      "color": "#dbeafe"
    },
    {
      "id": "user-service",
      "type": "service",
      "position": {
        "x": 300,
        "y": 200
      },
      "label": "User Service",
      "color": "#dcfce7"
    },
    {
      "id": "database",
      "type": "database",
      "position": {
        "x": 500,
        "y": 200
      },
      "label": "Database",
      "color": "#f0f9ff"
    }
  ],
  "connections": [
    {
      "id": "conn-1",
      "from": "api-gateway",
      "to": "user-service",
      "type": "http",
      "name": "Request"
    },
    {
      "id": "conn-2",
      "from": "user-service",
      "to": "database",
      "type": "query",
      "name": "GetUser"
    }
  ]
}

Component Palette

Add Custom Component

Your Components

API Gateway
gateway
Service
service
Database
database
Message Queue
queue

• Double-click on components to edit their properties

• Click the + button or connection points to start connections

• Components can connect to themselves (self-connections)

• No limit on the number of connections between components