@shumoku/renderer 0.2.3 → 0.2.5

package/dist/svg.d.ts

@@ -4,6 +4,13 @@
  */
 import type { LayoutResult, NetworkGraph } from '@shumoku/core';
 import type { DataAttributeOptions, RenderMode } from './types.js';
+/** Embedded content for a subgraph */
+export interface EmbeddedSubgraphContent {
+    /** SVG content to embed (inner content, without outer <svg> tag) */
+    svgContent: string;
+    /** ViewBox of the embedded content */
+    viewBox: string;
+}
 export interface SVGRendererOptions {
     /** Font family */
     fontFamily?: string;
@@ -20,6 +27,16 @@ export interface SVGRendererOptions {
      * Only used when renderMode is 'interactive'
      */
     dataAttributes?: DataAttributeOptions;
+    /**
+     * Unique sheet ID for generating unique filter/marker IDs
+     * Required when multiple SVGs are embedded in the same HTML page
+     */
+    sheetId?: string;
+    /**
+     * Embedded content for subgraphs (subgraphId -> content)
+     * Used to embed child SVG content into parent subgraph boxes
+     */
+    embeddedContent?: Map<string, EmbeddedSubgraphContent>;
 }
 export declare class SVGRenderer {
     private options;
@@ -30,6 +47,14 @@ export declare class SVGRenderer {
     private get isInteractive();
     /** Get data attribute options with defaults */
     private get dataAttrs();
+    /** Get unique ID suffix for this sheet */
+    private get idSuffix();
+    /** Get shadow filter ID */
+    private get shadowId();
+    /** Get arrow marker ID */
+    private get arrowId();
+    /** Get red arrow marker ID */
+    private get arrowRedId();
     /**
      * Get theme colors based on theme type
      */
@@ -80,6 +105,8 @@ export declare class SVGRenderer {
      * Render node content (icon + label) with dynamic vertical centering
      */
     private renderNodeContent;
+    /** Render content for export connector nodes */
+    private renderExportConnectorContent;
     private renderLink;
     /** Build data attributes for a link (interactive mode only) */
     private buildLinkDataAttributes;

package/dist/svg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"svg.d.ts","sourceRoot":"","sources":["../src/svg.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAKV,YAAY,EAKZ,YAAY,EAIb,MAAM,eAAe,CAAA;AAUtB,OAAO,KAAK,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAgElE,MAAM,WAAW,kBAAkB;IACjC,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,oBAAoB,CAAA;CACtC;AAaD,qBAAa,WAAW;IACtB,OAAO,CAAC,OAAO,CAA8B;IAC7C,OAAO,CAAC,WAAW,CAA2B;IAC9C,OAAO,CAAC,SAAS,CAA8B;gBAEnC,OAAO,CAAC,EAAE,kBAAkB;IAIxC,2CAA2C;IAC3C,OAAO,KAAK,aAAa,GAExB;IAED,+CAA+C;IAC/C,OAAO,KAAK,SAAS,GAMpB;IAED;;OAEG;IACH,OAAO,CAAC,cAAc;IAItB;;OAEG;IACH,OAAO,CAAC,YAAY;IAIpB,MAAM,CAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,GAAG,MAAM;IAyEzD;;OAEG;IACH,OAAO,CAAC,yBAAyB;IA8BjC;;OAEG;IACH,OAAO,CAAC,iBAAiB;IA4BzB;;OAEG;IACH,OAAO,CAAC,YAAY;IAmFpB;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAcjC,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,UAAU;IAiBlB,OAAO,CAAC,YAAY;IA4BpB,OAAO,CAAC,cAAc;IA2EtB,0CAA0C;IAC1C,iDAAiD;IACjD,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,oBAAoB;IA+B5B,+DAA+D;IAC/D,OAAO,CAAC,uBAAuB;IA6B/B,uEAAuE;IACvE,OAAO,CAAC,oBAAoB;IAgB5B;;OAEG;IACH,OAAO,CAAC,WAAW;IAgFnB,OAAO,CAAC,eAAe;IAmEvB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IA+EzB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAqCzB,OAAO,CAAC,UAAU;IA2ElB,+DAA+D;IAC/D,OAAO,CAAC,uBAAuB;IAsC/B,OAAO,CAAC,oBAAoB;IAO5B;;;;OAIG;IACH,OAAO,CAAC,wBAAwB;IAmFhC;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAiC5B,OAAO,CAAC,kBAAkB;IAW1B;;;;;;;OAOG;IACH,OAAO,CAAC,kBAAkB;IAkB1B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAsD5B;;OAEG;IACH,OAAO,CAAC,YAAY;IA+CpB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAW5B;;;OAGG;IACH,OAAO,CAAC,YAAY;IAyCpB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAcxB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAe1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAK3B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,CAalC;IAED;;OAEG;IACH,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,WAAW;IAsCnB,OAAO,CAAC,SAAS;IASjB;;OAEG;IACH,OAAO,CAAC,UAAU;CASnB;AAGD,MAAM,WAAW,aAAc,SAAQ,kBAAkB;CAAG;AAE5D;;GAEG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,CAGjG"}
+{"version":3,"file":"svg.d.ts","sourceRoot":"","sources":["../src/svg.ts"],"names":[],"mappings":"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"}

package/dist/svg.js

@@ -42,6 +42,8 @@ const DEFAULT_OPTIONS = {
     interactive: true,
     renderMode: 'static',
     dataAttributes: { device: true, link: true, metadata: true },
+    sheetId: '',
+    embeddedContent: new Map(),
 };
 // ============================================
 // SVG Renderer
@@ -65,6 +67,22 @@ export class SVGRenderer {
             metadata: this.options.dataAttributes?.metadata ?? true,
         };
     }
+    /** Get unique ID suffix for this sheet */
+    get idSuffix() {
+        return this.options.sheetId ? `-${this.options.sheetId}` : '';
+    }
+    /** Get shadow filter ID */
+    get shadowId() {
+        return `shadow${this.idSuffix}`;
+    }
+    /** Get arrow marker ID */
+    get arrowId() {
+        return `arrow${this.idSuffix}`;
+    }
+    /** Get red arrow marker ID */
+    get arrowRedId() {
+        return `arrow-red${this.idSuffix}`;
+    }
     /**
      * Get theme colors based on theme type
      */
@@ -242,9 +260,9 @@ export class SVGRenderer {
                 break;
         }
         // Render legend box
-        let svg = `<g class="legend" transform="translate(${legendX}, ${legendY})">
-  <rect x="0" y="0" width="${legendWidth}" height="${legendHeight}" rx="4"
-    fill="${this.themeColors.backgroundColor}" stroke="${this.themeColors.subgraphStroke}" stroke-width="1" opacity="0.95" />
+        let svg = `<g class="legend" transform="translate(${legendX}, ${legendY})">
+  <rect x="0" y="0" width="${legendWidth}" height="${legendHeight}" rx="4"
+    fill="${this.themeColors.backgroundColor}" stroke="${this.themeColors.subgraphStroke}" stroke-width="1" opacity="0.95" />
   <text x="${padding}" y="${padding + 12}" class="subgraph-label" font-size="11">Legend</text>`;
         // Render items
         for (const [index, item] of items.entries()) {
@@ -272,52 +290,52 @@ export class SVGRenderer {
         return `<g transform="translate(0, 0)">${lines.join('')}</g>`;
     }
     renderHeader(width, height, viewBox) {
-        return `<svg xmlns="http://www.w3.org/2000/svg"
-  viewBox="${viewBox}"
-  width="${width}"
-  height="${height}"
+        return `<svg xmlns="http://www.w3.org/2000/svg"
+  viewBox="${viewBox}"
+  width="${width}"
+  height="${height}"
   style="background: ${this.themeColors.backgroundColor}">`;
     }
     renderDefs() {
-        return `<defs>
-  <!-- Arrow marker -->
-  <marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-    <polygon points="0 0, 10 3.5, 0 7" fill="${this.themeColors.defaultLinkStroke}" />
-  </marker>
-  <marker id="arrow-red" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-    <polygon points="0 0, 10 3.5, 0 7" fill="#dc2626" />
-  </marker>
-
-  <!-- Filters -->
-  <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
-    <feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.15"/>
-  </filter>
+        return `<defs>
+  <!-- Arrow marker -->
+  <marker id="${this.arrowId}" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+    <polygon points="0 0, 10 3.5, 0 7" fill="${this.themeColors.defaultLinkStroke}" />
+  </marker>
+  <marker id="${this.arrowRedId}" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+    <polygon points="0 0, 10 3.5, 0 7" fill="#dc2626" />
+  </marker>
+
+  <!-- Filters -->
+  <filter id="${this.shadowId}" x="-20%" y="-20%" width="140%" height="140%">
+    <feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.15"/>
+  </filter>
 </defs>`;
     }
     renderStyles() {
         // CSS variables for interactive runtime theming
         const cssVars = this.isInteractive
-            ? `
-  :root {
-    --shumoku-bg: ${this.themeColors.backgroundColor};
-    --shumoku-surface: ${this.themeColors.subgraphFill};
-    --shumoku-text: ${this.themeColors.labelColor};
-    --shumoku-text-secondary: ${this.themeColors.labelSecondaryColor};
-    --shumoku-border: ${this.themeColors.subgraphStroke};
-    --shumoku-node-fill: ${this.themeColors.defaultNodeFill};
-    --shumoku-node-stroke: ${this.themeColors.defaultNodeStroke};
-    --shumoku-link-stroke: ${this.themeColors.defaultLinkStroke};
-    --shumoku-font: ${this.options.fontFamily};
+            ? `
+  :root {
+    --shumoku-bg: ${this.themeColors.backgroundColor};
+    --shumoku-surface: ${this.themeColors.subgraphFill};
+    --shumoku-text: ${this.themeColors.labelColor};
+    --shumoku-text-secondary: ${this.themeColors.labelSecondaryColor};
+    --shumoku-border: ${this.themeColors.subgraphStroke};
+    --shumoku-node-fill: ${this.themeColors.defaultNodeFill};
+    --shumoku-node-stroke: ${this.themeColors.defaultNodeStroke};
+    --shumoku-link-stroke: ${this.themeColors.defaultLinkStroke};
+    --shumoku-font: ${this.options.fontFamily};
   }`
             : '';
-        return `<style>${cssVars}
-  .node-label { font-family: ${this.options.fontFamily}; font-size: 12px; fill: ${this.themeColors.labelColor}; }
-  .node-label-bold { font-weight: bold; }
-  .node-icon { color: ${this.themeColors.labelSecondaryColor}; }
-  .subgraph-icon { opacity: 0.9; }
-  .subgraph-label { font-family: ${this.options.fontFamily}; font-size: 14px; font-weight: 600; fill: ${this.themeColors.subgraphLabelColor}; }
-  .link-label { font-family: ${this.options.fontFamily}; font-size: 11px; fill: ${this.themeColors.labelSecondaryColor}; }
-  .endpoint-label { font-family: ${this.options.fontFamily}; font-size: 9px; fill: ${this.themeColors.labelColor}; }
+        return `<style>${cssVars}
+  .node-label { font-family: ${this.options.fontFamily}; font-size: 12px; fill: ${this.themeColors.labelColor}; }
+  .node-label-bold { font-weight: bold; }
+  .node-icon { color: ${this.themeColors.labelSecondaryColor}; }
+  .subgraph-icon { opacity: 0.9; }
+  .subgraph-label { font-family: ${this.options.fontFamily}; font-size: 14px; font-weight: 600; fill: ${this.themeColors.subgraphLabelColor}; }
+  .link-label { font-family: ${this.options.fontFamily}; font-size: 11px; fill: ${this.themeColors.labelSecondaryColor}; }
+  .endpoint-label { font-family: ${this.options.fontFamily}; font-size: 9px; fill: ${this.themeColors.labelColor}; }
 </style>`;
     }
     renderSubgraph(sg) {
@@ -360,30 +378,92 @@ export class SVGRenderer {
                         const vbHeight = Number.parseInt(viewBoxMatch[2], 10);
                         const aspectRatio = vbWidth / vbHeight;
                         const iconWidth = Math.round(iconSize * aspectRatio);
-                        iconSvg = `<g class="subgraph-icon" transform="translate(${iconX}, ${iconY})">
-    <svg width="${iconWidth}" height="${iconSize}" viewBox="0 0 ${vbWidth} ${vbHeight}">
-      ${iconContent.replace(/<svg[^>]*>/, '').replace(/<\/svg>$/, '')}
-    </svg>
+                        iconSvg = `<g class="subgraph-icon" transform="translate(${iconX}, ${iconY})">
+    <svg width="${iconWidth}" height="${iconSize}" viewBox="0 0 ${vbWidth} ${vbHeight}">
+      ${iconContent.replace(/<svg[^>]*>/, '').replace(/<\/svg>$/, '')}
+    </svg>
   </g>`;
                     }
                 }
                 else {
                     // Use viewBox from entry
-                    iconSvg = `<g class="subgraph-icon" transform="translate(${iconX}, ${iconY})">
-    <svg width="${iconSize}" height="${iconSize}" viewBox="${viewBox}">
-      ${iconContent}
-    </svg>
+                    iconSvg = `<g class="subgraph-icon" transform="translate(${iconX}, ${iconY})">
+    <svg width="${iconSize}" height="${iconSize}" viewBox="${viewBox}">
+      ${iconContent}
+    </svg>
   </g>`;
                 }
             }
         }
-        return `<g class="subgraph" data-id="${sg.id}">
-  <rect x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}"
-    rx="${rx}" ry="${rx}"
-    fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}"
-    ${strokeDasharray ? `stroke-dasharray="${strokeDasharray}"` : ''} />
-  ${iconSvg}
-  <text x="${labelX}" y="${labelY}" class="subgraph-label" text-anchor="${textAnchor}">${this.escapeXml(subgraph.label)}</text>
+        // Hierarchical navigation attributes
+        const hasSheet = subgraph.file || (subgraph.pins && subgraph.pins.length > 0);
+        const sheetAttrs = hasSheet ? ` data-has-sheet="true" data-sheet-id="${sg.id}"` : '';
+        // Check for embedded content
+        const embeddedContent = this.options.embeddedContent?.get(sg.id);
+        let embeddedSvg = '';
+        if (embeddedContent) {
+            // Calculate content area (below label, with padding)
+            const labelHeight = 30; // Space for label
+            const padding = 10;
+            const contentX = bounds.x + padding;
+            const contentY = bounds.y + labelHeight;
+            const contentWidth = bounds.width - padding * 2;
+            const contentHeight = bounds.height - labelHeight - padding;
+            // Embed child SVG with viewBox for automatic scaling
+            embeddedSvg = `
+  <svg x="${contentX}" y="${contentY}" width="${contentWidth}" height="${contentHeight}"
+    viewBox="${embeddedContent.viewBox}" preserveAspectRatio="xMidYMid meet">
+    ${embeddedContent.svgContent}
+  </svg>`;
+        }
+        // Render boundary ports for hierarchical connections
+        let portsSvg = '';
+        if (sg.ports && sg.ports.size > 0) {
+            const portParts = [];
+            const centerX = bounds.x + bounds.width / 2;
+            const centerY = bounds.y + bounds.height / 2;
+            for (const port of sg.ports.values()) {
+                const px = centerX + port.position.x;
+                const py = centerY + port.position.y;
+                const pw = port.size.width;
+                const ph = port.size.height;
+                // Port circle/diamond on boundary
+                portParts.push(`<circle class="subgraph-port" cx="${px}" cy="${py}" r="${Math.max(pw, ph) / 2 + 2}"
+          fill="#3b82f6" stroke="#1d4ed8" stroke-width="2" />`);
+                // Port label
+                let labelX = px;
+                let labelY = py;
+                let anchor = 'middle';
+                const labelOffset = 16;
+                switch (port.side) {
+                    case 'top':
+                        labelY = py - labelOffset;
+                        break;
+                    case 'bottom':
+                        labelY = py + labelOffset + 4;
+                        break;
+                    case 'left':
+                        labelX = px - labelOffset;
+                        anchor = 'end';
+                        break;
+                    case 'right':
+                        labelX = px + labelOffset;
+                        anchor = 'start';
+                        break;
+                }
+                portParts.push(`<text x="${labelX}" y="${labelY}" class="port-label" text-anchor="${anchor}"
+          fill="#3b82f6" font-size="10" font-weight="500">${this.escapeXml(port.label)}</text>`);
+            }
+            portsSvg = portParts.join('\n  ');
+        }
+        return `<g class="subgraph" data-id="${sg.id}"${sheetAttrs}>
+  <rect x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}"
+    rx="${rx}" ry="${rx}"
+    fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}"
+    ${strokeDasharray ? `stroke-dasharray="${strokeDasharray}"` : ''} />
+  ${iconSvg}
+  <text x="${labelX}" y="${labelY}" class="subgraph-label" text-anchor="${textAnchor}">${this.escapeXml(subgraph.label)}</text>${embeddedSvg}
+  ${portsSvg}
 </g>`;
     }
     /** Render node background (shape only) */
@@ -393,9 +473,9 @@ export class SVGRenderer {
         const dataAttrs = this.buildNodeDataAttributes(node);
         const bg = this.renderNodeBackground(layoutNode);
         const fg = this.renderNodeForeground(layoutNode);
-        return `<g class="node" data-id="${id}"${dataAttrs}>
-${bg}
-${fg}
+        return `<g class="node" data-id="${id}"${dataAttrs}>
+${bg}
+${fg}
 </g>`;
     }
     renderNodeBackground(layoutNode) {
@@ -405,8 +485,15 @@ ${fg}
         const w = size.width;
         const h = size.height;
         const style = node.style || {};
-        const fill = style.fill || this.themeColors.defaultNodeFill;
-        const stroke = style.stroke || this.themeColors.defaultNodeStroke;
+        // Check if this is an export connector node (for hierarchical diagrams)
+        const isExport = node.metadata?._isExport === true;
+        // Special styling for export connector nodes - use subgraph colors
+        let fill = style.fill || this.themeColors.defaultNodeFill;
+        let stroke = style.stroke || this.themeColors.defaultNodeStroke;
+        if (isExport) {
+            fill = style.fill || this.themeColors.subgraphFill;
+            stroke = style.stroke || this.themeColors.defaultNodeStroke;
+        }
         const strokeWidth = style.strokeWidth || 1;
         const strokeDasharray = style.strokeDasharray || '';
         const shape = this.renderNodeShape(node.shape, x, y, w, h, fill, stroke, strokeWidth, strokeDasharray);
@@ -454,8 +541,8 @@ ${fg}
         const content = this.renderNodeContent(node, x, y, w);
         // Include data attributes for interactive mode (same as node-bg)
         const dataAttrs = this.buildNodeDataAttributes(node);
-        return `<g class="node-fg" data-id="${id}"${dataAttrs}>
-  ${content}
+        return `<g class="node-fg" data-id="${id}"${dataAttrs}>
+  ${content}
 </g>`;
     }
     /**
@@ -474,8 +561,8 @@ ${fg}
             const portDeviceAttr = this.isInteractive ? ` data-port-device="${nodeId}"` : '';
             const parts = [];
             // Port box
-            parts.push(`<rect class="port-box"
-        x="${px - pw / 2}" y="${py - ph / 2}" width="${pw}" height="${ph}"
+            parts.push(`<rect class="port-box"
+        x="${px - pw / 2}" y="${py - ph / 2}" width="${pw}" height="${ph}"
         fill="${this.themeColors.portFill}" stroke="${this.themeColors.portStroke}" stroke-width="1" rx="2" />`);
             // Port label - position based on side
             let labelX = px;
@@ -515,8 +602,8 @@ ${fg}
             parts.push(`<rect class="port-label-bg" x="${bgX}" y="${bgY}" width="${labelWidth}" height="${labelHeight}" rx="2" fill="${this.themeColors.portLabelBg}" />`);
             parts.push(`<text class="port-label" x="${labelX}" y="${labelY}" text-anchor="${textAnchor}" font-size="9" fill="${this.themeColors.portLabelColor}">${labelText}</text>`);
             // Wrap in a group with data attributes
-            groups.push(`<g class="port" data-port="${port.id}"${portDeviceAttr}>
-  ${parts.join('\n  ')}
+            groups.push(`<g class="port" data-port="${port.id}"${portDeviceAttr}>
+  ${parts.join('\n  ')}
 </g>`);
         }
         return groups.join('\n');
@@ -527,45 +614,45 @@ ${fg}
         const halfH = h / 2;
         switch (shape) {
             case 'rect':
-                return `<rect x="${x - halfW}" y="${y - halfH}" width="${w}" height="${h}"
-          fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#shadow)" />`;
+                return `<rect x="${x - halfW}" y="${y - halfH}" width="${w}" height="${h}"
+          fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#${this.shadowId})" />`;
             case 'rounded':
-                return `<rect x="${x - halfW}" y="${y - halfH}" width="${w}" height="${h}" rx="8" ry="8"
-          fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#shadow)" />`;
+                return `<rect x="${x - halfW}" y="${y - halfH}" width="${w}" height="${h}" rx="8" ry="8"
+          fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#${this.shadowId})" />`;
             case 'circle': {
                 const r = Math.min(halfW, halfH);
-                return `<circle cx="${x}" cy="${y}" r="${r}"
-          fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#shadow)" />`;
+                return `<circle cx="${x}" cy="${y}" r="${r}"
+          fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#${this.shadowId})" />`;
             }
             case 'diamond':
-                return `<polygon points="${x},${y - halfH} ${x + halfW},${y} ${x},${y + halfH} ${x - halfW},${y}"
-          fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#shadow)" />`;
+                return `<polygon points="${x},${y - halfH} ${x + halfW},${y} ${x},${y + halfH} ${x - halfW},${y}"
+          fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#${this.shadowId})" />`;
             case 'hexagon': {
                 const hx = halfW * 0.866;
-                return `<polygon points="${x - halfW},${y} ${x - hx},${y - halfH} ${x + hx},${y - halfH} ${x + halfW},${y} ${x + hx},${y + halfH} ${x - hx},${y + halfH}"
-          fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#shadow)" />`;
+                return `<polygon points="${x - halfW},${y} ${x - hx},${y - halfH} ${x + hx},${y - halfH} ${x + halfW},${y} ${x + hx},${y + halfH} ${x - hx},${y + halfH}"
+          fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#${this.shadowId})" />`;
             }
             case 'cylinder': {
                 const ellipseH = h * 0.15;
-                return `<g>
-          <ellipse cx="${x}" cy="${y + halfH - ellipseH}" rx="${halfW}" ry="${ellipseH}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} />
-          <rect x="${x - halfW}" y="${y - halfH + ellipseH}" width="${w}" height="${h - ellipseH * 2}" fill="${fill}" stroke="none" />
-          <line x1="${x - halfW}" y1="${y - halfH + ellipseH}" x2="${x - halfW}" y2="${y + halfH - ellipseH}" stroke="${stroke}" stroke-width="${strokeWidth}" />
-          <line x1="${x + halfW}" y1="${y - halfH + ellipseH}" x2="${x + halfW}" y2="${y + halfH - ellipseH}" stroke="${stroke}" stroke-width="${strokeWidth}" />
-          <ellipse cx="${x}" cy="${y - halfH + ellipseH}" rx="${halfW}" ry="${ellipseH}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#shadow)" />
+                return `<g>
+          <ellipse cx="${x}" cy="${y + halfH - ellipseH}" rx="${halfW}" ry="${ellipseH}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} />
+          <rect x="${x - halfW}" y="${y - halfH + ellipseH}" width="${w}" height="${h - ellipseH * 2}" fill="${fill}" stroke="none" />
+          <line x1="${x - halfW}" y1="${y - halfH + ellipseH}" x2="${x - halfW}" y2="${y + halfH - ellipseH}" stroke="${stroke}" stroke-width="${strokeWidth}" />
+          <line x1="${x + halfW}" y1="${y - halfH + ellipseH}" x2="${x + halfW}" y2="${y + halfH - ellipseH}" stroke="${stroke}" stroke-width="${strokeWidth}" />
+          <ellipse cx="${x}" cy="${y - halfH + ellipseH}" rx="${halfW}" ry="${ellipseH}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#${this.shadowId})" />
         </g>`;
             }
             case 'stadium':
-                return `<rect x="${x - halfW}" y="${y - halfH}" width="${w}" height="${h}" rx="${halfH}" ry="${halfH}"
-          fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#shadow)" />`;
+                return `<rect x="${x - halfW}" y="${y - halfH}" width="${w}" height="${h}" rx="${halfH}" ry="${halfH}"
+          fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#${this.shadowId})" />`;
             case 'trapezoid': {
                 const indent = w * 0.15;
-                return `<polygon points="${x - halfW + indent},${y - halfH} ${x + halfW - indent},${y - halfH} ${x + halfW},${y + halfH} ${x - halfW},${y + halfH}"
-          fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#shadow)" />`;
+                return `<polygon points="${x - halfW + indent},${y - halfH} ${x + halfW - indent},${y - halfH} ${x + halfW},${y + halfH} ${x - halfW},${y + halfH}"
+          fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#${this.shadowId})" />`;
             }
             default:
-                return `<rect x="${x - halfW}" y="${y - halfH}" width="${w}" height="${h}" rx="4" ry="4"
-          fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#shadow)" />`;
+                return `<rect x="${x - halfW}" y="${y - halfH}" width="${w}" height="${h}" rx="4" ry="4"
+          fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#${this.shadowId})" />`;
         }
     }
     /**
@@ -644,6 +731,12 @@ ${fg}
      * Render node content (icon + label) with dynamic vertical centering
      */
     renderNodeContent(node, x, y, w) {
+        // Check if this is an export connector node
+        const isExport = node.metadata?._isExport === true;
+        // For export connectors, render with arrow icon
+        if (isExport) {
+            return this.renderExportConnectorContent(node, x, y);
+        }
         const iconInfo = this.calculateIconInfo(node, w);
         const labels = Array.isArray(node.label) ? node.label : [node.label];
         const labelHeight = labels.length * LABEL_LINE_HEIGHT;
@@ -657,8 +750,8 @@ ${fg}
         // Render icon at top of content block
         if (iconInfo) {
             const iconY = contentTop;
-            parts.push(`<g class="node-icon" transform="translate(${x - iconInfo.width / 2}, ${iconY})">
-      ${iconInfo.svg}
+            parts.push(`<g class="node-icon" transform="translate(${x - iconInfo.width / 2}, ${iconY})">
+      ${iconInfo.svg}
     </g>`);
         }
         // Render labels below icon
@@ -671,6 +764,13 @@ ${fg}
         }
         return parts.join('\n  ');
     }
+    /** Render content for export connector nodes */
+    renderExportConnectorContent(node, x, y) {
+        const labels = Array.isArray(node.label) ? node.label : [node.label];
+        const labelText = labels[0] || '';
+        // Just render the label (subgraph name), no arrows
+        return `<text x="${x}" y="${y + 4}" class="node-label" text-anchor="middle">${this.escapeXml(labelText)}</text>`;
+    }
     renderLink(layoutLink, nodes) {
         const { id, points, link, fromEndpoint, toEndpoint } = layoutLink;
         const label = link.label;
@@ -679,7 +779,7 @@ ${fg}
         const arrow = link.arrow ?? this.getDefaultArrowType(link.redundancy);
         const stroke = link.style?.stroke || this.getVlanStroke(link.vlan) || this.themeColors.defaultLinkStroke;
         const dasharray = link.style?.strokeDasharray || this.getLinkDasharray(type);
-        const markerEnd = arrow !== 'none' ? 'url(#arrow)' : '';
+        const markerEnd = arrow !== 'none' ? `url(#${this.arrowId})` : '';
         // Get bandwidth rendering config
         const bandwidthConfig = this.getBandwidthConfig(link.bandwidth);
         const strokeWidth = link.style?.strokeWidth || bandwidthConfig.strokeWidth || this.getLinkStrokeWidth(type);
@@ -751,6 +851,7 @@ ${fg}
                 vlan: link.vlan,
                 redundancy: link.redundancy,
                 label: link.label,
+                metadata: link.metadata,
             };
             attrs.push(`data-link-json="${this.escapeXml(JSON.stringify(linkInfo))}"`);
         }
@@ -909,14 +1010,14 @@ ${fg}
         const basePath = this.generatePath(points);
         if (lineCount === 1) {
             // Single line
-            let linePath = `<path class="link" data-id="${id}" d="${basePath}"
-  fill="none" stroke="${stroke}" stroke-width="${strokeWidth}"
-  ${dasharray ? `stroke-dasharray="${dasharray}"` : ''}
+            let linePath = `<path class="link" data-id="${id}" d="${basePath}"
+  fill="none" stroke="${stroke}" stroke-width="${strokeWidth}"
+  ${dasharray ? `stroke-dasharray="${dasharray}"` : ''}
   ${markerEnd ? `marker-end="${markerEnd}"` : ''} pointer-events="none" />`;
             // Double line effect for redundancy types
             if (type === 'double') {
-                linePath = `<path class="link-double-outer" d="${basePath}" fill="none" stroke="${stroke}" stroke-width="${strokeWidth + 2}" pointer-events="none" />
-<path class="link-double-inner" d="${basePath}" fill="none" stroke="white" stroke-width="${strokeWidth - 1}" pointer-events="none" />
+                linePath = `<path class="link-double-outer" d="${basePath}" fill="none" stroke="${stroke}" stroke-width="${strokeWidth + 2}" pointer-events="none" />
+<path class="link-double-inner" d="${basePath}" fill="none" stroke="white" stroke-width="${strokeWidth - 1}" pointer-events="none" />
 ${linePath}`;
             }
             lines.push(linePath);
@@ -927,18 +1028,18 @@ ${linePath}`;
             for (const offset of offsets) {
                 const offsetPoints = this.offsetPoints(points, offset);
                 const path = this.generatePath(offsetPoints);
-                lines.push(`<path class="link" data-id="${id}" d="${path}"
-  fill="none" stroke="${stroke}" stroke-width="${strokeWidth}"
+                lines.push(`<path class="link" data-id="${id}" d="${path}"
+  fill="none" stroke="${stroke}" stroke-width="${strokeWidth}"
   ${dasharray ? `stroke-dasharray="${dasharray}"` : ''} pointer-events="none" />`);
             }
         }
         // Calculate hit area width (same as actual lines, hidden underneath)
         const hitWidth = lineCount === 1 ? strokeWidth : (lineCount - 1) * lineSpacing + strokeWidth;
         // Wrap all lines in a group with transparent hit area on top
-        return `<g class="link-lines">
-${lines.join('\n')}
-<path class="link-hit-area" d="${basePath}"
-  fill="none" stroke="${stroke}" stroke-width="${hitWidth}" opacity="0" />
+        return `<g class="link-lines">
+${lines.join('\n')}
+<path class="link-hit-area" d="${basePath}"
+  fill="none" stroke="${stroke}" stroke-width="${hitWidth}" opacity="0" />
 </g>`;
     }
     /**