Architecture diagram (D2)

Updated
View as text
Open in Confluence
Open in ChatGPT Open in Claude

D2 nests with braces, and nesting draws a boundary. That single property makes cloud and service architecture diagrams unusually quick to write.

#What this example shows

  • Containers, which become labelled boundaries.

  • direction, which sets the flow of the whole diagram.

  • Dotted paths for addressing nested nodes in connections.

#A worked example

Open it, edit it, or copy the source below.

Architecture diagram (D2)

The source, which you can paste into a new diagram and edit:

direction: right

internet: Internet

prod: Production account {
  edge: Edge {
    cdn: CDN
    waf: WAF
  }
  vpc: VPC 10.0.0.0/16 {
    public: Public subnets {
      alb: Load balancer
      nat: NAT gateway
    }
    private: Private subnets {
      api: API service
      worker: Worker
      db: Postgres {
        shape: cylinder
      }
    }
  }
  store: Object storage {
    shape: cylinder
  }
}

internet -> prod.edge.cdn: HTTPS
prod.edge.cdn -> prod.edge.waf
prod.edge.waf -> prod.vpc.public.alb
prod.vpc.public.alb -> prod.vpc.private.api
prod.vpc.private.api -> prod.vpc.private.db: SQL
prod.vpc.private.api -> prod.store: PUT
prod.vpc.private.worker -> prod.vpc.private.db: SQL
prod.vpc.private.worker -> prod.vpc.public.nat -> internet

#Making it your own

  • Use containers for boundaries rather than drawing boxes around things.

  • Chained connections (a -> b -> c) are legal and keep the source short.

  • direction: right or down changes the entire layout in one line.

Nesting is the whole idea.