ts-prorm-orm 1.1.0 → 1.2.0

package/dist/diagrams/index.d.ts

@@ -0,0 +1,155 @@
+/**
+ * @module diagrams
+ *
+ * SVG diagram generators for ORM models and ER schemas.
+ *
+ * ─── Quick-start ────────────────────────────────────────────────────────
+ *
+ * 1) Single-model card
+ *    ─────────────────
+ *    import { ModelDiagram } from './diagrams';
+ *
+ *    const diag = new ModelDiagram({
+ *      name: 'User',
+ *      tableName: 'users',
+ *      fields: {
+ *        id:        { type: 'INTEGER', primaryKey: true, autoIncrement: true },
+ *        name:      { type: 'VARCHAR(100)', allowNull: false },
+ *        email:     { type: 'VARCHAR(255)', unique: true, allowNull: false },
+ *        role:      { type: 'ENUM', enum: ['admin','user'], defaultValue: 'user' },
+ *        createdAt: { type: 'DATE' },
+ *      },
+ *      associations: [
+ *        { type: 'hasMany',   target: 'Post',    foreignKey: 'userId', as: 'posts' },
+ *        { type: 'hasOne',    target: 'Profile',  foreignKey: 'userId' },
+ *        { type: 'belongsToMany', target: 'Team', through: 'UserTeam' },
+ *      ],
+ *      timestamps: true,
+ *      comment: 'Application users',
+ *    });
+ *
+ *    diag.save('./diagrams/User.svg');
+ *    // or get SVG string: const svg = diag.generate();
+ *
+ *
+ * 2) Full ER diagram
+ *    ────────────────
+ *    import { ERDiagram } from './diagrams';
+ *
+ *    const er = new ERDiagram({
+ *      title: 'E-Commerce Schema',
+ *      columns: 3,
+ *      models: [ userModel, productModel, orderModel, orderItemModel ],
+ *    });
+ *
+ *    er.save('./diagrams/schema.svg');
+ *
+ *
+ * 3) CLI
+ *    ────
+ *    # Single model (from JSON spec)
+ *    cli diagram:model --file ./User.json --out ./diagrams/User.svg
+ *
+ *    # Full ER diagram (from schema JSON)
+ *    cli diagram:er --file ./schema.json --out ./diagrams/er.svg
+ *
+ *    # Inline model
+ *    cli diagram:model --name User \
+ *          --fields "id:INTEGER:pk,name:VARCHAR(100):nn,email:VARCHAR(255):uq nn" \
+ *          --assoc "hasMany:Post:userId" \
+ *          --out ./diagrams/User.svg
+ *
+ * ─── JSON spec format ───────────────────────────────────────────────────
+ *
+ *  Single model file:
+ *  {
+ *    "name": "User",
+ *    "tableName": "users",
+ *    "fields": {
+ *      "id":    { "type": "INTEGER", "primaryKey": true, "autoIncrement": true },
+ *      "email": { "type": "VARCHAR(255)", "unique": true, "allowNull": false }
+ *    },
+ *    "associations": [
+ *      { "type": "hasMany", "target": "Post", "foreignKey": "userId" }
+ *    ],
+ *    "timestamps": true
+ *  }
+ *
+ *  ER schema file:
+ *  {
+ *    "title": "My App Schema",
+ *    "columns": 3,
+ *    "models": [ <model-spec>, <model-spec>, … ]
+ *  }
+ */
+export { ModelDiagram } from './model-diagram';
+export type { ModelDiagramOptions, FieldDefinition, AssociationDefinition } from './model-diagram';
+export { ERDiagram } from './er-diagram';
+export type { ERDiagramOptions } from './er-diagram';
+export { MigrationDiagram } from './migration-diagram';
+export type { MigrationDiagramOptions, TableChange, ColumnChange } from './migration-diagram';
+export { ClassDiagram } from './class-diagram';
+export type { ClassDiagramOptions, UmlClass, UmlAttribute, UmlMethod } from './class-diagram';
+export { RelationalDiagram } from './relational-diagram';
+export type { RelationalDiagramOptions, RelEntity, RelColumn, RelRelationship, } from './relational-diagram';
+export { SequenceDiagram } from './sequence-diagram';
+export type { SequenceDiagramOptions, SeqParticipant, SeqMessage } from './sequence-diagram';
+export { StateDiagram } from './state-diagram';
+export type { StateDiagramOptions, StateNode, StateTransition } from './state-diagram';
+export { DependencyDiagram } from './dependency-diagram';
+export type { DependencyDiagramOptions } from './dependency-diagram';
+export { SchemaDocDiagram } from './schemadoc-diagram';
+export type { SchemaDocDiagramOptions, DocTable, DocColumn } from './schemadoc-diagram';
+export { IndexDiagram } from './index-diagram';
+export type { IndexDiagramOptions, IdxIndex, IdxColumn } from './index-diagram';
+export { FlowDiagram } from './flow-diagram';
+export type { FlowDiagramOptions, FlowNode, FlowEdge } from './flow-diagram';
+export { TreeDiagram } from './tree-diagram';
+export type { TreeDiagramOptions, TreeNode } from './tree-diagram';
+export { ChenDiagram } from './chen-diagram';
+export type { ChenDiagramOptions, ChenEntity, ChenAttribute, ChenRelationship, } from './chen-diagram';
+export { PackageDiagram } from './package-diagram';
+export type { PackageDiagramOptions, PackageBox, PackageMember, PackageDependency, } from './package-diagram';
+export { GanttDiagram } from './gantt-diagram';
+export type { GanttDiagramOptions, GanttTask } from './gantt-diagram';
+export { SvgDocument, El } from './svg-dom';
+export { resolveAccent, resolveTheme, rotatedPalettes, accent2Of, ACCENT_PALETTES, INDUSTRY, FONTS, FONT_IMPORT, BADGE_TINTS, } from './palette';
+export type { AccentPalette, ThemeColors } from './palette';
+import { ModelDiagramOptions } from './model-diagram';
+import { ERDiagramOptions } from './er-diagram';
+/**
+ * Create and immediately save a model SVG diagram.
+ *
+ * @param options  Model definition
+ * @param outPath  Output SVG file path
+ * @returns        Resolved output path
+ *
+ * @example
+ * generateModelDiagram(
+ *   { name:'User', fields:{ id:{type:'INTEGER',primaryKey:true} } },
+ *   './diagrams/User.svg'
+ * );
+ */
+export declare function generateModelDiagram(options: ModelDiagramOptions, outPath: string): string;
+/**
+ * Create and immediately save an ER diagram.
+ *
+ * @param options  ER diagram options (title + models array)
+ * @param outPath  Output SVG file path
+ * @returns        Resolved output path
+ *
+ * @example
+ * generateERDiagram(
+ *   { title:'My Schema', models:[userDef, postDef] },
+ *   './diagrams/schema.svg'
+ * );
+ */
+export declare function generateERDiagram(options: ERDiagramOptions, outPath: string): string;
+/**
+ * Load a model definition from a JSON file and generate its SVG diagram.
+ */
+export declare function generateModelDiagramFromFile(specPath: string, outPath?: string): string;
+/**
+ * Load an ER schema from a JSON file and generate the SVG diagram.
+ */
+export declare function generateERDiagramFromFile(schemaPath: string, outPath?: string): string;

package/dist/diagrams/index.js

@@ -84,7 +84,7 @@
  *  }
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ACCENT_PALETTES = exports.rotatedPalettes = exports.resolveTheme = exports.resolveAccent = exports.El = exports.SvgDocument = exports.GanttDiagram = exports.PackageDiagram = exports.ChenDiagram = exports.TreeDiagram = exports.FlowDiagram = exports.IndexDiagram = exports.SchemaDocDiagram = exports.DependencyDiagram = exports.StateDiagram = exports.SequenceDiagram = exports.RelationalDiagram = exports.ClassDiagram = exports.MigrationDiagram = exports.ERDiagram = exports.ModelDiagram = void 0;
+exports.BADGE_TINTS = exports.FONT_IMPORT = exports.FONTS = exports.INDUSTRY = exports.ACCENT_PALETTES = exports.accent2Of = exports.rotatedPalettes = exports.resolveTheme = exports.resolveAccent = exports.El = exports.SvgDocument = exports.GanttDiagram = exports.PackageDiagram = exports.ChenDiagram = exports.TreeDiagram = exports.FlowDiagram = exports.IndexDiagram = exports.SchemaDocDiagram = exports.DependencyDiagram = exports.StateDiagram = exports.SequenceDiagram = exports.RelationalDiagram = exports.ClassDiagram = exports.MigrationDiagram = exports.ERDiagram = exports.ModelDiagram = void 0;
 exports.generateModelDiagram = generateModelDiagram;
 exports.generateERDiagram = generateERDiagram;
 exports.generateModelDiagramFromFile = generateModelDiagramFromFile;
@@ -128,7 +128,13 @@ var palette_1 = require("./palette");
 Object.defineProperty(exports, "resolveAccent", { enumerable: true, get: function () { return palette_1.resolveAccent; } });
 Object.defineProperty(exports, "resolveTheme", { enumerable: true, get: function () { return palette_1.resolveTheme; } });
 Object.defineProperty(exports, "rotatedPalettes", { enumerable: true, get: function () { return palette_1.rotatedPalettes; } });
+Object.defineProperty(exports, "accent2Of", { enumerable: true, get: function () { return palette_1.accent2Of; } });
 Object.defineProperty(exports, "ACCENT_PALETTES", { enumerable: true, get: function () { return palette_1.ACCENT_PALETTES; } });
+// Industry design-system tokens
+Object.defineProperty(exports, "INDUSTRY", { enumerable: true, get: function () { return palette_1.INDUSTRY; } });
+Object.defineProperty(exports, "FONTS", { enumerable: true, get: function () { return palette_1.FONTS; } });
+Object.defineProperty(exports, "FONT_IMPORT", { enumerable: true, get: function () { return palette_1.FONT_IMPORT; } });
+Object.defineProperty(exports, "BADGE_TINTS", { enumerable: true, get: function () { return palette_1.BADGE_TINTS; } });
 // ─── Convenience factory functions ──────────────────────────────────────────
 const model_diagram_2 = require("./model-diagram");
 const er_diagram_2 = require("./er-diagram");

package/dist/diagrams/migration-diagram.d.ts

@@ -0,0 +1,67 @@
+/**
+ * MigrationDiagram — generates an SVG showing database schema changes.
+ *
+ * Features:
+ *  - Shows tables with their columns (before/after or just new state)
+ *  - Color-coded change indicators: green (added), red (removed), yellow (modified)
+ *  - Migration metadata header with timestamp and description
+ *  - Support for multiple migration steps
+ *  - Compact field rows with type badges
+ *
+ * Usage:
+ *   const diag = new MigrationDiagram({
+ *     title: 'User Migration',
+ *     description: 'Add email verification fields',
+ *     changes: [
+ *       { table: 'users', type: 'modify', changes: [...] },
+ *       { table: 'sessions', type: 'add', changes: [...] },
+ *     ]
+ *   });
+ *   diag.save('./diagrams/migration.svg');
+ */
+export interface ColumnChange {
+    name: string;
+    type: string;
+    action: 'add' | 'remove' | 'modify';
+    oldType?: string;
+    constraints?: string[];
+}
+export interface TableChange {
+    table: string;
+    type: 'add' | 'remove' | 'modify';
+    changes: ColumnChange[];
+}
+export interface MigrationDiagramOptions {
+    /** Diagram title */
+    title?: string;
+    /** Migration description */
+    description?: string;
+    /** Migration timestamp */
+    timestamp?: string;
+    /** All table changes to visualize */
+    changes: TableChange[];
+    /** Theme */
+    theme?: 'light' | 'dark';
+    /** Custom accent color */
+    color?: string;
+}
+export declare class MigrationDiagram {
+    private opts;
+    private static readonly BOX_W;
+    private static readonly BOX_HDR;
+    private static readonly BOX_ROW;
+    private static readonly FOOT_H;
+    private static readonly MARGIN;
+    private static readonly BANNER_H;
+    private static readonly V_GAP;
+    constructor(options: MigrationDiagramOptions);
+    private computeLayout;
+    private renderBanner;
+    private renderChangeBox;
+    private renderLegend;
+    generate(): string;
+    /**
+     * Write the SVG to a file.
+     */
+    save(outputPath: string): string;
+}

package/dist/diagrams/migration-diagram.js

@@ -57,6 +57,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MigrationDiagram = void 0;
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
+const palette_1 = require("./palette");
+// ─── Industry design system ────────────────────────────────────────────────
+// Barlow / JetBrains Mono typography, hairline borders and square "blueprint"
+// corners are fixed by the Industry spec; the banner accent + canvas colours
+// route through resolveAccent / resolveTheme so --color / --theme keep working.
+// Family names are single-quoted so they nest inside double-quoted SVG attrs.
+const IND_FONT_HEAD = "'Barlow Condensed', system-ui, sans-serif";
+const IND_FONT_BODY = "'Barlow', system-ui, sans-serif";
+const IND_FONT_MONO = "ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace";
+const IND_HAIRLINE = 'rgba(29,31,32,0.16)';
+const IND_FONT_IMPORT = "@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&family=JetBrains+Mono&display=swap');";
 // ─── Constants ─────────────────────────────────────────────────────────────
 const CHANGE_COLORS = {
     add: { header: '#065F46', mid: '#059669', light: '#D1FAE5', text: '#065F46', icon: '#059669' },
@@ -80,20 +91,10 @@ function xmlEsc(s) {
         .replace(/"/g, '"');
 }
 function typeBadgeColor(type) {
-    const t = type.toUpperCase();
-    if (/STRING|VARCHAR|CHAR|TEXT/i.test(t))
-        return { text: '#059669', bg: '#D1FAE5' };
-    if (/INT|BIGINT|SMALLINT|FLOAT|DOUBLE|DECIMAL/i.test(t))
-        return { text: '#7C3AED', bg: '#EDE9FE' };
-    if (/DATE|TIME|TIMESTAMP/i.test(t))
-        return { text: '#EA580C', bg: '#FFEDD5' };
-    if (/BOOL/i.test(t))
-        return { text: '#DB2777', bg: '#FCE7F3' };
-    if (/UUID/i.test(t))
-        return { text: '#0891B2', bg: '#CFFAFE' };
-    if (/JSON/i.test(t))
-        return { text: '#4F46E5', bg: '#E0E7FF' };
-    return { text: '#475569', bg: '#F1F5F9' };
+    // Industry blueprint: type badges share one muted accent tint so the box
+    // stays restrained; the type text itself carries the meaning.
+    void type;
+    return { text: '#2c455d', bg: '#eef6ff' };
 }
 // ─── Main class ────────────────────────────────────────────────────────────
 class MigrationDiagram {
@@ -104,7 +105,7 @@ class MigrationDiagram {
             timestamp: options.timestamp ?? new Date().toISOString(),
             changes: options.changes ?? [],
             theme: options.theme ?? 'light',
-            color: options.color ?? 'blue',
+            color: options.color ?? '',
         };
     }
     // ── Compute layout positions ─────────────────────────────────────────
@@ -133,19 +134,11 @@ class MigrationDiagram {
     renderBanner(totalW) {
         const H = MigrationDiagram.BANNER_H;
         const { title, description, timestamp } = this.opts;
+        // Solid accent banner (blueprint label bar) — no gradient, no drop shadow.
+        const accent = (0, palette_1.resolveAccent)(this.opts.color);
         return `
   <!-- ═══ BANNER ═══ -->
-  <defs>
-    <linearGradient id="migBanner" x1="0" y1="0" x2="1" y2="0"
-                    gradientUnits="objectBoundingBox">
-      <stop offset="0%" stop-color="#7C3AED"/>
-      <stop offset="100%" stop-color="#A855F7"/>
-    </linearGradient>
-    <filter id="migBannerSh" x="-5%" y="-5%" width="110%" height="120%">
-      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#7C3AED30"/>
-    </filter>
-  </defs>
-  <rect width="${totalW}" height="${H}" fill="url(#migBanner)" filter="url(#migBannerSh)"/>
+  <rect width="${totalW}" height="${H}" fill="${accent.mid}"/>
 
   <!-- Database icon (SVG) -->
   <g transform="translate(30, 24)">
@@ -155,13 +148,13 @@ class MigrationDiagram {
     <path d="M2 20c0 2.2 5.4 4 12 4s12-1.8 12-4" fill="none" stroke="white" stroke-width="1.5" opacity="0.3"/>
   </g>
 
-  <text x="58" y="36" font-family="system-ui" font-size="22" font-weight="800" fill="white">${xmlEsc(title)}</text>
-  <text x="58" y="54" font-family="system-ui" font-size="12" fill="rgba(255,255,255,0.75)">${xmlEsc(description)}</text>
-  <text x="${totalW - 30}" y="54" font-family="'SF Mono',monospace" font-size="11" fill="rgba(255,255,255,0.6)" text-anchor="end">${timestamp}</text>
+  <text x="58" y="36" font-family="${IND_FONT_HEAD}" font-size="22" font-weight="600" fill="white">${xmlEsc(title)}</text>
+  <text x="58" y="54" font-family="${IND_FONT_BODY}" font-size="12" fill="rgba(255,255,255,0.78)">${xmlEsc(description)}</text>
+  <text x="${totalW - 30}" y="54" font-family="${IND_FONT_MONO}" font-size="11" fill="rgba(255,255,255,0.7)" text-anchor="end">${timestamp}</text>
 
-  <!-- Migration tag -->
-  <rect x="${totalW - 130}" y="20" width="100" height="26" rx="13" fill="rgba(255,255,255,0.15)"/>
-  <text x="${totalW - 80}" y="38" font-family="'SF Mono',monospace" font-size="11" font-weight="700" fill="white" text-anchor="middle">MIGRATION</text>`;
+  <!-- Migration tag (square blueprint chip) -->
+  <rect x="${totalW - 130}" y="20" width="100" height="26" fill="rgba(255,255,255,0.15)"/>
+  <text x="${totalW - 80}" y="38" font-family="${IND_FONT_MONO}" font-size="11" font-weight="700" fill="white" text-anchor="middle">MIGRATION</text>`;
     }
     // ── Render a table change box ─────────────────────────────────────────
     renderChangeBox(item) {
@@ -175,27 +168,20 @@ class MigrationDiagram {
             text: '#334155',
             icon: '#475569',
         };
-        const R = 10;
         // Sanitize the table name for use in an SVG element id (must be a valid,
         // unique NCName) and escape it wherever it lands in markup/comments.
         const safeId = String(change.table ?? 'table').replace(/\W/g, '') + colorIdx;
         const changes = change.changes ?? [];
         let out = `\n  <!-- Change: ${xmlEsc(change.table)} (${xmlEsc(change.type)}) -->`;
-        // Shadow
-        out += `\n  <defs>
-    <filter id="migSh${safeId}" x="-8%" y="-8%" width="116%" height="130%">
-      <feDropShadow dx="0" dy="3" stdDeviation="5" flood-color="#00000015"/>
-    </filter>
-  </defs>`;
-        // Box background
-        out += `\n  <rect x="${x}" y="${y}" width="${w}" height="${h}" rx="${R}" fill="white" filter="url(#migSh${safeId})"/>`;
-        // Header with change type indicator
-        out += `\n  <rect x="${x}" y="${y}" width="${w}" height="${MigrationDiagram.BOX_HDR}" rx="${R}" fill="${colors.header}"/>`;
+        // Box background (white interior, hairline border, square — blueprint).
+        out += `\n  <rect x="${x}" y="${y}" width="${w}" height="${h}" fill="white" stroke="${IND_HAIRLINE}" stroke-width="1"/>`;
+        // Header with change type indicator (solid, no radius)
+        out += `\n  <rect x="${x}" y="${y}" width="${w}" height="${MigrationDiagram.BOX_HDR}" fill="${colors.header}"/>`;
         // Change type badge
-        out += `\n  <rect x="${x + 12}" y="${y + 10}" width="56" height="22" rx="6" fill="${colors.light}"/>`;
-        out += `\n  <text x="${x + 40}" y="${y + 25}" font-family="'SF Mono',monospace" font-size="10" font-weight="700" fill="${colors.text}" text-anchor="middle">${xmlEsc(String(change.type ?? '').toUpperCase())}</text>`;
+        out += `\n  <rect x="${x + 12}" y="${y + 10}" width="56" height="22" fill="${colors.light}"/>`;
+        out += `\n  <text x="${x + 40}" y="${y + 25}" font-family="${IND_FONT_MONO}" font-size="10" font-weight="700" fill="${colors.text}" text-anchor="middle">${xmlEsc(String(change.type ?? '').toUpperCase())}</text>`;
         // Table name
-        out += `\n  <text x="${x + 80}" y="${y + 27}" font-family="system-ui" font-size="15" font-weight="700" fill="white">${xmlEsc(change.table)}</text>`;
+        out += `\n  <text x="${x + 80}" y="${y + 27}" font-family="${IND_FONT_HEAD}" font-size="15" font-weight="700" fill="white">${xmlEsc(change.table)}</text>`;
         // Column changes
         changes.forEach((col, i) => {
             const fy = y + MigrationDiagram.BOX_HDR + i * MigrationDiagram.BOX_ROW;
@@ -224,24 +210,24 @@ class MigrationDiagram {
             // Column name
             const nameX = x + 36;
             const nameW = col.action === 'modify' && col.oldType ? '600' : '500';
-            out += `\n  <text x="${nameX}" y="${iy + 4}" font-family="'SF Mono',monospace" font-size="12" font-weight="${nameW}" fill="#1E293B">${xmlEsc(col.name)}</text>`;
+            out += `\n  <text x="${nameX}" y="${iy + 4}" font-family="${IND_FONT_MONO}" font-size="12" font-weight="${nameW}" fill="#1d1f20">${xmlEsc(col.name)}</text>`;
             // Type badge
             if (col.action === 'modify' && col.oldType) {
                 // Show old → new type
-                out += `\n  <text x="${x + w - 10}" y="${iy + 4}" font-family="'SF Mono',monospace" font-size="9" fill="#94A3B8" text-anchor="end">${xmlEsc(col.oldType)} → ${xmlEsc(col.type)}</text>`;
+                out += `\n  <text x="${x + w - 10}" y="${iy + 4}" font-family="${IND_FONT_MONO}" font-size="9" fill="#7a7a7d" text-anchor="end">${xmlEsc(col.oldType)} → ${xmlEsc(col.type)}</text>`;
             }
             else {
                 const tbW = col.type.length * 6 + 12;
-                out += `\n  <rect x="${x + w - tbW - 8}" y="${fy + 6}" width="${tbW}" height="16" rx="4" fill="${tc.bg}"/>`;
-                out += `\n  <text x="${x + w - tbW / 2 - 8}" y="${fy + 18}" font-family="'SF Mono',monospace" font-size="9" font-weight="600" fill="${tc.text}" text-anchor="middle">${xmlEsc(col.type.slice(0, 12))}</text>`;
+                out += `\n  <rect x="${x + w - tbW - 8}" y="${fy + 6}" width="${tbW}" height="16" fill="${tc.bg}"/>`;
+                out += `\n  <text x="${x + w - tbW / 2 - 8}" y="${fy + 18}" font-family="${IND_FONT_MONO}" font-size="9" font-weight="600" fill="${tc.text}" text-anchor="middle">${xmlEsc(col.type.slice(0, 12))}</text>`;
             }
-            // Row separator
-            out += `\n  <line x1="${x}" y1="${fy + MigrationDiagram.BOX_ROW}" x2="${x + w}" y2="${fy + MigrationDiagram.BOX_ROW}" stroke="#E2E8F0"/>`;
+            // Row separator (hairline)
+            out += `\n  <line x1="${x}" y1="${fy + MigrationDiagram.BOX_ROW}" x2="${x + w}" y2="${fy + MigrationDiagram.BOX_ROW}" stroke="${IND_HAIRLINE}"/>`;
         });
         // Footer
         const footY = y + MigrationDiagram.BOX_HDR + changes.length * MigrationDiagram.BOX_ROW;
-        out += `\n  <rect x="${x}" y="${footY}" width="${w}" height="${MigrationDiagram.FOOT_H}" fill="${colors.light}" rx="0 0 ${R} ${R}"/>`;
-        out += `\n  <text x="${x + 12}" y="${footY + 18}" font-family="system-ui" font-size="10" fill="${colors.text}" font-weight="600">${changes.length} change${changes.length !== 1 ? 's' : ''}</text>`;
+        out += `\n  <rect x="${x}" y="${footY}" width="${w}" height="${MigrationDiagram.FOOT_H}" fill="${colors.light}"/>`;
+        out += `\n  <text x="${x + 12}" y="${footY + 18}" font-family="${IND_FONT_HEAD}" font-size="10" fill="${colors.text}" font-weight="600">${changes.length} change${changes.length !== 1 ? 's' : ''}</text>`;
         return out;
     }
     // ── Render legend ────────────────────────────────────────────────────
@@ -254,9 +240,9 @@ class MigrationDiagram {
         let out = `\n  <!-- LEGEND -->`;
         items.forEach((item, i) => {
             const ix = x + i * 110;
-            out += `\n  <rect x="${ix}" y="${y}" width="90" height="28" rx="6" fill="${item.bg}"/>`;
+            out += `\n  <rect x="${ix}" y="${y}" width="90" height="28" fill="${item.bg}"/>`;
             out += `\n  <circle cx="${ix + 16}" cy="${y + 14}" r="6" fill="${item.color}"/>`;
-            out += `\n  <text x="${ix + 30}" y="${y + 18}" font-family="system-ui" font-size="11" font-weight="600" fill="${item.color}">${item.label}</text>`;
+            out += `\n  <text x="${ix + 30}" y="${y + 18}" font-family="${IND_FONT_HEAD}" font-size="11" font-weight="600" fill="${item.color}">${item.label}</text>`;
         });
         return out;
     }
@@ -273,11 +259,13 @@ class MigrationDiagram {
             const lastItem = layout[layout.length - 1];
             totalH = lastItem.y + lastItem.h + MARGIN + 50;
         }
+        const theme = (0, palette_1.resolveTheme)(this.opts.theme);
         const svg = [
             `<?xml version="1.0" encoding="UTF-8"?>`,
             `<!-- Generated by ts-prorm-orm MigrationDiagram -->`,
             `<svg xmlns="http://www.w3.org/2000/svg" width="${totalW}" height="${totalH}" viewBox="0 0 ${totalW} ${totalH}">`,
-            `  <rect width="${totalW}" height="${totalH}" fill="#F8FAFC"/>`,
+            `  <style>${IND_FONT_IMPORT}</style>`,
+            `  <rect width="${totalW}" height="${totalH}" fill="${theme.canvasBg}"/>`,
         ];
         // Banner
         svg.push(this.renderBanner(totalW));

package/dist/diagrams/model-diagram.d.ts

@@ -0,0 +1,85 @@
+/**
+ * ModelDiagram — generates a fully-rendered SVG card for a single ORM model,
+ * styled to the "Industry" blueprint design system.
+ *
+ * Look:
+ *  - Solid accent (#5980a6) header bar with the model name in Barlow Condensed
+ *  - White card body, 1px hairline dividers, SQUARE corners, no drop shadow
+ *  - L-shaped corner registration marks around the frame (blueprint)
+ *  - One row per column: name (Barlow) + type (mono, neutral-700) + constraint
+ *    badges — PK/UQ (accent tint), FK (accent-2 tint), NN/AI/TS (neutral tint)
+ *  - Associations listed at the bottom with cardinality marks
+ *  - Hairline footer strip with table name + metadata
+ *  - Auto-sized SVG viewBox
+ *
+ * Usage:
+ *   const diag = new ModelDiagram({ name: 'User', fields: { … }, associations: […] });
+ *   diag.save('./diagrams/User.svg');
+ *   // or:
+ *   const svgString = diag.generate();
+ */
+export interface FieldDefinition {
+    name?: string;
+    type: string | {
+        key?: string;
+        toSqlString?: () => string;
+    };
+    primaryKey?: boolean;
+    /** Treated as FK even without `references` when set to true */
+    foreignKey?: boolean;
+    unique?: boolean;
+    allowNull?: boolean;
+    defaultValue?: any;
+    autoIncrement?: boolean;
+    references?: {
+        model: string;
+        key: string;
+    };
+    comment?: string;
+    validate?: Record<string, any>;
+    enum?: string[];
+}
+export interface AssociationDefinition {
+    type: 'hasOne' | 'hasMany' | 'belongsTo' | 'belongsToMany';
+    target: string;
+    foreignKey?: string;
+    sourceKey?: string;
+    through?: string;
+    as?: string;
+}
+export interface ModelDiagramOptions {
+    /** Model class name, e.g. "User" */
+    name: string;
+    /** Override database table name */
+    tableName?: string;
+    /** Map of column-name → field definition */
+    fields: Record<string, FieldDefinition>;
+    associations?: AssociationDefinition[];
+    timestamps?: boolean;
+    paranoid?: boolean;
+    underscored?: boolean;
+    comment?: string;
+    theme?: 'light' | 'dark';
+    /** Named palette (e.g. "industry") or hex color for the accent header */
+    color?: string;
+}
+export declare class ModelDiagram {
+    private opts;
+    private static readonly W;
+    private static readonly HDR;
+    private static readonly COL_HDR;
+    private static readonly ROW_H;
+    private static readonly ASSOC_HDR;
+    private static readonly ASSOC_ROW;
+    private static readonly FOOTER;
+    private static readonly PAD;
+    constructor(options: ModelDiagramOptions);
+    private badges;
+    private drawBadge;
+    private cornerMarks;
+    generate(): string;
+    /**
+     * Write the SVG to a file. Creates parent directories if needed.
+     */
+    save(outputPath: string): string;
+}