Groups

Groups organize related components visually and logically.

Basic Syntax

Use indented sections with brackets:

@arch
[nodes]
  client:Client|cloud

  [Backend]
    api:API
    db:Database|cyl

Rendered diagram

Nested Groups

Groups can be nested for complex architectures:

@arch
[nodes]
  users:Users|cloud

  [AWS]
    [VPC]
      [Public Subnet]
        alb:Load Balancer|diamond

      [Private Subnet]
        api:API Server
        db:RDS|cyl

Rendered diagram

Compact Syntax

For inline grouping, use the |group: property:

@arch
[nodes]
  api:API|group:Backend
  db:Database|cyl|group:Backend
  cache:Redis|cyl|group:Backend
  web:Web App|cloud

Rendered diagram

@arch
[nodes]
  web:Web App|cloud

  [Backend]
    api:API
    db:Database|cyl
    cache:Redis|cyl

Rendered diagram

Group Styling

Groups can have colors:

@arch
[nodes]
  [Production|color:green]
    prod_api:API
    prod_db:Database|cyl

  [Staging|color:orange]
    staging_api:API
    staging_db:Database|cyl

Rendered diagram

Edges Across Groups

Edges work normally across group boundaries:

@arch
[nodes]
  [Frontend]
    web:Web App|cloud
    mobile:Mobile|cloud

  [Backend]
    gateway:API Gateway|diamond
    api:API Service
    db:PostgreSQL|cyl

[edges]
  web->gateway:HTTPS
  mobile->gateway:HTTPS
  gateway->api:route
  api->db:query

Rendered diagram

Common Patterns

AWS VPC Layout

@arch
[nodes]
  internet:Internet|cloud

  [AWS Account]
    [VPC: 10.0.0.0/16]
      [Public Subnets]
        nat:NAT Gateway
        alb:ALB|diamond

      [Private Subnets]
        [App Tier]
          api:API (ECS)
          worker:Worker (ECS)

        [Data Tier]
          rds:RDS|cyl
          redis:ElastiCache|cyl

[edges]
  internet->alb
  alb->api
  api->worker
  api->rds
  api->redis
  worker->rds

Rendered diagram

Kubernetes

@arch
[nodes]
  [Cluster]
    [Namespace: production]
      [Deployment: api]
        pod1:Pod 1
        pod2:Pod 2
        pod3:Pod 3

      svc:Service|diamond
      ing:Ingress|diamond

    [Namespace: monitoring]
      prom:Prometheus
      graf:Grafana

[edges]
  ing->svc
  svc->pod1
  svc->pod2
  svc->pod3
  prom->pod1
  prom->pod2
  prom->pod3

Rendered diagram

Microservices Domains

@arch
[nodes]
  gateway:API Gateway|diamond

  [User Domain]
    user_api:User API
    user_db:User DB|cyl

  [Order Domain]
    order_api:Order API
    order_db:Order DB|cyl
    order_queue:Order Queue|cyl

  [Payment Domain]
    payment_api:Payment API
    payment_db:Payment DB|cyl

[edges]
  gateway->user_api
  gateway->order_api
  gateway->payment_api
  user_api->user_db
  order_api->order_db
  order_api-->order_queue
  order_queue-->payment_api
  payment_api->payment_db

Rendered diagram

Next Steps

• Styling - Colors and visual customization

• Icons - Add cloud provider icons