diff --git a/diagram.js b/diagram.js
index ab8c44f..d869109 100644
--- a/diagram.js
+++ b/diagram.js
@@ -149,6 +149,16 @@ const cy = cytoscape({
'text-halign': 'left',
'text-opacity': 0 /* hide built-in labels; we render HTML labels */
}},
+ { selector: 'node[type = "account"]', style: {
+ 'background-color': '#0b1220',
+ 'background-opacity': 0.45,
+ 'border-color': 'data(color)',
+ 'border-width': 2,
+ 'padding': '90px',
+ 'shape': 'round-rectangle',
+ 'text-opacity': 0,
+ 'z-compound-depth': 'bottom'
+ }},
{ selector: 'node[lx]', style: { 'text-margin-x': 'data(lx)' }},
{ selector: 'node[ly]', style: { 'text-margin-y': 'data(ly)' }},
{ selector: 'node[label]', style: { 'label': 'data(label)' }},
@@ -234,6 +244,38 @@ async function loadGraphAndBuildElements(region = 'us-west-1') {
const g = (graph.regions && graph.regions[region]) || {};
const elements = [];
+ const accountPalette = ['#7c3aed','#0ea5e9','#f97316','#10b981','#facc15','#f472b6'];
+ const accountMeta = new Map();
+ function canonicalAccountId(value, fallbackIndex){
+ const raw = (value ?? '').toString().trim();
+ return raw ? raw.replace(/\s+/g,'-') : `account-${fallbackIndex}`;
+ }
+ function pickAccountColor(index){
+ return accountPalette[index % accountPalette.length];
+ }
+ function registerAccount(rawId, label, color, alias){
+ const info = { id: rawId, label, color, nodeId: `account:${rawId}`, alias: alias || null };
+ accountMeta.set(rawId, info);
+ elements.push({ data: { id: info.nodeId, type:'account', label, color, rawId, alias: info.alias } });
+ return info;
+ }
+ // Accounts are optional; gather them from the top-level array and from any
+ // `accountId` fields present on VPC records so multiple AWS accounts can share one canvas.
+ const accounts = Array.isArray(graph.accounts) ? graph.accounts : [];
+ accounts.forEach((acct, index) => {
+ const rawId = canonicalAccountId(acct.id || acct.accountId || acct.alias, index + 1);
+ const color = acct.color || acct.colour || acct.accent || pickAccountColor(index);
+ const label = acct.label || acct.name || rawId;
+ const alias = acct.alias || acct.accountAlias || null;
+ registerAccount(rawId, label, color, alias);
+ });
+ function ensureAccount(raw){
+ if (raw == null) return null;
+ const canonical = canonicalAccountId(raw, accountMeta.size + 1);
+ if (accountMeta.has(canonical)) return accountMeta.get(canonical);
+ return registerAccount(canonical, canonical, pickAccountColor(accountMeta.size), null);
+ }
+
const vpcs = g.vpcs || [];
const subnets = g.subnets || [];
const sgs = g.sgs || [];
@@ -241,22 +283,34 @@ async function loadGraphAndBuildElements(region = 'us-west-1') {
const rds = g.rds || [];
const lbs = g.lbs || [];
+ const vpcAccountMeta = new Map();
+ const subnetAccountMeta = new Map();
+
const sgById = Object.fromEntries(sgs.map(s => [s.id, s]));
// VPCs
for (const v of vpcs) {
- elements.push({ data: { id: v.id, type: 'vpc', label: `${v.name}\n${v.cidr}`, cidr: v.cidr, name: v.name } });
+ const acctInfo = ensureAccount(v.accountId || v.account || v.account_id || null);
+ if (acctInfo) vpcAccountMeta.set(v.id, acctInfo);
+ const parent = acctInfo ? acctInfo.nodeId : undefined;
+ elements.push({ data: { id: v.id, type: 'vpc', label: `${v.name}\n${v.cidr}`, cidr: v.cidr, name: v.name, accountId: acctInfo ? acctInfo.id : null, accountLabel: acctInfo ? acctInfo.label : null, parent } });
}
// Subnets
for (const s of subnets) {
const label = `${(s.name||s.id)}\n${s.cidr}\n${s.az}`;
- elements.push({ data: { id: s.id, type: 'subnet', label, cidr: s.cidr, az: s.az, public: !!s.public, parent: s.vpc } });
+ const fallbackAcct = vpcAccountMeta.get(s.vpc || '') || null;
+ const acctInfo = ensureAccount(s.accountId || (fallbackAcct && fallbackAcct.id) || null) || fallbackAcct;
+ if (acctInfo) subnetAccountMeta.set(s.id, acctInfo);
+ elements.push({ data: { id: s.id, type: 'subnet', label, cidr: s.cidr, az: s.az, public: !!s.public, parent: s.vpc, accountId: acctInfo ? acctInfo.id : null } });
}
// SGs
for (const sg of sgs) {
const rin = sg.rules_in || [], rout = sg.rules_out || [];
const label = `${sg.name || sg.id}\ningress: ${(rin[0]||'—')}${rin.length>1?'…':''}`;
- elements.push({ data: { id: sg.id, type: 'sg', label, rules: { in: rin, out: rout } } });
+ const fallbackAcct = vpcAccountMeta.get(sg.vpc || '') || null;
+ const acctInfo = ensureAccount(sg.accountId || (fallbackAcct && fallbackAcct.id) || null) || fallbackAcct;
+ const parent = acctInfo ? acctInfo.nodeId : undefined;
+ elements.push({ data: { id: sg.id, type: 'sg', label, rules: { in: rin, out: rout }, parent, accountId: acctInfo ? acctInfo.id : null, vpc: sg.vpc || null } });
}
// SG<->SG edges based on rules referencing other SGs
function parseSgRef(rule){
@@ -287,16 +341,20 @@ async function loadGraphAndBuildElements(region = 'us-west-1') {
// EC2
for (const i of ec2s) {
const label = `${i.name || i.id}\n${i.id}\n${i.type || ''}\n${i.privateIp ? ('Private IP: ' + i.privateIp) : ''}`;
+ const fallbackAcct = subnetAccountMeta.get(i.subnet || '') || vpcAccountMeta.get(i.vpc || '') || null;
+ const acctInfo = ensureAccount(i.accountId || (fallbackAcct && fallbackAcct.id) || null) || fallbackAcct;
elements.push({ data: { id: i.id, type: 'ec2', label,
name: i.name, instanceId: i.id, privateIp: i.privateIp,
- publicIp: i.publicIp, state: i.state, parent: i.subnet, sgs: i.sgs || [] } });
+ publicIp: i.publicIp, state: i.state, parent: i.subnet, sgs: i.sgs || [], accountId: acctInfo ? acctInfo.id : null, vpc: i.vpc || null } });
for (const sgid of (i.sgs || [])) if (sgById[sgid]) elements.push({ data: { id:`sg-${sgid}->${i.id}`, source: sgid, target: i.id, label:'attached', class:'sg-attach' }});
}
// RDS
for (const db of rds) {
const parentSubnet = (db.subnetGroup && db.subnetGroup[0]) || null;
const label = `${db.engine}\n${db.port}\n${db.publiclyAccessible?'public':'private'}`;
- elements.push({ data: { id: db.id, type:'rds', label, engine:db.engine, port:db.port, publiclyAccessible:!!db.publiclyAccessible, parent: parentSubnet, sgs: db.sgs || [] }});
+ const fallbackAcct = subnetAccountMeta.get(parentSubnet || '') || null;
+ const acctInfo = ensureAccount(db.accountId || (fallbackAcct && fallbackAcct.id) || null) || fallbackAcct;
+ elements.push({ data: { id: db.id, type:'rds', label, engine:db.engine, port:db.port, publiclyAccessible:!!db.publiclyAccessible, parent: parentSubnet, sgs: db.sgs || [], accountId: acctInfo ? acctInfo.id : null } });
for (const sgid of (db.sgs || [])) if (sgById[sgid]) elements.push({ data: { id:`sg-${sgid}->${db.id}`, source: sgid, target: db.id, label:'attached', class:'sg-attach' }});
}
// LBs
@@ -304,7 +362,9 @@ async function loadGraphAndBuildElements(region = 'us-west-1') {
const parent = (lb.subnets && lb.subnets[0]) || (subnets[0] && subnets[0].id) || null;
const lstText = (lb.listeners || []).map(L => L.port).join(',');
const label = `${lb.id}\nlisteners: ${lstText || '—'}\n${lb.scheme}`;
- elements.push({ data: { id: lb.id, type: (lb.type==='network'?'nlb':'alb'), label, scheme: lb.scheme, listeners: lb.listeners || [], parent, sgs: lb.securityGroups || [], dns: lb.dns } });
+ const fallbackAcct = subnetAccountMeta.get(parent || '') || null;
+ const acctInfo = ensureAccount(lb.accountId || (fallbackAcct && fallbackAcct.id) || null) || fallbackAcct;
+ elements.push({ data: { id: lb.id, type: (lb.type==='network'?'nlb':'alb'), label, scheme: lb.scheme, listeners: lb.listeners || [], parent, sgs: lb.securityGroups || [], dns: lb.dns, accountId: acctInfo ? acctInfo.id : null } });
for (const sgid of (lb.securityGroups || [])) if (sgById[sgid]) elements.push({ data: { id:`sg-${sgid}->${lb.id}`, source: sgid, target: lb.id, label:'attached', class:'sg-attach' }});
const tgs = lb.targetGroups || []; const targetToPort = {};
for (const tg of tgs) for (const t of (tg.targets || [])) targetToPort[t] = tg.port || targetToPort[t] || '';
@@ -335,17 +395,41 @@ async function loadGraphAndBuildElements(region = 'us-west-1') {
default: return '';
}
}
- function vpnBadge(name){ return (name && /vpn/i.test(name)) ? 'VPN' : ''; }
+ function vpnBadge(name){ return (name && /vpn/i.test(name)) ? 'VPN' : ''; }
+ function typeBadge(type){
+ switch(type){
+ case 'nat': return 'NAT';
+ case 'igw': return 'IGW';
+ case 'endpoint':
+ case 'vpce':
+ case 'gateway-endpoint':
+ return 'VPCE';
+ case 'sg': return 'SG';
+ default: return '';
+ }
+ }
function statusDot(state){ const cls=(state==='running')?'run':(state==='stopped'?'stop':'unk'); const txt=state||'unknown'; return `${escapeHtml(txt)}`; }
function sgRuleCount(d){ const rin=(d.rules&&d.rules.in)?d.rules.in.length:0; const rout=(d.rules&&d.rules.out)?d.rules.out.length:0; return rin+rout; }
- // Attach HTML labels for SG/ALB/NLB/RDS/EC2 centered inside nodes and Subnet at top-left
- if (cy.nodeHtmlLabel) {
- cy.nodeHtmlLabel([
- {
- query:'node[type = "sg"], node[type = "alb"], node[type = "nlb"], node[type = "rds"], node[type = "ec2"]',
- halign:'center', valign:'center', halignBox:'center', valignBox:'center',
- tpl: function(d){
+ // Attach HTML labels for SG/ALB/NLB/RDS/EC2 centered inside nodes and Subnet at top-left
+ if (cy.nodeHtmlLabel) {
+ cy.nodeHtmlLabel([
+ {
+ query:'node[type = "account"]',
+ halign:'left', valign:'top', halignBox:'left', valignBox:'top',
+ tpl: function(d){
+ const accent=d.color||'#38bdf8';
+ const name=d.label||(d.rawId||d.id||'account');
+ return `
+
+ ${escapeHtml(name)}
+
`;
+ }
+ },
+ {
+ query:'node[type = "sg"], node[type = "alb"], node[type = "nlb"], node[type = "rds"], node[type = "ec2"]',
+ halign:'center', valign:'center', halignBox:'center', valignBox:'center',
+ tpl: function(d){
const type=d.type; const name=d.name||(d.label||'').split('\n')[0]||d.id;
const pub=d.publicIp||d.publicIpAddress||d.public_ip||d.dns||'';
const priv=d.privateIp||d.private_ip||'';
@@ -361,17 +445,78 @@ async function loadGraphAndBuildElements(region = 'us-west-1') {
if (priv) lines.push(`Private IP: ${escapeHtml(priv)}
`);
if (pub) lines.push(`Public: ${escapeHtml(pub)}
`);
}
- const badge=vpnBadge(name);
+ const badges=[];
+ const vpnChip=vpnBadge(name); if (vpnChip) badges.push(vpnChip);
+ const typeChip=typeBadge(type); if (typeChip) badges.push(typeChip);
+ const badgeHtml=badges.join('');
return `
-
${escapeHtml(name)}${badge}
+
${iconSvg(type)}${escapeHtml(name)}${badgeHtml}
${lines.join('')}
${escapeHtml(d.dns)}
` : '';
+ const listeners = Array.isArray(d.listeners) ? d.listeners.map(L => L.port).join(', ') : '';
+ const listenerLine = listeners ? `listeners: ${escapeHtml(listeners)}
` : '';
+ const badges=[];
+ const typeChip=typeBadge(d.type);
+ if (typeChip) badges.push(typeChip);
+ const badgeHtml=badges.join('');
+ return `
+
+ ${icon}
+ ${escapeHtml(name)}${badgeHtml}
+
+ ${dns}
+ ${listenerLine}
+
+
+ ${iconSvg('sg')}
+ ${escapeHtml(d.name || d.label || d.id)}${badgeHtml}
+
+
${escapeHtml(`${rules} rule${rules===1?'':'s'}`)}
+
+
+ ${icon}
+ ${escapeHtml(name)}${badgeHtml}
+
+