Skip to main content

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);

Cluster Options​

Clusters support CSS classes and data attributes for SVG DOM manipulation, as well as custom Graphviz attributes:

const cluster = diagram.cluster("VPC", {
  className: "production",
  dataAttrs: { region: "us-east-1", az: "a" },
});

These are injected into the rendered SVG:

<g class="cluster production" data-cluster-label="VPC" data-region="us-east-1" data-az="a"> ... </g>

Nested clusters also support options:

const outer = diagram.cluster("Production", { className: "prod-env" });
const inner = outer.cluster("Web Tier", { className: "web-tier" });

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", {
  className: "web-tier",
  dataAttrs: { tier: "web" },
});
const web1 = webCluster.add(ECS("web1"));
const web2 = webCluster.add(ECS("web2"));

const dbCluster = diagram.cluster("Database Tier", {
  className: "db-tier",
  dataAttrs: { tier: "db" },
});
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();

// Query cluster elements in browser
const webTierEl = webCluster.getElement();
webTierEl?.addEventListener("click", () => {
  console.log("Web tier clicked!");
});