Architecture

The Architecture component (ui:architecture) renders architecture diagrams with nested boundary zones, built-in SVG icons, and orthogonal edge routing. It uses ELK.js for hierarchical compound layout, supporting arbitrary nesting depth for zones like VPCs, subnets, and service boundaries.

Examples

View Glyph Markdown source

```ui:architecture
children:
  - id: web
    label: Web App
    icon: cloud
  - id: api
    label: API Server
    icon: server
  - id: db
    label: Database
    icon: database
edges:
  - from: web
    to: api
    label: REST
  - from: api
    to: db
    label: queries
layout: top-down
```

Cloud VPC with nested subnets

View Glyph Markdown source

```ui:architecture
title: Cloud Platform
children:
  - id: vpc
    label: Production VPC
    type: zone
    children:
      - id: pub-subnet
        label: Public Subnet
        type: zone
        children:
          - id: alb
            label: Load Balancer
            icon: loadbalancer
          - id: bastion
            label: Bastion Host
            icon: server
      - id: priv-subnet
        label: Private Subnet
        type: zone
        children:
          - id: api
            label: API Service
            icon: server
          - id: worker
            label: Worker
            icon: function
      - id: data-subnet
        label: Data Subnet
        type: zone
        children:
          - id: db
            label: PostgreSQL
            icon: database
          - id: cache
            label: Redis
            icon: cache
  - id: users
    label: Users
    icon: user
edges:
  - from: users
    to: alb
    label: HTTPS
  - from: alb
    to: api
  - from: api
    to: db
    label: queries
  - from: api
    to: cache
    label: reads
  - from: worker
    to: db
layout: top-down
```

Microservices topology

A complex microservices architecture with multiple interconnected services.

View Glyph Markdown source

```ui:architecture
title: E-Commerce Microservices
children:
  - id: gateway
    label: API Gateway
    icon: gateway
  - id: auth
    label: Auth Service
    icon: function
  - id: users
    label: User Service
    icon: server
  - id: products
    label: Product Catalog
    icon: server
  - id: orders
    label: Order Service
    icon: server
  - id: payments
    label: Payment Service
    icon: function
  - id: inventory
    label: Inventory Service
    icon: server
  - id: notifications
    label: Notification Service
    icon: function
  - id: userdb
    label: Users DB
    icon: database
  - id: productdb
    label: Products DB
    icon: database
  - id: orderdb
    label: Orders DB
    icon: database
  - id: queue
    label: Event Bus
    icon: queue
edges:
  - from: gateway
    to: auth
    label: validate
  - from: gateway
    to: users
  - from: gateway
    to: products
  - from: gateway
    to: orders
  - from: orders
    to: payments
    label: charge
  - from: orders
    to: inventory
    label: reserve
  - from: orders
    to: queue
    type: async
  - from: queue
    to: notifications
    type: async
  - from: users
    to: userdb
  - from: products
    to: productdb
  - from: orders
    to: orderdb
  - from: payments
    to: orderdb
layout: top-down
```

Multi-layer architecture

A three-tier architecture showing frontend, backend, and data layers with grouped zones.

View Glyph Markdown source

```ui:architecture
title: Three-Tier Web Application
children:
  - id: frontend
    label: Presentation Layer
    type: zone
    children:
      - id: web
        label: Web App
        icon: cloud
      - id: mobile
        label: Mobile App
        icon: cloud
      - id: cdn
        label: CDN
        icon: network
  - id: backend
    label: Application Layer
    type: zone
    children:
      - id: lb
        label: Load Balancer
        icon: loadbalancer
      - id: api1
        label: API Server 1
        icon: server
      - id: api2
        label: API Server 2
        icon: server
      - id: worker
        label: Background Jobs
        icon: function
      - id: cache
        label: Redis Cache
        icon: cache
  - id: data
    label: Data Layer
    type: zone
    children:
      - id: primary
        label: Primary DB
        icon: database
      - id: replica
        label: Read Replica
        icon: database
      - id: search
        label: Elasticsearch
        icon: database
      - id: blob
        label: Blob Storage
        icon: storage
edges:
  - from: web
    to: cdn
  - from: mobile
    to: cdn
  - from: cdn
    to: lb
    label: HTTPS
  - from: lb
    to: api1
  - from: lb
    to: api2
  - from: api1
    to: cache
  - from: api2
    to: cache
  - from: api1
    to: primary
    label: writes
  - from: api2
    to: replica
    label: reads
  - from: worker
    to: primary
  - from: api1
    to: search
    label: index
  - from: api1
    to: blob
    type: data
  - from: primary
    to: replica
    type: async
    label: replication
layout: top-down
```

AWS-style multi-region deployment

An architecture with deeply nested zones representing AWS regions, VPCs, and availability zones.

View Glyph Markdown source

```ui:architecture
title: Multi-Region Deployment
children:
  - id: users
    label: Global Users
    icon: user
  - id: dns
    label: Route 53
    icon: network
  - id: us-east
    label: US-East Region
    type: zone
    children:
      - id: us-vpc
        label: Production VPC
        type: zone
        children:
          - id: us-alb
            label: ALB
            icon: loadbalancer
          - id: us-az1
            label: AZ-1
            type: zone
            children:
              - id: us-app1
                label: App Server
                icon: container
              - id: us-db-primary
                label: RDS Primary
                icon: database
          - id: us-az2
            label: AZ-2
            type: zone
            children:
              - id: us-app2
                label: App Server
                icon: container
              - id: us-db-standby
                label: RDS Standby
                icon: database
  - id: eu-west
    label: EU-West Region
    type: zone
    children:
      - id: eu-vpc
        label: Production VPC
        type: zone
        children:
          - id: eu-alb
            label: ALB
            icon: loadbalancer
          - id: eu-app
            label: App Server
            icon: container
          - id: eu-db
            label: RDS Replica
            icon: database
edges:
  - from: users
    to: dns
  - from: dns
    to: us-alb
    label: primary
  - from: dns
    to: eu-alb
    label: failover
  - from: us-alb
    to: us-app1
  - from: us-alb
    to: us-app2
  - from: us-app1
    to: us-db-primary
  - from: us-app2
    to: us-db-primary
  - from: us-db-primary
    to: us-db-standby
    type: async
    label: sync
  - from: us-db-primary
    to: eu-db
    type: async
    label: cross-region
  - from: eu-alb
    to: eu-app
  - from: eu-app
    to: eu-db
layout: top-down
```

Properties

Property	Type	Required	Default	Description
title	string	No	—	Optional title for the diagram, included in the accessible label.
children	Node[]	Yes	—	An array of node objects. Nodes with type: "zone" can contain nested children.
edges	Edge[]	Yes	—	An array of edge objects connecting nodes by their id.
layout	"top-down" | "left-right" | "bottom-up"	No	"top-down"	Layout direction for the diagram.

Node object

Property	Type	Required	Default	Description
id	string	Yes	—	Unique identifier. Referenced by edges and other nodes.
label	string	Yes	—	Display text rendered inside the node or zone header.
icon	string	No	—	One of the 12 built-in SVG icons (see Icon reference below).
type	"zone"	No	—	When set to "zone", the node renders as a boundary group that can contain children.
children	Node[]	No	—	Nested child nodes. Only valid when type is "zone".
style	Record<string, string>	No	—	CSS-like style overrides.

Edge object

Property	Type	Required	Default	Description
from	string	Yes	—	The id of the source node.
to	string	Yes	—	The id of the target node.
label	string	No	—	Text displayed on the edge at its midpoint.
type	"sync" | "async" | "data"	No	—	Edge type. async renders dashed, data renders thicker.
style	Record<string, string>	No	—	CSS-like style overrides for the edge path.

Icon reference

Icon	Description
server	Rack server
database	Database cylinder
queue	Message queue
cache	Cache (lightning bolt)
loadbalancer	Load balancer (branching)
function	Serverless function (lambda)
storage	Storage disk/bucket
gateway	API gateway arch
user	Person silhouette
cloud	Cloud shape
container	Container box
network	Network mesh

Zone nesting

Zones are defined by setting type: "zone" on a node and providing children. Zones can be nested to arbitrary depth, rendering as boundary rectangles with dashed borders and tinted backgrounds that increase in opacity with depth. Zone labels appear in the top-left corner of the boundary.

The ELK.js layout engine handles compound hierarchical layout automatically, ensuring child nodes are positioned within their parent zones with appropriate padding.

Accessibility

• The diagram is rendered inside an SVG with role="img" and a descriptive aria-label summarizing the title, node count, and edge count.
• A visually hidden table provides screen reader access to all nodes, their zone membership, and connections.
• The prefers-reduced-motion media query is respected by the loading state.