Clusters

Clusters allow you to group related nodes together visually.

Creating a Cluster

import { Diagram } from "diagrams-js";
import { ECS } from "diagrams-js/aws/compute";

const diagram = Diagram("Clustered Services");

const cluster = diagram.cluster("Services");
const web1 = cluster.add(ECS("web1"));
const web2 = cluster.add(ECS("web2"));

Nested Clusters

const outer = diagram.cluster("Production");
const inner = outer.cluster("Services");
const service = inner.add(ECS("API"));

Cluster with Connections

const frontend = diagram.cluster("Frontend");
const backend = diagram.cluster("Backend");

const web = frontend.add(ECS("Web"));
const api = backend.add(ECS("API"));

web.to(api);

Full Example

import { Diagram } from "diagrams-js";
import { ECS } from "diagrams-js/aws/compute";
import { RDS } from "diagrams-js/aws/database";
import { ALB } from "diagrams-js/aws/network";

const diagram = Diagram("Full Architecture");

const lb = diagram.add(ALB("Load Balancer"));

const webCluster = diagram.cluster("Web Tier");
const web1 = webCluster.add(ECS("web1"));
const web2 = webCluster.add(ECS("web2"));

const dbCluster = diagram.cluster("Database Tier");
const primary = dbCluster.add(RDS("Primary"));
const replica = dbCluster.add(RDS("Replica"));

lb.to([web1, web2]);
web1.to(primary);
web2.to(primary);
primary.with(replica);

const svg = await diagram.render();