ts-prorm-orm 1.1.0

package/dist/diagrams/er-diagram.js

@@ -0,0 +1,605 @@
+"use strict";
+/**
+ * ERDiagram — generates a fully-rendered Entity-Relationship diagram SVG for
+ * a collection of ORM models and their associations.
+ *
+ * Features:
+ *  - Auto-layout (configurable columns, auto-height per entity)
+ *  - Color-coded entity headers (unique hue per model)
+ *  - Compact field rows: name + type badge + PK/FK icons
+ *  - Crow's-foot relationship lines with cardinality labels
+ *  - Bezier curves that avoid box overlap
+ *  - Relationship legend bottom-right
+ *  - Title bar & metadata strip
+ *  - Fully self-contained SVG (no external resources)
+ *
+ * Usage:
+ *   const er = new ERDiagram({
+ *     title: 'E-Commerce Schema',
+ *     models: [userDef, productDef, orderDef],
+ *   });
+ *   er.save('./diagrams/schema.svg');
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ERDiagram = void 0;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+// ─── Color palette for entity headers (cycles for > 12 models) ─────────────
+const ENTITY_COLORS = [
+    { header: '#1E3A8A', mid: '#2563EB', light: '#DBEAFE', text: '#1E3A8A' }, // blue
+    { header: '#5B21B6', mid: '#7C3AED', light: '#EDE9FE', text: '#5B21B6' }, // violet
+    { header: '#065F46', mid: '#059669', light: '#D1FAE5', text: '#065F46' }, // emerald
+    { header: '#92400E', mid: '#D97706', light: '#FEF3C7', text: '#92400E' }, // amber
+    { header: '#831843', mid: '#DB2777', light: '#FCE7F3', text: '#831843' }, // pink
+    { header: '#0C4A6E', mid: '#0284C7', light: '#E0F2FE', text: '#0C4A6E' }, // sky
+    { header: '#1E1B4B', mid: '#4338CA', light: '#E0E7FF', text: '#1E1B4B' }, // indigo
+    { header: '#4A1942', mid: '#9333EA', light: '#F3E8FF', text: '#4A1942' }, // purple
+    { header: '#7F1D1D', mid: '#DC2626', light: '#FEE2E2', text: '#7F1D1D' }, // red
+    { header: '#134E4A', mid: '#0D9488', light: '#CCFBF1', text: '#134E4A' }, // teal
+    { header: '#1C1917', mid: '#44403C', light: '#F5F5F4', text: '#1C1917' }, // stone
+    { header: '#14532D', mid: '#16A34A', light: '#DCFCE7', text: '#14532D' }, // green
+];
+// ─── Type-color helper (compact, same palette as model-diagram) ─────────────
+function typeCol(t) {
+    const s = t.toUpperCase();
+    if (/STRING|VARCHAR|CHAR|TEXT/.test(s))
+        return { text: '#059669', bg: '#D1FAE5' };
+    if (/INT|BIGINT|SMALLINT|FLOAT|DOUBLE|DECIMAL|NUMERIC/.test(s))
+        return { text: '#7C3AED', bg: '#EDE9FE' };
+    if (/DATE|TIME|TIMESTAMP/.test(s))
+        return { text: '#EA580C', bg: '#FFEDD5' };
+    if (/BOOL/.test(s))
+        return { text: '#DB2777', bg: '#FCE7F3' };
+    if (/UUID/.test(s))
+        return { text: '#0891B2', bg: '#CFFAFE' };
+    if (/JSONB/.test(s))
+        return { text: '#4338CA', bg: '#E0E7FF' };
+    if (/JSON/.test(s))
+        return { text: '#4F46E5', bg: '#E0E7FF' };
+    if (/BLOB|BINARY/.test(s))
+        return { text: '#92400E', bg: '#FEF3C7' };
+    if (/ENUM/.test(s))
+        return { text: '#B45309', bg: '#FEF3C7' };
+    if (/ARRAY/.test(s))
+        return { text: '#0369A1', bg: '#E0F2FE' };
+    return { text: '#475569', bg: '#F1F5F9' };
+}
+function xmlEsc(s) {
+    return String(s ?? '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+function resolveType(field) {
+    const t = field.type;
+    if (typeof t === 'string')
+        return t;
+    if (t && typeof t === 'object') {
+        if (typeof t.toSqlString === 'function')
+            return t.toSqlString();
+        if (t.key)
+            return String(t.key);
+    }
+    return 'UNKNOWN';
+}
+// ─── ERDiagram class ────────────────────────────────────────────────────────
+class ERDiagram {
+    constructor(options) {
+        this.opts = {
+            title: options.title ?? 'Entity-Relationship Diagram',
+            columns: options.columns ?? 3,
+            hGap: options.hGap ?? 90,
+            vGap: options.vGap ?? 70,
+            models: options.models ?? [],
+            theme: options.theme ?? 'light',
+            color: options.color ?? '',
+        };
+    }
+    // ── Compute box height for a model ──────────────────────────────────────
+    boxHeight(model) {
+        const fieldCount = Object.keys(model.fields ?? {}).length;
+        const h = ERDiagram.BOX_HDR + fieldCount * ERDiagram.BOX_ROW + ERDiagram.BOX_FOOT;
+        return Math.max(h, ERDiagram.MIN_H);
+    }
+    // ── Compute grid layout ─────────────────────────────────────────────────
+    computeLayout() {
+        const { models, columns, hGap, vGap } = this.opts;
+        const W = ERDiagram.BOX_W;
+        const MARGIN = ERDiagram.MARGIN;
+        const BANNER = ERDiagram.BANNER_H;
+        const layout = [];
+        let col = 0;
+        let row = 0;
+        // Track row max-heights for vertical positioning
+        const rowHeights = [];
+        let curRowMaxH = 0;
+        models.forEach((m, i) => {
+            const bh = this.boxHeight(m);
+            curRowMaxH = Math.max(curRowMaxH, bh);
+            if ((i + 1) % columns === 0 || i === models.length - 1) {
+                rowHeights.push(curRowMaxH);
+                curRowMaxH = 0;
+            }
+        });
+        col = 0;
+        row = 0;
+        let rowStart = BANNER + MARGIN;
+        models.forEach((m, i) => {
+            const bh = this.boxHeight(m);
+            const x = MARGIN + col * (W + hGap);
+            const y = rowStart + (rowHeights[row] - bh) / 2; // vertically center in row
+            layout.push({
+                model: m,
+                x,
+                y,
+                w: W,
+                h: bh,
+                cx: x + W / 2,
+                cy: y + bh / 2,
+            });
+            col++;
+            if (col >= columns) {
+                col = 0;
+                rowStart += rowHeights[row] + vGap;
+                row++;
+            }
+        });
+        return layout;
+    }
+    // ── Draw a single entity box ─────────────────────────────────────────────
+    renderBox(box, colorIdx) {
+        const { model, x, y, w, h } = box;
+        const colors = ENTITY_COLORS[colorIdx % ENTITY_COLORS.length];
+        const uid = model.name.replace(/\W/g, '') + colorIdx;
+        const HDR = ERDiagram.BOX_HDR;
+        const ROW = ERDiagram.BOX_ROW;
+        const FOOT = ERDiagram.BOX_FOOT;
+        const R = 10;
+        const fieldEntries = Object.entries(model.fields ?? {});
+        let out = `\n  <!-- ═ Entity: ${xmlEsc(model.name)} ═ -->`;
+        // ── Shadow & shell ──
+        out += `\n  <defs>
+    <linearGradient id="ehg${uid}" x1="0" y1="0" x2="1" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="${colors.header}"/>
+      <stop offset="100%" stop-color="${colors.mid}"/>
+    </linearGradient>
+    <filter id="esh${uid}" x="-8%" y="-8%" width="116%" height="130%">
+      <feDropShadow dx="0" dy="3" stdDeviation="6" flood-color="#00000020"/>
+    </filter>
+  </defs>`;
+        out += `\n  <rect x="${x - 1}" y="${y - 1}" width="${w + 2}" height="${h + 2}"
+        rx="${R + 1}" fill="#CBD5E1" filter="url(#esh${uid})"/>`;
+        out += `\n  <rect x="${x}" y="${y}" width="${w}" height="${h}"
+        rx="${R}" fill="#FFFFFF"/>`;
+        // ── Header ──
+        out += `\n  <rect x="${x}" y="${y}" width="${w}" height="${HDR}"
+        rx="${R}" fill="url(#ehg${uid})"/>`;
+        // flatten bottom of header
+        out += `\n  <rect x="${x}" y="${y + HDR - R}" width="${w}" height="${R}"
+        fill="url(#ehg${uid})"/>`;
+        // Entity name
+        out += `\n  <text x="${x + w / 2}" y="${y + 28}"
+        font-family="system-ui,-apple-system,sans-serif"
+        font-size="16" font-weight="800" fill="#FFFFFF"
+        text-anchor="middle">${xmlEsc(model.name)}</text>`;
+        // Table name sub-label
+        const tbl = model.tableName ?? model.name.toLowerCase() + 's';
+        out += `\n  <text x="${x + w / 2}" y="${y + 42}"
+        font-family="'SF Mono',monospace" font-size="10"
+        fill="rgba(255,255,255,0.65)" text-anchor="middle">${xmlEsc(tbl)}</text>`;
+        // ── Field rows ──
+        fieldEntries.forEach(([colName, field], fi) => {
+            const fy = y + HDR + fi * ROW;
+            const isPK = !!field.primaryKey;
+            const isFK = !!(field.foreignKey || field.references);
+            const typeStr = resolveType(field);
+            const tc = typeCol(typeStr);
+            const rowBg = fi % 2 === 0 ? '#FFFFFF' : '#F9FAFB';
+            out += `\n  <rect x="${x}" y="${fy}" width="${w}" height="${ROW}" fill="${rowBg}"/>`;
+            // Accent stripe
+            if (isPK)
+                out += `\n  <rect x="${x}" y="${fy}" width="4" height="${ROW}" fill="#F59E0B"/>`;
+            else if (isFK)
+                out += `\n  <rect x="${x}" y="${fy}" width="4" height="${ROW}" fill="#3B82F6"/>`;
+            // Icon (SVG instead of emoji)
+            const ixc = x + 14;
+            const ity = fy + ROW / 2 + 4;
+            if (isPK) {
+                out += `\n  <g transform="translate(${ixc - 5}, ${ity - 7})">
+          <path d="M9 1l3 3-3 3 2 2 3-3 3 3 2-2-3-3 3-3-2-2-3 3-3-3z" fill="#F59E0B"/>
+        </g>`;
+            }
+            else if (isFK) {
+                out += `\n  <g transform="translate(${ixc - 5}, ${ity - 7})">
+          <path d="M6 4l4 4-4 4M10 4l4 4" stroke="#3B82F6" stroke-width="1.5" fill="none"/>
+        </g>`;
+            }
+            else {
+                out += `\n  <circle cx="${ixc}" cy="${fy + ROW / 2}" r="2.5" fill="#CBD5E1"/>`;
+            }
+            // Column name
+            const nameC = isPK ? '#92400E' : isFK ? '#1E40AF' : '#1E293B';
+            const nameW = isPK ? '700' : isFK ? '600' : '400';
+            const dispN = colName.length > 18 ? colName.slice(0, 17) + '…' : colName;
+            out += `\n  <text x="${x + 24}" y="${ity}"
+          font-family="'SF Mono',monospace" font-size="11"
+          font-weight="${nameW}" fill="${nameC}">${xmlEsc(dispN)}</text>`;
+            // Type badge (right-aligned)
+            const typTxt = typeStr.length > 12 ? typeStr.slice(0, 11) + '…' : typeStr;
+            const tbW = typTxt.length * 6.5 + 10;
+            const tbX = x + w - tbW - 6;
+            out += `\n  <rect x="${tbX}" y="${fy + 6}" width="${tbW}" height="16" rx="4" fill="${tc.bg}"/>`;
+            out += `\n  <text x="${tbX + tbW / 2}" y="${fy + 18}"
+          font-family="'SF Mono',monospace" font-size="9"
+          font-weight="600" fill="${tc.text}" text-anchor="middle">${xmlEsc(typTxt)}</text>`;
+            // Row separator
+            out += `\n  <line x1="${x}" y1="${fy + ROW}" x2="${x + w}" y2="${fy + ROW}"
+          stroke="#E2E8F0" stroke-width="0.5"/>`;
+        });
+        // ── Footer ──
+        const footY = y + HDR + fieldEntries.length * ROW;
+        out += `\n  <rect x="${x}" y="${footY}" width="${w}" height="${FOOT}" fill="${colors.light}"/>`;
+        // round bottom
+        out += `\n  <rect x="${x}" y="${footY + FOOT - R}" width="${w}" height="${R}"
+        rx="${R}" fill="${colors.light}"/>`;
+        const assocCount = (model.associations ?? []).length;
+        out += `\n  <text x="${x + 10}" y="${footY + 19}"
+        font-family="system-ui,sans-serif" font-size="10" fill="${colors.text}" font-weight="600">
+      ${Object.keys(model.fields ?? {}).length} fields${assocCount > 0 ? ` · ${assocCount} associations` : ''}
+    </text>`;
+        return out;
+    }
+    // ── Draw relationship lines (crow's-foot) ──────────────────────────────
+    renderRelationships(layout) {
+        const byName = new Map();
+        layout.forEach((b) => byName.set(b.model.name, b));
+        let out = '\n  <!-- ═══ RELATIONSHIPS ═══ -->';
+        // Relationship line colors
+        const REL_COLORS = {
+            hasOne: '#0891B2',
+            hasMany: '#7C3AED',
+            belongsTo: '#059669',
+            belongsToMany: '#DC2626',
+        };
+        // Track drawn pairs to avoid duplicates
+        const drawn = new Set();
+        layout.forEach((srcBox) => {
+            const assocs = srcBox.model.associations ?? [];
+            assocs.forEach((assoc) => {
+                const tgtBox = byName.get(assoc.target);
+                if (!tgtBox)
+                    return;
+                // De-duplicate: only draw once per pair+type
+                const pairKey = [srcBox.model.name, assoc.target, assoc.type].sort().join('::');
+                if (drawn.has(pairKey))
+                    return;
+                drawn.add(pairKey);
+                const color = REL_COLORS[assoc.type] ?? '#94A3B8';
+                const label = assoc.type;
+                // Choose connection points (pick nearest horizontal sides)
+                let sx, sy, tx, ty;
+                let srcSide, tgtSide;
+                const srcMidX = srcBox.x + srcBox.w / 2;
+                const tgtMidX = tgtBox.x + tgtBox.w / 2;
+                if (tgtMidX >= srcMidX) {
+                    // target is to the right
+                    sx = srcBox.x + srcBox.w;
+                    sy = srcBox.y + srcBox.h / 2;
+                    tx = tgtBox.x;
+                    ty = tgtBox.y + tgtBox.h / 2;
+                    srcSide = 'right';
+                    tgtSide = 'left';
+                }
+                else {
+                    // target is to the left
+                    sx = srcBox.x;
+                    sy = srcBox.y + srcBox.h / 2;
+                    tx = tgtBox.x + tgtBox.w;
+                    ty = tgtBox.y + tgtBox.h / 2;
+                    srcSide = 'left';
+                    tgtSide = 'right';
+                }
+                // If stacked vertically (same column), use top/bottom exits
+                if (Math.abs(srcMidX - tgtMidX) < 40) {
+                    if (tgtBox.y > srcBox.y) {
+                        sx = srcBox.x + srcBox.w / 2;
+                        sy = srcBox.y + srcBox.h;
+                        tx = tgtBox.x + tgtBox.w / 2;
+                        ty = tgtBox.y;
+                    }
+                    else {
+                        sx = srcBox.x + srcBox.w / 2;
+                        sy = srcBox.y;
+                        tx = tgtBox.x + tgtBox.w / 2;
+                        ty = tgtBox.y + tgtBox.h;
+                    }
+                    srcSide = 'right'; // repurpose to mean 'bottom'
+                    tgtSide = 'left'; // repurpose to mean 'top'
+                }
+                // Bezier control points
+                const dx = Math.abs(tx - sx);
+                const cpOffset = Math.max(dx * 0.5, 60);
+                const cpsx = srcSide === 'right' ? sx + cpOffset : sx - cpOffset;
+                const cptx = tgtSide === 'left' ? tx - cpOffset : tx + cpOffset;
+                // Main line
+                out += `\n  <path d="M ${sx} ${sy} C ${cpsx} ${sy}, ${cptx} ${ty}, ${tx} ${ty}"
+      fill="none" stroke="${color}" stroke-width="1.8"
+      stroke-dasharray="0" opacity="0.85"/>`;
+                // ── Crow's foot at TARGET (many side for hasMany/belongsToMany) ──
+                const manyAtTarget = assoc.type === 'hasMany' || assoc.type === 'belongsToMany';
+                const manyAtSource = assoc.type === 'belongsTo' || assoc.type === 'belongsToMany';
+                if (manyAtTarget) {
+                    out += this.crowFoot(tx, ty, tgtSide === 'left' ? 'right' : 'left', color);
+                }
+                else {
+                    out += this.singleBar(tx, ty, tgtSide === 'left' ? 'right' : 'left', color);
+                }
+                if (manyAtSource) {
+                    out += this.crowFoot(sx, sy, srcSide === 'right' ? 'left' : 'right', color);
+                }
+                else {
+                    out += this.singleBar(sx, sy, srcSide === 'right' ? 'left' : 'right', color);
+                }
+                // Relationship label at midpoint
+                const mx = (sx + tx) / 2;
+                const my = (sy + ty) / 2;
+                const labelW = label.length * 7 + 16;
+                out += `\n  <rect x="${mx - labelW / 2}" y="${my - 11}" width="${labelW}" height="18"
+      rx="5" fill="white" stroke="${color}" stroke-width="1" opacity="0.95"/>`;
+                out += `\n  <text x="${mx}" y="${my + 3}"
+      font-family="system-ui,sans-serif" font-size="10" font-weight="600"
+      fill="${color}" text-anchor="middle">${xmlEsc(label)}</text>`;
+                // Alias label (smaller, below)
+                if (assoc.as) {
+                    out += `\n  <text x="${mx}" y="${my + 18}"
+        font-family="'SF Mono',monospace" font-size="9" fill="#94A3B8"
+        text-anchor="middle">as: ${xmlEsc(assoc.as)}</text>`;
+                }
+            });
+        });
+        return out;
+    }
+    // ── Crow's foot symbol ──────────────────────────────────────────────────
+    // direction = which way the line is approaching the symbol
+    // (the symbol points AWAY from the entity)
+    crowFoot(x, y, dir, color) {
+        // 'right' means line comes from the right → symbol points left into the entity
+        const sign = dir === 'right' ? -1 : 1;
+        const reach = 12;
+        const spread = 7;
+        return `
+  <!-- crow foot at (${x},${y}) dir=${dir} -->
+  <line x1="${x}" y1="${y}" x2="${x + sign * reach}" y2="${y - spread}"
+        stroke="${color}" stroke-width="1.8"/>
+  <line x1="${x}" y1="${y}" x2="${x + sign * reach}" y2="${y}"
+        stroke="${color}" stroke-width="1.8"/>
+  <line x1="${x}" y1="${y}" x2="${x + sign * reach}" y2="${y + spread}"
+        stroke="${color}" stroke-width="1.8"/>
+  <line x1="${x + sign * reach}" y1="${y - spread}" x2="${x + sign * reach}" y2="${y + spread}"
+        stroke="${color}" stroke-width="1.5"/>`;
+    }
+    // ── Single bar (one) symbol ─────────────────────────────────────────────
+    singleBar(x, y, dir, color) {
+        const sign = dir === 'right' ? -1 : 1;
+        const gap = 6;
+        const reach = 12;
+        const ht = 7;
+        return `
+  <!-- single bar at (${x},${y}) dir=${dir} -->
+  <line x1="${x + sign * gap}" y1="${y - ht}" x2="${x + sign * gap}" y2="${y + ht}"
+        stroke="${color}" stroke-width="1.8"/>
+  <line x1="${x + sign * reach}" y1="${y - ht}" x2="${x + sign * reach}" y2="${y + ht}"
+        stroke="${color}" stroke-width="1.8"/>`;
+    }
+    // ── Banner ──────────────────────────────────────────────────────────────
+    renderBanner(totalW) {
+        const H = ERDiagram.BANNER_H;
+        const { title, models } = this.opts;
+        const now = new Date().toISOString().slice(0, 10);
+        return /* xml */ `
+  <!-- ═══ BANNER ═══ -->
+  <defs>
+    <linearGradient id="erBanner" x1="0" y1="0" x2="1" y2="0"
+                    gradientUnits="objectBoundingBox">
+      <stop offset="0%"   stop-color="#0F172A"/>
+      <stop offset="60%"  stop-color="#1E3A8A"/>
+      <stop offset="100%" stop-color="#2563EB"/>
+    </linearGradient>
+  </defs>
+  <rect width="${totalW}" height="${H}" fill="url(#erBanner)"/>
+  <text x="24" y="36"
+        font-family="system-ui,-apple-system,sans-serif"
+        font-size="24" font-weight="800" fill="#FFFFFF">${xmlEsc(title)}</text>
+  <text x="24" y="54"
+        font-family="system-ui,sans-serif" font-size="12" fill="rgba(255,255,255,0.55)">
+    ${models.length} entities · generated ${now}
+  </text>
+  <!-- ER tag pill -->
+  <rect x="${totalW - 100}" y="18" width="80" height="28" rx="14"
+        fill="rgba(255,255,255,0.15)"/>
+  <text x="${totalW - 60}" y="37"
+        font-family="'SF Mono',monospace" font-size="12" font-weight="700"
+        fill="rgba(255,255,255,0.9)" text-anchor="middle">ER DIAGRAM</text>`;
+    }
+    // ── Legend ──────────────────────────────────────────────────────────────
+    renderLegend(lx, ly) {
+        const LW = ERDiagram.LEGEND_W;
+        const LP = ERDiagram.LEGEND_PAD;
+        const lineH = 28;
+        const items = [
+            { type: 'hasOne', icon: '1:1', color: '#0891B2', label: 'Has One' },
+            { type: 'hasMany', icon: '1:N', color: '#7C3AED', label: 'Has Many' },
+            { type: 'belongsTo', icon: 'N:1', color: '#059669', label: 'Belongs To' },
+            { type: 'belongsToMany', icon: 'N:N', color: '#DC2626', label: 'Belongs To Many' },
+        ];
+        const legendH = LP * 2 + 24 + items.length * lineH;
+        let out = `\n  <!-- ═══ LEGEND ═══ -->`;
+        out += `\n  <rect x="${lx}" y="${ly}" width="${LW}" height="${legendH}"
+      rx="10" fill="white" stroke="#E2E8F0" stroke-width="1.5"/>`;
+        out += `\n  <rect x="${lx}" y="${ly}" width="${LW}" height="34"
+      rx="10" fill="#0F172A"/>`;
+        out += `\n  <rect x="${lx}" y="${ly + 20}" width="${LW}" height="14" fill="#0F172A"/>`;
+        out += `\n  <text x="${lx + LW / 2}" y="${ly + 23}"
+      font-family="system-ui,sans-serif" font-size="12" font-weight="700"
+      fill="#FFFFFF" text-anchor="middle">LEGEND</text>`;
+        items.forEach((item, i) => {
+            const iy = ly + 34 + LP + i * lineH;
+            const badgeW = 32;
+            out += `\n  <rect x="${lx + LP}" y="${iy + 5}" width="${badgeW}" height="18"
+        rx="5" fill="${item.color}22"/>`;
+            out += `\n  <text x="${lx + LP + badgeW / 2}" y="${iy + 18}"
+        font-family="monospace" font-size="10" font-weight="700"
+        fill="${item.color}" text-anchor="middle">${item.icon}</text>`;
+            // Sample line
+            out += `\n  <line x1="${lx + LP + badgeW + 6}" y1="${iy + 14}"
+        x2="${lx + LP + badgeW + 28}" y2="${iy + 14}"
+        stroke="${item.color}" stroke-width="2"/>`;
+            out += `\n  <text x="${lx + LP + badgeW + 34}" y="${iy + 18}"
+        font-family="system-ui,sans-serif" font-size="12"
+        fill="#374151">${item.label}</text>`;
+            // Key icon legend (SVG instead of emoji)
+            if (i === items.length - 1) {
+                const ky = iy + lineH + 4;
+                // Key icon
+                out += `\n  <g transform="translate(${lx + LP}, ${ky + 2})">
+          <path d="M8 0l2 2-2 2 1.5 1.5 2-2 2 2 1.5-1.5-2-2 2-2-1.5-1.5-2 2-2-2z" fill="#F59E0B"/>
+        </g>`;
+                out += `\n  <text x="${lx + LP + 22}" y="${ky + 14}"
+          font-family="system-ui,sans-serif" font-size="11" fill="#64748B">Primary Key</text>`;
+                // Link icon
+                out += `\n  <g transform="translate(${lx + LP}, ${ky + 18})">
+          <path d="M4 2l4 4-4 4M8 2l4 4" stroke="#3B82F6" stroke-width="1.5" fill="none"/>
+        </g>`;
+                out += `\n  <text x="${lx + LP + 22}" y="${ky + 30}"
+          font-family="system-ui,sans-serif" font-size="11" fill="#64748B">Foreign Key</text>`;
+            }
+        });
+        return out;
+    }
+    // ── Generate the full SVG ────────────────────────────────────────────────
+    generate() {
+        const { models, hGap, vGap, columns } = this.opts;
+        const MARGIN = ERDiagram.MARGIN;
+        const BANNER = ERDiagram.BANNER_H;
+        const LEGEND_W = ERDiagram.LEGEND_W;
+        const BOX_W = ERDiagram.BOX_W;
+        const layout = this.computeLayout();
+        // Guard: with no models there are no boxes, so `Math.max(...[])` would be
+        // -Infinity and produce invalid width/height/viewBox. Emit a minimal, valid
+        // empty SVG (banner only) with sane dimensions instead.
+        if (layout.length === 0) {
+            const emptyW = BOX_W + 2 * MARGIN;
+            const emptyH = BANNER + MARGIN * 2;
+            return [
+                `<?xml version="1.0" encoding="UTF-8"?>`,
+                `<!-- Generated by ts-prorm-orm ERDiagram -->`,
+                `<svg xmlns="http://www.w3.org/2000/svg"`,
+                `     width="${emptyW}" height="${emptyH}"`,
+                `     viewBox="0 0 ${emptyW} ${emptyH}">`,
+                `  <rect width="${emptyW}" height="${emptyH}" fill="#F0F4F8"/>`,
+                this.renderBanner(emptyW),
+                `  <text x="${emptyW / 2}" y="${BANNER + MARGIN + 20}"`,
+                `        font-family="system-ui,sans-serif" font-size="14" fill="#64748B"`,
+                `        text-anchor="middle">No entities to display</text>`,
+                `</svg>`,
+            ].join('\n');
+        }
+        // Compute total canvas size
+        const maxX = Math.max(...layout.map((b) => b.x + b.w)) + MARGIN;
+        const maxY = Math.max(...layout.map((b) => b.y + b.h)) + MARGIN;
+        // Add space for legend on right (only if fits neatly)
+        const legendX = maxX + 20;
+        const legendY = BANNER + MARGIN;
+        const totalW = legendX + LEGEND_W + MARGIN;
+        const totalH = Math.max(maxY, legendY + 250);
+        let svg = [
+            `<?xml version="1.0" encoding="UTF-8"?>`,
+            `<!-- Generated by ts-prorm-orm ERDiagram -->`,
+            `<svg xmlns="http://www.w3.org/2000/svg"`,
+            `     width="${totalW}" height="${totalH}"`,
+            `     viewBox="0 0 ${totalW} ${totalH}">`,
+        ].join('\n');
+        // Background
+        svg += `\n  <rect width="${totalW}" height="${totalH}" fill="#F0F4F8"/>`;
+        // Grid guide lines (subtle)
+        svg += `\n  <!-- background grid -->`;
+        for (let gx = 0; gx < totalW; gx += 40) {
+            svg += `\n  <line x1="${gx}" y1="${BANNER}" x2="${gx}" y2="${totalH}"
+      stroke="#E2E8F0" stroke-width="0.4" opacity="0.6"/>`;
+        }
+        for (let gy = BANNER; gy < totalH; gy += 40) {
+            svg += `\n  <line x1="0" y1="${gy}" x2="${totalW}" y2="${gy}"
+      stroke="#E2E8F0" stroke-width="0.4" opacity="0.6"/>`;
+        }
+        // Banner
+        svg += this.renderBanner(totalW);
+        // Relationship lines (behind boxes)
+        svg += this.renderRelationships(layout);
+        // Entity boxes
+        layout.forEach((box, i) => {
+            svg += this.renderBox(box, i);
+        });
+        // Legend
+        svg += this.renderLegend(legendX, legendY);
+        svg += `\n</svg>`;
+        return svg;
+    }
+    /**
+     * Write the SVG to a file. Creates parent directories if needed.
+     */
+    save(outputPath) {
+        const resolved = path.resolve(outputPath);
+        const dir = path.dirname(resolved);
+        if (!fs.existsSync(dir))
+            fs.mkdirSync(dir, { recursive: true });
+        const svg = this.generate();
+        fs.writeFileSync(resolved, svg, 'utf-8');
+        return resolved;
+    }
+}
+exports.ERDiagram = ERDiagram;
+// Entity box constants (px)
+ERDiagram.BOX_W = 270;
+ERDiagram.BOX_HDR = 44;
+ERDiagram.BOX_ROW = 26;
+ERDiagram.BOX_FOOT = 28;
+ERDiagram.MIN_H = 100;
+// Diagram chrome constants
+ERDiagram.BANNER_H = 64;
+ERDiagram.LEGEND_W = 200;
+ERDiagram.LEGEND_PAD = 16;
+ERDiagram.MARGIN = 48;