sfn-diagram 0.4.1 → 0.5.1

package/README.md

@@ -2,9 +2,12 @@
 
 [![npm version](https://img.shields.io/npm/v/sfn-diagram.svg)](https://www.npmjs.com/package/sfn-diagram)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Live Playground](https://img.shields.io/badge/playground-live-brightgreen)](https://yusufaf.github.io/sfn-diagram/)
 
 Generate beautiful, interactive diagrams from AWS Step Functions ASL (Amazon States Language) definitions. Supports dual output formats: D3.js-based SVG and Mermaid.js diagram code, plus PNG export.
 
+**▶ [Try it in the live playground](https://yusufaf.github.io/sfn-diagram/)** — paste any ASL definition and preview the diagram instantly, no install required.
+
 ## Features
 
 - **Multiple Output Formats**: SVG (D3.js), Mermaid syntax, and PNG
@@ -15,6 +18,7 @@ Generate beautiful, interactive diagrams from AWS Step Functions ASL (Amazon Sta
 - **Type-Safe**: Full TypeScript support with comprehensive type definitions
 - **AWS SDK Integration**: Direct integration with AWS Step Functions API
 - **Dual APIs**: Function-based and class-based interfaces
+- **Runs Anywhere**: SVG and Mermaid generation has zero platform dependencies — works in Node, the browser, and edge runtimes
 
 ## Installation
 
@@ -22,6 +26,24 @@ Generate beautiful, interactive diagrams from AWS Step Functions ASL (Amazon Sta
 npm install sfn-diagram
 ```
 
+## Runtime Support
+
+The core entry (`sfn-diagram`) builds SVG with a DOM-free string renderer, so
+`generateSvg`, `generateMermaid`, `generateDiagram`, and `generateFromAwsResponse`
+run in **Node, browsers, and edge runtimes** (Cloudflare Workers, Vercel Edge, Deno, Bun)
+with no DOM polyfill.
+
+PNG export (`sfn-diagram/png`) and the CLI are **Node-only** — they rely on a headless
+browser (`node-html-to-image`) and Node's filesystem respectively.
+
+```ts
+// Works in Node, browser, and edge:
+import { generateSvg } from 'sfn-diagram';
+
+// Node-only:
+import { exportPng } from 'sfn-diagram/png';
+```
+
 ## Command-line Usage
 
 The package ships a CLI for use without writing any JavaScript:
@@ -82,15 +104,15 @@ console.log(`Generated ${width}x${height} diagram`);
 ```typescript
 import { SfnDiagramGenerator } from 'sfn-diagram';
 
-const generator = new SfnDiagramGenerator()
-  .setAsl(asl)
-  .setTheme('dark')
-  .setLayout('TB')
-  .setNodeDimensions({ width: 150, height: 80 });
+const generator = new SfnDiagramGenerator({
+  theme: 'dark',
+  layout: 'TB',
+  nodeWidth: 150,
+  nodeHeight: 80,
+});
 
-const { svg } = generator.generateSvg();
-const { mermaid } = generator.generateMermaid();
-const { png } = await generator.exportPng();
+const { svg } = generator.generateSvg({ aslDefinition: asl });
+const { code } = generator.generateMermaid({ aslDefinition: asl });
 ```
 
 ## API Reference
@@ -117,7 +139,7 @@ const result = generateSvg({
   customColors: {}                 // Override colors for specific states
 });
 
-// Returns: { svg: string, width: number, height: number, nodeCount: number }
+// Returns SvgOutput: { svg: string, width: number, height: number, metadata: { edgeCount: number, nodeCount: number } }
 ```
 
 ### generateMermaid(params)
@@ -132,40 +154,43 @@ const result = generateMermaid({
   includeComments: true
 });
 
-// Returns: { mermaid: string, nodeCount: number, edgeCount: number }
+// Returns MermaidOutput: { code: string, metadata: { edgeCount: number, stateCount: number } }
 ```
 
 ### generateDiagram(params)
 
-Generate both SVG and Mermaid output simultaneously.
+Generate a diagram, choosing the output format via the `format` option (defaults to `'svg'`).
 
 ```typescript
 import { generateDiagram } from 'sfn-diagram';
 
-const result = generateDiagram({
+const svgResult = generateDiagram({
   aslDefinition: asl,
   theme: 'dark'
-});
+});                                // Returns SvgOutput
 
-// Returns: { svg: SvgOutput, mermaid: MermaidOutput }
+const mermaidResult = generateDiagram({
+  aslDefinition: asl,
+  format: 'mermaid'
+});                                // Returns MermaidOutput
 ```
 
 ### exportPng(params)
 
-Export diagram as PNG image.
+Export diagram as PNG image. Node-only — imported from the `sfn-diagram/png` subpath.
 
 ```typescript
-import { exportPng } from 'sfn-diagram';
+import { exportPng } from 'sfn-diagram/png';
 
 const result = await exportPng({
   aslDefinition: asl,
   theme: 'light',
-  quality: 1.0,
-  transparent: false
+  pngQuality: 90,               // 1–100 (default 90)
+  backgroundColor: 'transparent'
 });
 
-// Returns: { png: Buffer, width: number, height: number }
-writeFileSync('diagram.png', result.png);
+// Returns PngOutput: { buffer: Buffer, width: number, height: number, metadata: { format: 'png' } }
+writeFileSync('diagram.png', result.buffer);
 ```
 
 ### generateFromAwsResponse(params)
@@ -184,33 +209,39 @@ const response = await client.send(
 );
 
 const { svg } = generateFromAwsResponse({
-  awsResponse: response,
+  response,
   theme: 'dark'
 });
 ```
 
 ### SfnDiagramGenerator Class
 
-Fluent interface for generating diagrams.
+Reusable generator that holds diagram options once and applies them to every call. Configure options via the constructor or the fluent `setOptions()` method; pass the `aslDefinition` per generation.
 
 ```typescript
 import { SfnDiagramGenerator } from 'sfn-diagram';
 
-const generator = new SfnDiagramGenerator()
-  .setAsl(asl)
-  .setTheme('dark')
-  .setLayout('LR')
-  .setNodeDimensions({ width: 150, height: 80 })
-  .setSpacing({ rankSeparation: 60, nodeSeparation: 60 })
-  .setEdgeStyle('curved')
-  .setPadding(30);
-
-// Generate outputs
-const svgResult = generator.generateSvg();
-const mermaidResult = generator.generateMermaid();
-const pngResult = await generator.exportPng({ quality: 1.0 });
+const generator = new SfnDiagramGenerator({
+  theme: 'dark',
+  layout: 'LR',
+  nodeWidth: 150,
+  nodeHeight: 80,
+  rankSeparation: 60,
+  nodeSeparation: 60,
+  edgeStyle: 'curved',
+  padding: 30,
+});
+
+// Update options later (chainable)
+generator.setOptions({ theme: 'light' });
+
+// Generate outputs (aslDefinition passed per call)
+const svgResult = generator.generateSvg({ aslDefinition: asl });
+const mermaidResult = generator.generateMermaid({ aslDefinition: asl });
 ```
 
+> PNG export is a standalone function from `sfn-diagram/png` (`exportPng`), not a method on this class.
+
 ## Configuration Options
 
 ### Themes
@@ -434,21 +465,23 @@ const { svg } = generateSvg({ aslDefinition: parallelAsl });
 ### Export Multiple Formats
 
 ```typescript
-import { generateDiagram, exportPng } from 'sfn-diagram';
+import { generateSvg, generateMermaid } from 'sfn-diagram';
+import { exportPng } from 'sfn-diagram/png';
 import { writeFileSync } from 'fs';
 
 // Generate SVG and Mermaid
-const { svg, mermaid } = generateDiagram({ aslDefinition: asl });
-writeFileSync('diagram.svg', svg.svg);
-writeFileSync('diagram.mmd', mermaid.mermaid);
+const { svg } = generateSvg({ aslDefinition: asl });
+const { code } = generateMermaid({ aslDefinition: asl });
+writeFileSync('diagram.svg', svg);
+writeFileSync('diagram.mmd', code);
 
-// Generate PNG
-const { png } = await exportPng({
+// Generate PNG (Node-only)
+const { buffer } = await exportPng({
   aslDefinition: asl,
-  quality: 1.0,
-  transparent: false
+  pngQuality: 90,
+  backgroundColor: 'transparent'
 });
-writeFileSync('diagram.png', png);
+writeFileSync('diagram.png', buffer);
 ```
 
 ## TypeScript Support
@@ -461,10 +494,62 @@ import type {
   DiagramOptions,
   SvgOutput,
   MermaidOutput,
-  PngOutput,
   CustomTheme,
   StateType
 } from 'sfn-diagram';
+
+// PNG types live on the Node-only subpath
+import type { PngOutput, ExportPngParams } from 'sfn-diagram/png';
+```
+
+## Ecosystem
+
+### Playground
+
+An interactive browser-based editor for exploring ASL definitions and previewing diagrams in real time. **[Open the live playground →](https://yusufaf.github.io/sfn-diagram/)** or run it locally from the [`playground/`](playground/) directory.
+
+```bash
+cd playground
+pnpm install
+pnpm dev
+```
+
+Paste any ASL JSON, switch themes, and see the SVG diagram update instantly — no install required beyond the dev server.
+
+### VS Code Extension
+
+Preview Step Functions diagrams directly inside VS Code. Located in [`packages/vscode-sfn-diagram/`](packages/vscode-sfn-diagram/).
+
+**Install from source:**
+```bash
+cd packages/vscode-sfn-diagram
+pnpm install
+pnpm package          # produces vscode-sfn-diagram-*.vsix
+code --install-extension vscode-sfn-diagram-*.vsix
+```
+
+**Usage:** Open any `.json` or `.asl` file and run **Step Functions: Preview Step Functions Diagram** from the command palette, or click the diagram icon in the editor title bar.
+
+### GitHub Action
+
+Post SVG diff previews and Mermaid diagrams as PR comments whenever ASL files change. Located in [`packages/github-action-sfn-diagram/`](packages/github-action-sfn-diagram/).
+
+```yaml
+# .github/workflows/sfn-preview.yml
+name: Step Functions Preview
+on:
+  pull_request:
+    paths: ['**/*.asl.json']
+
+jobs:
+  preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with: { fetch-depth: 0 }
+      - uses: ./packages/github-action-sfn-diagram
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
 ```
 
 ## Contributing

package/dist/cli.js

@@ -1,10 +1,9 @@
 #!/usr/bin/env node
 import { readFileSync, writeFileSync } from "node:fs";
 import { resolve } from "node:path";
+import { pathToFileURL } from "node:url";
 import dagre from "@dagrejs/dagre";
-import { select } from "d3-selection";
 import { curveBasis, line } from "d3-shape";
-import { JSDOM } from "jsdom";
 import nodeHtmlToImage from "node-html-to-image";
 //#region src/config/themes.ts
 /**
@@ -479,6 +478,7 @@ function parseAsl(params) {
 	validateAsl({ definition });
 	extractStatesRecursively({
 		definition,
+		nodeIndex: /* @__PURE__ */ new Map(),
 		nodes,
 		options
 	});
@@ -586,7 +586,7 @@ function extractConditionLabel(choice) {
 * Recursively extract all states including those nested in Parallel branches and Map iterators
 */
 function extractStatesRecursively(params) {
-	const { definition, nodes, options } = params;
+	const { definition, nodeIndex, nodes, options } = params;
 	for (const [stateName, state] of Object.entries(definition.States)) {
 		const stateNode = createStateNode({
 			name: stateName,
@@ -595,13 +595,15 @@ function extractStatesRecursively(params) {
 			stylePreset: options?.stylePreset
 		});
 		nodes.push(stateNode);
+		nodeIndex.set(stateNode.id, stateNode);
 		if (state.Type === "Parallel" && state.Branches) state.Branches.forEach((branch, index) => {
 			extractStatesRecursively({
 				definition: branch,
+				nodeIndex,
 				nodes,
 				options
 			});
-			if (nodes.find((node) => node.id === branch.StartAt)) stateNode.children?.push(branch.StartAt);
+			if (nodeIndex.get(branch.StartAt)) stateNode.children?.push(branch.StartAt);
 			const endNodeId = `${stateName}__branch${index}__end`;
 			const endNode = {
 				id: endNodeId,
@@ -616,21 +618,23 @@ function extractStatesRecursively(params) {
 				type: "BranchEnd"
 			};
 			nodes.push(endNode);
+			nodeIndex.set(endNodeId, endNode);
 			stateNode.children?.push(endNodeId);
 			markBranchStatesAsChildren({
 				branch,
 				containerNode: stateNode,
-				nodes
+				nodeIndex
 			});
 		});
 		if (state.Type === "Map" && state.Iterator) {
 			const iterator = state.Iterator;
 			extractStatesRecursively({
 				definition: iterator,
+				nodeIndex,
 				nodes,
 				options
 			});
-			if (nodes.find((node) => node.id === iterator.StartAt)) stateNode.children?.push(iterator.StartAt);
+			if (nodeIndex.get(iterator.StartAt)) stateNode.children?.push(iterator.StartAt);
 			const endNodeId = `${stateName}__iterator__end`;
 			const endNode = {
 				id: endNodeId,
@@ -645,11 +649,12 @@ function extractStatesRecursively(params) {
 				type: "IteratorEnd"
 			};
 			nodes.push(endNode);
+			nodeIndex.set(endNodeId, endNode);
 			stateNode.children?.push(endNodeId);
 			markBranchStatesAsChildren({
 				branch: iterator,
 				containerNode: stateNode,
-				nodes
+				nodeIndex
 			});
 		}
 	}
@@ -658,8 +663,14 @@ function extractStatesRecursively(params) {
 * Mark all states in a branch as children of the container for bounding box calculation
 */
 function markBranchStatesAsChildren(params) {
-	const { branch, containerNode, nodes } = params;
-	for (const stateName of Object.keys(branch.States)) if (nodes.find((n) => n.id === stateName) && !containerNode.children?.includes(stateName)) containerNode.children?.push(stateName);
+	const { branch, containerNode, nodeIndex } = params;
+	const children = containerNode.children;
+	if (!children) return;
+	const existingChildren = new Set(children);
+	for (const stateName of Object.keys(branch.States)) if (nodeIndex.has(stateName) && !existingChildren.has(stateName)) {
+		children.push(stateName);
+		existingChildren.add(stateName);
+	}
 }
 /**
 * Extract edges from nested state machines (Parallel branches and Map iterators)
@@ -797,17 +808,19 @@ var DagreLayout = class {
 				y: dagNode.y
 			};
 		});
+		const positionedNodeIndex = new Map(positionedNodes.map((node) => [node.id, node]));
 		const containerNodes = this.calculateContainerBounds({
 			containers: nodes.filter((node) => node.isContainer),
-			positionedNodes
+			positionedNodeIndex
 		});
 		const allPositionedNodes = [...positionedNodes, ...containerNodes];
+		const positionedNodesById = new Map(allPositionedNodes.map((node) => [node.id, node]));
 		const routedEdges = edges.map((edge) => {
 			if (edge.visualOnly) return {
 				...edge,
 				points: this.calculateVisualEdgePoints({
 					edge,
-					positionedNodes: allPositionedNodes
+					positionedNodesById
 				})
 			};
 			const dagEdge = graph.edge(edge.from, edge.to);
@@ -830,9 +843,13 @@ var DagreLayout = class {
 	* Calculate bounding boxes for container nodes based on their children positions
 	*/
 	calculateContainerBounds(params) {
-		const { containers, positionedNodes } = params;
+		const { containers, positionedNodeIndex } = params;
 		return containers.map((container) => {
-			const children = positionedNodes.filter((node) => container.children?.includes(node.id) && node.type !== "BranchEnd" && node.type !== "IteratorEnd");
+			const children = [];
+			for (const childId of container.children || []) {
+				const child = positionedNodeIndex.get(childId);
+				if (child && child.type !== "BranchEnd" && child.type !== "IteratorEnd") children.push(child);
+			}
 			if (children.length === 0) return {
 				...container,
 				height: 200,
@@ -842,10 +859,20 @@ var DagreLayout = class {
 			};
 			const padding = 40;
 			const headerHeight = 50;
-			const minX = Math.min(...children.map((child) => (child.x || 0) - (child.width || 0) / 2));
-			const maxX = Math.max(...children.map((child) => (child.x || 0) + (child.width || 0) / 2));
-			const minY = Math.min(...children.map((child) => (child.y || 0) - (child.height || 0) / 2));
-			const maxY = Math.max(...children.map((child) => (child.y || 0) + (child.height || 0) / 2));
+			let minX = Infinity;
+			let maxX = -Infinity;
+			let minY = Infinity;
+			let maxY = -Infinity;
+			for (const child of children) {
+				const halfWidth = (child.width || 0) / 2;
+				const halfHeight = (child.height || 0) / 2;
+				const childX = child.x || 0;
+				const childY = child.y || 0;
+				minX = Math.min(minX, childX - halfWidth);
+				maxX = Math.max(maxX, childX + halfWidth);
+				minY = Math.min(minY, childY - halfHeight);
+				maxY = Math.max(maxY, childY + halfHeight);
+			}
 			const width = maxX - minX + padding * 2;
 			const height = maxY - minY + padding * 2 + headerHeight;
 			const x = (minX + maxX) / 2;
@@ -863,9 +890,9 @@ var DagreLayout = class {
 	* Calculate routing points for visual-only edges
 	*/
 	calculateVisualEdgePoints(params) {
-		const { edge, positionedNodes } = params;
-		const fromNode = positionedNodes.find((node) => node.id === edge.from);
-		const toNode = positionedNodes.find((node) => node.id === edge.to);
+		const { edge, positionedNodesById } = params;
+		const fromNode = positionedNodesById.get(edge.from);
+		const toNode = positionedNodesById.get(edge.to);
 		if (!fromNode || !toNode) return [];
 		if (fromNode.isContainer && fromNode.children?.includes(edge.to)) {
 			const headerHeight = 50;
@@ -923,6 +950,65 @@ var DagreLayout = class {
 	}
 };
 //#endregion
+//#region src/renderers/svgBuilder.ts
+/**
+* Escape a string for use as a double-quoted HTML attribute value.
+*
+* Matches the HTML serialization algorithm: only `&`, U+00A0, and `"` are escaped
+* (`<` and `>` are intentionally left untouched inside attribute values).
+*/
+function escapeAttribute(value) {
+	return value.replace(/&/g, "&amp;").replace(/\u00A0/g, "&nbsp;").replace(/"/g, "&quot;");
+}
+/**
+* Escape a string for use as element text content.
+*
+* Matches the HTML serialization algorithm: `&`, U+00A0, `<`, and `>` are escaped.
+*/
+function escapeText(value) {
+	return value.replace(/&/g, "&amp;").replace(/\u00A0/g, "&nbsp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+/**
+* A single SVG element node with chainable construction.
+*
+* Create a root with `new SvgElement('svg')`, build the tree with `append`/`attr`/`text`,
+* then call {@link serialize} to produce the SVG string.
+*/
+var SvgElement = class SvgElement {
+	tag;
+	attributes = [];
+	children = [];
+	textContent = null;
+	constructor(tag) {
+		this.tag = tag;
+	}
+	/**
+	* Set an attribute. Repeated calls preserve insertion order, matching the DOM,
+	* so a later call appends the attribute rather than reordering an existing one.
+	*/
+	attr(name, value) {
+		this.attributes.push([name, String(value)]);
+		return this;
+	}
+	/** Append a child element of the given tag and return it for chaining. */
+	append(tag) {
+		const child = new SvgElement(tag);
+		this.children.push(child);
+		return child;
+	}
+	/** Set the element's text content. */
+	text(value) {
+		this.textContent = String(value);
+		return this;
+	}
+	/** Serialize this element and its subtree to an SVG string. */
+	serialize() {
+		const attrs = this.attributes.map(([name, value]) => ` ${name}="${escapeAttribute(value)}"`).join("");
+		const inner = (this.textContent !== null ? escapeText(this.textContent) : "") + this.children.map((child) => child.serialize()).join("");
+		return `<${this.tag}${attrs}>${inner}</${this.tag}>`;
+	}
+};
+//#endregion
 //#region src/renderers/SvgRenderer.ts
 /**
 * SvgRenderer - Generates SVG diagrams from positioned nodes and edges
@@ -930,18 +1016,20 @@ var DagreLayout = class {
 var SvgRenderer = class {
 	options;
 	theme;
+	pathGenerator;
 	constructor(options) {
 		this.options = options;
 		this.theme = getTheme(options.theme, options.customColors);
+		const generator = line().x((point) => point.x).y((point) => point.y);
+		if (options.edgeStyle === "curved") generator.curve(curveBasis);
+		this.pathGenerator = generator;
 	}
 	/**
 	* Render the diagram to SVG string
 	*/
 	render(layout) {
-		const document = new JSDOM("<!DOCTYPE html><html><body></body></html>").window.document;
 		const bounds = this.calculateBounds(layout);
-		const svgNode = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-		const svg = select(svgNode).attr("width", bounds.width).attr("height", bounds.height).attr("xmlns", "http://www.w3.org/2000/svg").attr("viewBox", `${bounds.minX} ${bounds.minY} ${bounds.width} ${bounds.height}`);
+		const svg = new SvgElement("svg").attr("width", bounds.width).attr("height", bounds.height).attr("xmlns", "http://www.w3.org/2000/svg").attr("viewBox", `${bounds.minX} ${bounds.minY} ${bounds.width} ${bounds.height}`);
 		if (this.theme.background && this.theme.background !== "transparent") svg.append("rect").attr("x", bounds.minX).attr("y", bounds.minY).attr("width", bounds.width).attr("height", bounds.height).attr("fill", this.theme.background);
 		const defs = svg.append("defs");
 		defs.append("marker").attr("id", "arrowhead-normal").attr("markerWidth", 10).attr("markerHeight", 10).attr("refX", 9).attr("refY", 3).attr("orient", "auto").append("polygon").attr("points", "0 0, 10 3, 0 6").attr("fill", this.theme.edgeColors.normal);
@@ -953,8 +1041,9 @@ var SvgRenderer = class {
 		const nodesGroup = svg.append("g").attr("class", "nodes");
 		const containerNodes = layout.nodes.filter((node) => node.isContainer);
 		const regularNodes = layout.nodes.filter((node) => !node.isContainer);
+		const nodesById = new Map(layout.nodes.map((node) => [node.id, node]));
 		layout.edges.forEach((edge) => {
-			const fromNode = layout.nodes.find((node) => node.id === edge.from);
+			const fromNode = nodesById.get(edge.from);
 			if (fromNode && (fromNode.type === "BranchEnd" || fromNode.type === "IteratorEnd")) return;
 			this.renderEdge({
 				edge,
@@ -979,7 +1068,7 @@ var SvgRenderer = class {
 				edgeCount: layout.edges.length,
 				nodeCount: layout.nodes.length
 			},
-			svg: svgNode.outerHTML,
+			svg: svg.serialize(),
 			width: bounds.width
 		};
 	}
@@ -1051,8 +1140,13 @@ var SvgRenderer = class {
 	renderNode(params) {
 		const { group, node } = params;
 		const nodeGroup = group.append("g").attr("class", `node node-${node.type}`).attr("transform", `translate(${node.x}, ${node.y})`);
-		const style = node.style;
-		if (!style) return;
+		const baseStyle = node.style;
+		if (!baseStyle) return;
+		const override = this.options.nodeOverrides?.[node.id];
+		const style = override ? {
+			...baseStyle,
+			...override
+		} : baseStyle;
 		switch (style.shape) {
 			case "circle":
 				this.renderCircle({
@@ -1179,9 +1273,7 @@ var SvgRenderer = class {
 		if (!edge.points || edge.points.length < 2) return;
 		const edgeColor = this.theme.edgeColors[edge.type || "normal"];
 		const markerType = edge.type || "normal";
-		const pathGenerator = line().x((d) => d.x).y((d) => d.y);
-		if (this.options.edgeStyle === "curved") pathGenerator.curve(curveBasis);
-		const pathElement = group.append("path").attr("d", pathGenerator(edge.points)).attr("fill", "none").attr("stroke", edgeColor).attr("stroke-width", edge.type === "error" ? 2 : 1.5).attr("marker-end", `url(#arrowhead-${markerType})`);
+		const pathElement = group.append("path").attr("d", this.pathGenerator(edge.points) ?? "").attr("fill", "none").attr("stroke", edgeColor).attr("stroke-width", edge.type === "error" ? 2 : 1.5).attr("marker-end", `url(#arrowhead-${markerType})`);
 		if (edge.type === "error") pathElement.attr("stroke-dasharray", "5,5");
 		else if (edge.type === "default") pathElement.attr("stroke-dasharray", "8,4");
 		if (edge.label) {
@@ -1337,7 +1429,8 @@ const DEFAULT_DIAGRAM_OPTIONS = {
 	iconSize: 24,
 	showIcons: false,
 	pngQuality: 90,
-	backgroundColor: "transparent"
+	backgroundColor: "transparent",
+	nodeOverrides: void 0
 };
 /**
 * Merge user-provided options with defaults
@@ -1744,7 +1837,8 @@ function writeOutput(content, outputPath) {
 		if (!content.endsWith("\n")) process.stdout.write("\n");
 	}
 }
-run(process.argv.slice(2)).then((code) => {
+if (process.argv[1] !== void 0 && import.meta.url === pathToFileURL(process.argv[1]).href) run(process.argv.slice(2)).then((code) => {
 	process.exit(code);
 });
 //#endregion
+export { CliError, parseArgs, run };