@svg-gen/tech-svg-generator 1.0.0

package/dist/scenes.js

@@ -0,0 +1,257 @@
+/**
+ * Scene definitions for different technical contexts
+ */
+import { card, metric, status, arrow, codeSnippet, terminalBlock, titleBar } from './primitives.js';
+/**
+ * Architecture: 3 cards in a row with arrows
+ */
+const architecture = (title, c, w, h) => `
+  ${card(80, 100, 120, 100, 'globe', 'Client', c, c.cyan)}
+  ${card(290, 100, 120, 100, 'server', 'Server', c, c.blue)}
+  ${card(500, 100, 120, 100, 'database', 'Database', c, c.purple)}
+  ${arrow(200, 150, 290, 150, c.cyan, 'HTTP', false, c)}
+  ${arrow(410, 150, 500, 150, c.purple, 'SQL', false, c)}
+  ${metric(80, 250, 'Latency', '12', c, 'ms', c.green)}
+  ${metric(210, 250, 'Uptime', '99.9', c, '%', c.green)}
+  ${status(360, 280, 'ok', 'All systems operational', c)}
+  ${titleBar(title, w, h, c)}
+`;
+/**
+ * Scaling: Load balancer + multiple nodes
+ */
+const scaling = (title, c, w, h) => `
+  ${card(290, 50, 120, 80, 'cloud', 'Load Balancer', c, c.cyan)}
+  ${card(80, 180, 100, 80, 'server', 'Node 1', c, c.green)}
+  ${card(220, 180, 100, 80, 'server', 'Node 2', c, c.green)}
+  ${card(360, 180, 100, 80, 'server', 'Node 3', c, c.green)}
+  ${card(500, 180, 100, 80, 'server', 'Node 4', c, c.orange)}
+  ${arrow(350, 130, 130, 180, c.cyan, '', false, c)}
+  ${arrow(350, 130, 270, 180, c.cyan, '', false, c)}
+  ${arrow(350, 130, 410, 180, c.cyan, '', false, c)}
+  ${arrow(350, 130, 550, 180, c.cyan, '', false, c)}
+  ${metric(150, 290, 'RPS', '45K', c, '', c.blue)}
+  ${metric(290, 290, 'Nodes', '4', c, '', c.green)}
+  ${metric(430, 290, 'CPU', '72', c, '%', c.orange)}
+  ${titleBar(title, w, h, c)}
+`;
+/**
+ * Database: Primary + Replicas
+ */
+const database = (title, c, w, h) => `
+  ${card(180, 80, 140, 100, 'database', 'Primary', c, c.purple)}
+  ${card(380, 80, 140, 100, 'database', 'Replica', c, c.cyan)}
+  ${arrow(320, 130, 380, 130, c.green, 'sync', false, c)}
+  ${metric(80, 220, 'QPS', '2.3K', c, '', c.purple)}
+  ${metric(210, 220, 'Latency', '4', c, 'ms', c.green)}
+  ${metric(340, 220, 'Connections', '128', c, '', c.blue)}
+  ${metric(470, 220, 'Cache Hit', '94', c, '%', c.green)}
+  ${status(200, 320, 'ok', 'Replication healthy', c)}
+  ${status(400, 320, 'ok', 'Replica in sync', c)}
+  ${titleBar(title, w, h, c)}
+`;
+/**
+ * Deployment: CI/CD Pipeline
+ */
+const deployment = (title, c, w, h) => `
+  ${card(60, 120, 100, 80, 'code', 'Code', c, c.muted)}
+  ${card(200, 120, 100, 80, 'git', 'Build', c, c.orange)}
+  ${card(340, 120, 100, 80, 'target', 'Test', c, c.blue)}
+  ${card(480, 120, 100, 80, 'rocket', 'Deploy', c, c.green)}
+  ${arrow(160, 160, 200, 160, c.muted, '', false, c)}
+  ${arrow(300, 160, 340, 160, c.orange, '', false, c)}
+  ${arrow(440, 160, 480, 160, c.blue, '', false, c)}
+  ${metric(140, 240, 'Build', '2.3', c, 'min', c.orange)}
+  ${metric(290, 240, 'Tests', '141', c, '', c.green)}
+  ${metric(440, 240, 'Coverage', '87', c, '%', c.blue)}
+  ${status(280, 330, 'ok', 'Pipeline passed • Ready for production', c)}
+  ${titleBar(title, w, h, c)}
+`;
+/**
+ * Security: Firewall flow
+ */
+const security = (title, c, w, h) => `
+  ${card(80, 120, 120, 90, 'globe', 'Internet', c, c.muted)}
+  ${card(290, 120, 120, 90, 'shield', 'Firewall', c, c.green)}
+  ${card(500, 120, 120, 90, 'lock', 'Auth', c, c.purple)}
+  ${arrow(200, 165, 290, 165, c.muted, 'HTTPS', false, c)}
+  ${arrow(410, 165, 500, 165, c.green, 'mTLS', false, c)}
+  ${metric(100, 250, 'Blocked', '847', c, '', c.red)}
+  ${metric(250, 250, 'Auth Rate', '99.2', c, '%', c.green)}
+  ${metric(400, 250, 'Threats', '0', c, '', c.green)}
+  ${status(280, 340, 'ok', 'Zero Trust • All traffic encrypted', c)}
+  ${titleBar(title, w, h, c)}
+`;
+/**
+ * Debugging: Code + Terminal side by side
+ */
+const debugging = (title, c, w, h) => `
+  ${codeSnippet(40, 50, 300, 130, [
+    { t: 'async function fetch() {' },
+    { t: '  const res = await api.get();', hl: true },
+    { t: '  return res.data;' },
+    { t: '}' }
+], c, 'debug.ts')}
+  ${terminalBlock(360, 50, 300, 130, [
+    { t: 'node debug.ts' },
+    { t: 'TypeError: Cannot read undefined', err: true },
+    { t: '    at fetch (debug.ts:2)', err: true }
+], c)}
+  ${card(150, 220, 120, 80, 'alert', 'Bug Found', c, c.red)}
+  ${card(430, 220, 120, 80, 'check', 'Fixed', c, c.green)}
+  ${arrow(270, 260, 430, 260, c.orange, 'debug', false, c)}
+  ${status(280, 340, 'ok', 'Issue resolved', c)}
+  ${titleBar(title, w, h, c)}
+`;
+/**
+ * Testing: Test results
+ */
+const testing = (title, c, w, h) => `
+  ${codeSnippet(40, 50, 280, 120, [
+    { t: 'describe("API", () => {' },
+    { t: '  it("returns 200", async () => {', hl: true },
+    { t: '    expect(res.status).toBe(200);' },
+    { t: '  });' }
+], c, 'api.test.ts')}
+  ${metric(360, 50, 'Passed', '141', c, '', c.green)}
+  ${metric(490, 50, 'Failed', '1', c, '', c.red)}
+  ${metric(360, 120, 'Coverage', '87', c, '%', c.blue)}
+  ${metric(490, 120, 'Duration', '4.2', c, 's', c.muted)}
+  ${card(150, 220, 120, 80, 'target', 'Unit', c, c.green)}
+  ${card(310, 220, 120, 80, 'layers', 'Integration', c, c.blue)}
+  ${card(470, 220, 120, 80, 'globe', 'E2E', c, c.purple)}
+  ${status(280, 340, 'ok', 'All test suites passed', c)}
+  ${titleBar(title, w, h, c)}
+`;
+/**
+ * Performance: Metrics focused
+ */
+const performance = (title, c, w, h) => `
+  ${metric(80, 60, 'P99 Latency', '23', c, 'ms', c.green)}
+  ${metric(210, 60, 'RPS', '45K', c, '', c.blue)}
+  ${metric(340, 60, 'Error Rate', '0.1', c, '%', c.green)}
+  ${metric(470, 60, 'CPU', '45', c, '%', c.orange)}
+  ${terminalBlock(120, 150, 460, 100, [
+    { t: '$ perf analyze --profile' },
+    { t: 'Hotspot: db.query() - 45% CPU', err: true },
+    { t: '✓ Optimized: -65% latency', ok: true }
+], c)}
+  ${card(200, 280, 120, 70, 'zap', 'Optimized', c, c.green)}
+  ${card(380, 280, 120, 70, 'activity', 'Monitoring', c, c.blue)}
+  ${titleBar(title, w, h, c)}
+`;
+/**
+ * API: Request/Response
+ */
+const api = (title, c, w, h) => `
+  ${codeSnippet(40, 50, 300, 120, [
+    { t: 'GET /api/v2/users HTTP/1.1' },
+    { t: 'Authorization: Bearer ***', hl: true },
+    { t: 'Accept: application/json' }
+], c, 'request.http')}
+  ${codeSnippet(360, 50, 300, 120, [
+    { t: '200 OK (12ms)' },
+    { t: '{ "users": [...] }', hl: true },
+    { t: 'Content-Type: application/json' }
+], c, 'response')}
+  ${metric(80, 200, 'RPS', '8.4K', c, '', c.blue)}
+  ${metric(210, 200, 'P99', '45', c, 'ms', c.green)}
+  ${metric(340, 200, 'Errors', '0.01', c, '%', c.green)}
+  ${metric(470, 200, 'Cache', '78', c, '%', c.cyan)}
+  ${status(280, 300, 'ok', 'API healthy • Rate limit OK', c)}
+  ${titleBar(title, w, h, c)}
+`;
+/**
+ * Monitoring: Dashboard
+ */
+const monitoring = (title, c, w, h) => `
+  ${metric(80, 50, 'Uptime', '99.99', c, '%', c.green)}
+  ${metric(210, 50, 'Alerts', '0', c, '', c.green)}
+  ${metric(340, 50, 'P95', '23', c, 'ms', c.blue)}
+  ${metric(470, 50, 'Memory', '62', c, '%', c.orange)}
+  ${card(120, 150, 120, 80, 'activity', 'Metrics', c, c.blue)}
+  ${card(290, 150, 120, 80, 'eye', 'Traces', c, c.purple)}
+  ${card(460, 150, 120, 80, 'terminal', 'Logs', c, c.cyan)}
+  ${metric(80, 270, 'Events', '1.2M', c, '/day', c.muted)}
+  ${metric(210, 270, 'Retention', '30', c, 'days', c.muted)}
+  ${status(380, 300, 'ok', 'All systems healthy', c)}
+  ${titleBar(title, w, h, c)}
+`;
+/**
+ * Frontend: Web vitals
+ */
+const frontend = (title, c, w, h) => `
+  ${metric(80, 50, 'LCP', '1.2', c, 's', c.green)}
+  ${metric(210, 50, 'FID', '45', c, 'ms', c.green)}
+  ${metric(340, 50, 'CLS', '0.02', c, '', c.green)}
+  ${metric(470, 50, 'TTI', '2.1', c, 's', c.orange)}
+  ${codeSnippet(150, 140, 400, 100, [
+    { t: 'const App = () => {' },
+    { t: '  return <Suspense fallback={<Loader />}>', hl: true },
+    { t: '    <MainContent />' },
+    { t: '  </Suspense>;' }
+], c, 'App.tsx')}
+  ${card(200, 280, 120, 70, 'globe', 'Browser', c, c.cyan)}
+  ${card(380, 280, 120, 70, 'zap', 'Optimized', c, c.green)}
+  ${titleBar(title, w, h, c)}
+`;
+/**
+ * Success: Celebration
+ */
+const success = (title, c, w, h) => `
+  ${card(290, 60, 120, 100, 'check', 'Success!', c, c.green)}
+  ${metric(80, 200, 'Uptime', '100', c, '%', c.green)}
+  ${metric(210, 200, 'Users', '12.4K', c, '', c.blue)}
+  ${metric(340, 200, 'Revenue', '+24', c, '%', c.green)}
+  ${metric(470, 200, 'NPS', '72', c, '', c.purple)}
+  ${status(200, 320, 'ok', 'Deployment successful', c)}
+  ${status(400, 320, 'ok', 'Zero downtime', c)}
+  ${titleBar(title, w, h, c)}
+`;
+/**
+ * Error: Incident
+ */
+const error = (title, c, w, h) => `
+  ${card(290, 50, 120, 90, 'alert', 'Incident', c, c.red)}
+  ${terminalBlock(150, 160, 400, 100, [
+    { t: '$ kubectl logs pod/api-7d8f9' },
+    { t: 'ERROR: OOMKilled - Exit code 137', err: true },
+    { t: 'Memory limit exceeded: 512Mi', err: true }
+], c)}
+  ${metric(100, 290, 'Status', '503', c, '', c.red)}
+  ${metric(240, 290, 'Errors', '2.3K', c, '', c.red)}
+  ${metric(380, 290, 'MTTR', '4.2', c, 'min', c.orange)}
+  ${status(280, 370, 'error', 'Service degraded • Investigating', c)}
+  ${titleBar(title, w, h, c)}
+`;
+/**
+ * Default: Simple overview
+ */
+const defaultScene = (title, c, w, h) => `
+  ${card(290, 80, 120, 100, 'layers', 'System', c, c.blue)}
+  ${metric(80, 220, 'Requests', '8.2K', c, '/s', c.blue)}
+  ${metric(220, 220, 'Latency', '12', c, 'ms', c.green)}
+  ${metric(360, 220, 'Errors', '0.1', c, '%', c.green)}
+  ${metric(500, 220, 'Uptime', '99.9', c, '%', c.green)}
+  ${status(280, 340, 'ok', 'All systems operational', c)}
+  ${titleBar(title, w, h, c)}
+`;
+/**
+ * All available scenes
+ */
+export const SCENES = {
+    architecture,
+    scaling,
+    database,
+    deployment,
+    security,
+    debugging,
+    testing,
+    performance,
+    api,
+    monitoring,
+    frontend,
+    success,
+    error,
+    default: defaultScene,
+};
+//# sourceMappingURL=scenes.js.map

package/dist/themes.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Theme color definitions
+ */
+export interface ThemeColors {
+    bg: string;
+    card: string;
+    elevated: string;
+    border: string;
+    text: string;
+    muted: string;
+    dim: string;
+    blue: string;
+    purple: string;
+    green: string;
+    cyan: string;
+    orange: string;
+    red: string;
+    pink: string;
+}
+export interface Theme {
+    name: string;
+    colors: ThemeColors;
+}
+/**
+ * Available themes
+ */
+export declare const THEMES: Record<string, Theme>;
+/**
+ * Get theme by name, defaults to github-dark
+ */
+export declare function getTheme(name?: string): Theme;
+//# sourceMappingURL=themes.d.ts.map

package/dist/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,WAAW,CAAC;CACrB;AA8FD;;GAEG;AACH,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAKxC,CAAC;AAEF;;GAEG;AACH,wBAAgB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAG7C"}

package/dist/themes.js

@@ -0,0 +1,106 @@
+/**
+ * GitHub-inspired dark theme (default)
+ */
+const githubDark = {
+    name: 'github-dark',
+    colors: {
+        bg: '#0d1117',
+        card: '#161b22',
+        elevated: '#21262d',
+        border: '#30363d',
+        text: '#e6edf3',
+        muted: '#8b949e',
+        dim: '#6e7681',
+        blue: '#58a6ff',
+        purple: '#a371f7',
+        green: '#3fb950',
+        cyan: '#39c5cf',
+        orange: '#d29922',
+        red: '#f85149',
+        pink: '#f778ba',
+    }
+};
+/**
+ * Dracula theme
+ */
+const dracula = {
+    name: 'dracula',
+    colors: {
+        bg: '#282a36',
+        card: '#44475a',
+        elevated: '#6272a4',
+        border: '#44475a',
+        text: '#f8f8f2',
+        muted: '#6272a4',
+        dim: '#44475a',
+        blue: '#8be9fd',
+        purple: '#bd93f9',
+        green: '#50fa7b',
+        cyan: '#8be9fd',
+        orange: '#ffb86c',
+        red: '#ff5555',
+        pink: '#ff79c6',
+    }
+};
+/**
+ * Nord theme
+ */
+const nord = {
+    name: 'nord',
+    colors: {
+        bg: '#2e3440',
+        card: '#3b4252',
+        elevated: '#434c5e',
+        border: '#4c566a',
+        text: '#eceff4',
+        muted: '#d8dee9',
+        dim: '#4c566a',
+        blue: '#88c0d0',
+        purple: '#b48ead',
+        green: '#a3be8c',
+        cyan: '#8fbcbb',
+        orange: '#d08770',
+        red: '#bf616a',
+        pink: '#b48ead',
+    }
+};
+/**
+ * One Dark theme
+ */
+const oneDark = {
+    name: 'one-dark',
+    colors: {
+        bg: '#282c34',
+        card: '#21252b',
+        elevated: '#2c313a',
+        border: '#3e4451',
+        text: '#abb2bf',
+        muted: '#5c6370',
+        dim: '#4b5263',
+        blue: '#61afef',
+        purple: '#c678dd',
+        green: '#98c379',
+        cyan: '#56b6c2',
+        orange: '#d19a66',
+        red: '#e06c75',
+        pink: '#c678dd',
+    }
+};
+/**
+ * Available themes
+ */
+export const THEMES = {
+    'github-dark': githubDark,
+    'dracula': dracula,
+    'nord': nord,
+    'one-dark': oneDark,
+};
+/**
+ * Get theme by name, defaults to github-dark
+ */
+export function getTheme(name) {
+    if (!name)
+        return githubDark;
+    return THEMES[name] || githubDark;
+}
+//# sourceMappingURL=themes.js.map

package/dist/types.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Available scene types for SVG generation
+ */
+export type SceneType = 'architecture' | 'scaling' | 'database' | 'deployment' | 'security' | 'debugging' | 'testing' | 'performance' | 'api' | 'monitoring' | 'frontend' | 'success' | 'error' | 'default';
+/**
+ * Options for SVG generation
+ */
+export interface GenerateOptions {
+    /** Width of the SVG (default: 700) */
+    width?: number;
+    /** Height of the SVG (default: 420) */
+    height?: number;
+    /** Theme name or custom theme colors */
+    theme?: string;
+    /** Force a specific scene type instead of auto-detection */
+    scene?: SceneType;
+}
+/**
+ * Result of SVG generation
+ */
+export interface GenerateResult {
+    /** The generated SVG string */
+    svg: string;
+    /** The detected or specified scene type */
+    scene: SceneType;
+    /** Width of the generated SVG */
+    width: number;
+    /** Height of the generated SVG */
+    height: number;
+}
+/**
+ * Code line for code snippet component
+ */
+export interface CodeLine {
+    /** The text content of the line */
+    t: string;
+    /** Whether to highlight this line */
+    hl?: boolean;
+}
+/**
+ * Terminal line for terminal block component
+ */
+export interface TerminalLine {
+    /** The text content of the line */
+    t: string;
+    /** Whether this is an error line */
+    err?: boolean;
+    /** Whether this is a success line */
+    ok?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,SAAS,GACjB,cAAc,GACd,SAAS,GACT,UAAU,GACV,YAAY,GACZ,UAAU,GACV,WAAW,GACX,SAAS,GACT,aAAa,GACb,KAAK,GACL,YAAY,GACZ,UAAU,GACV,SAAS,GACT,OAAO,GACP,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,2CAA2C;IAC3C,KAAK,EAAE,SAAS,CAAC;IACjB,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,mCAAmC;IACnC,CAAC,EAAE,MAAM,CAAC;IACV,qCAAqC;IACrC,EAAE,CAAC,EAAE,OAAO,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,mCAAmC;IACnC,CAAC,EAAE,MAAM,CAAC;IACV,oCAAoC;IACpC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,qCAAqC;IACrC,EAAE,CAAC,EAAE,OAAO,CAAC;CACd"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@svg-gen/tech-svg-generator",
+  "version": "1.0.0",
+  "description": "Generate clean, professional SVG illustrations for technical content. Perfect for blogs, documentation, and presentations.",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.d.ts",
+    "dist/**/*.d.ts.map",
+    "!dist/**/*.test.*",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "node --test dist/*.test.js",
+    "prepublishOnly": "pnpm run build",
+    "demo": "node examples/demo.js"
+  },
+  "keywords": [
+    "svg",
+    "illustration",
+    "technical",
+    "blog",
+    "documentation",
+    "diagram",
+    "generator",
+    "dark-theme",
+    "github-style"
+  ],
+  "author": "Satishkumar Dhule",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/open-tech-svg-gen/tech-svg-generator"
+  },
+  "bugs": {
+    "url": "https://github.com/open-tech-svg-gen/tech-svg-generator/issues"
+  },
+  "homepage": "https://github.com/open-tech-svg-gen/tech-svg-generator#readme",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@types/js-yaml": "^4.0.9",
+    "@types/node": "^22.0.0",
+    "semantic-release": "^24.0.0",
+    "typescript": "^5.3.0"
+  },
+  "dependencies": {
+    "js-yaml": "^4.1.1"
+  }
+}