Diagram SDK
Groups & VPCs
Step-by-step guide to compound boundary containers, multi-tier cloud clusters, VPC networks, and subnets.
Groups enclose subsets of nodes inside labeled boundary frames. They represent Virtual Private Clouds (VPCs), Kubernetes namespaces, DMZ security perimeters, cloud regions, and data tiers.
1. Single Security Perimeter / VPC Subnet
To define a boundary container, add an entry to the groups array and specify nodeIds:
id: Unique identifier for the group ("vpc_private").label: Title displayed on the top-left badge of the boundary frame.nodeIds: Array of enclosed node IDs.color: Color accent used for the border and badge ("purple").borderStyle:"dashed"or"solid".
import type { DiagramData } from "@filekit-studio/diagram";
export const singleVpcDiagram: DiagramData = {
title: "Cloud VPC with Protected Services",
direction: "LR",
nodes: [
{ id: "gateway", label: "Public Edge Router", shape: "rounded", color: "sky", badge: "PUBLIC" },
{ id: "api", label: "Core API Service", shape: "rounded", color: "purple", badge: "SVC" },
{ id: "database", label: "Aurora PostgreSQL", shape: "cylinder", color: "emerald", badge: "DB" }
],
edges: [
{ from: "gateway", to: "api", label: "Authorized Ingress" },
{ from: "api", to: "database", label: "Private SQL Channel" }
],
groups: [
{
id: "vpc_private",
label: "AWS Private VPC (us-east-1)",
nodeIds: ["api", "database"],
color: "purple",
borderStyle: "dashed"
}
],
layout: { direction: "LR", edgeRouting: "elbow", rankSpacing: 220, groupPadding: 48 }
};Loading diagram canvas...
2. Multi-Tier Cluster (DMZ + Microservices + Isolated Data Tier)
In enterprise architectures, systems are partitioned into discrete tiers:
- Public DMZ / Edge: Handles SSL termination and WAF filtering.
- Internal App Tier: Houses business logic and microservice pods.
- Isolated Persistence Tier: Locked down data lake and SQL databases.
@filekit-studio/diagram automatically ensures that inter-group connectors route cleanly across boundary frames without visual collision:
export const enterpriseDiagram: DiagramData = {
title: "Enterprise Multi-Tier Architecture",
direction: "LR",
nodes: [
// Tier 1: Public DMZ
{ id: "cdn", label: "Cloudflare Edge", shape: "cloud", color: "sky", badge: "EDGE" },
{ id: "waf", label: "WAF Security Filter", shape: "diamond", color: "amber", badge: "INSPECT" },
// Tier 2: Private Compute
{ id: "auth_svc", label: "Auth & Identity", shape: "rounded", color: "purple" },
{ id: "order_svc", label: "Order Processor", shape: "rounded", color: "purple" },
// Tier 3: Isolated Data
{ id: "postgres", label: "Aurora PostgreSQL\n(ACID Master)", shape: "cylinder", color: "emerald", badge: "PRIMARY" },
{ id: "redis", label: "Redis Cluster\n(Cache)", shape: "cylinder", color: "rose", badge: "CACHE" }
],
edges: [
{ from: "cdn", to: "waf", label: "HTTPS Ingress" },
{ from: "waf", to: "auth_svc", label: "Validate JWT", color: "#8b5cf6" },
{ from: "waf", to: "order_svc", label: "Order Payload", color: "#8b5cf6" },
{ from: "order_svc", to: "postgres", label: "Write Transaction", color: "#10b981" },
{ from: "auth_svc", to: "redis", label: "Session Lookup", color: "#f43f5e" }
],
groups: [
{
id: "dmz_tier",
label: "Public DMZ Subnet",
nodeIds: ["cdn", "waf"],
color: "sky",
borderStyle: "dashed"
},
{
id: "compute_tier",
label: "Internal Kubernetes Compute Cluster",
nodeIds: ["auth_svc", "order_svc"],
color: "purple",
borderStyle: "dashed"
},
{
id: "data_tier",
label: "Isolated Storage & Database Tier",
nodeIds: ["postgres", "redis"],
color: "emerald",
borderStyle: "dashed"
}
],
layout: {
direction: "LR",
edgeRouting: "elbow",
nodeSpacing: 70,
rankSpacing: 200,
clusterSpacing: 180,
groupPadding: 44
}
};Loading diagram canvas...
3. Group Configuration Reference
{
"id": "vpc_backend",
"label": "Private Backend VPC",
"nodeIds": ["api", "db", "cache"],
"color": "purple",
"borderStyle": "dashed",
"backgroundColor": "transparent"
}| Property | Type | Default | Description |
|---|---|---|---|
id | string | required | Unique identifier. |
label | string | required | Title displayed on the container's top-left eyebrow pill. |
nodeIds | string[] | required | The list of member node IDs contained in this frame. |
color | string | "neutral" | Palette token ("purple", "indigo", "emerald", "sky", "amber", "rose") or hex code. |
borderStyle | "dashed" | "solid" | "dashed" | Line style for the boundary frame. |
backgroundColor | string | "transparent" | Optional background tint color. |
4. Spacing Parameters for Groups
Fine-tune group spacing inside layout:
groupPadding(default:56): Internal clearance between the group frame and its outer member nodes.clusterSpacing(default:220): Clearance distance between separate group boundary frames so clusters never collide.intraRankSpacing(default:120): Distance between ranks located inside compound group frames.