sfn-diagram 0.2.0

package/dist/index.cjs

@@ -0,0 +1,1951 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let _dagrejs_dagre = require("@dagrejs/dagre");
+_dagrejs_dagre = __toESM(_dagrejs_dagre);
+let d3 = require("d3");
+let jsdom = require("jsdom");
+let node_html_to_image = require("node-html-to-image");
+node_html_to_image = __toESM(node_html_to_image);
+
+//#region src/config/themes.ts
+/**
+* AWS Light Theme - matches the AWS Step Functions console light mode
+*/
+const AWS_LIGHT_THEME = {
+	background: "#ffffff",
+	nodeColors: {
+		Pass: {
+			fill: "#e1f5fe",
+			stroke: "#0277bd"
+		},
+		Task: {
+			fill: "#fff3e0",
+			stroke: "#ef6c00"
+		},
+		Choice: {
+			fill: "#f3e5f5",
+			stroke: "#7b1fa2"
+		},
+		Wait: {
+			fill: "#e8f5e8",
+			stroke: "#388e3c"
+		},
+		Succeed: {
+			fill: "#e8f5e8",
+			stroke: "#4caf50"
+		},
+		Fail: {
+			fill: "#ffebee",
+			stroke: "#f44336"
+		},
+		Parallel: {
+			fill: "#fce4ec",
+			stroke: "#c2185b"
+		},
+		Map: {
+			fill: "#f1f8e9",
+			stroke: "#689f38"
+		}
+	},
+	edgeColors: {
+		choice: "#7b1fa2",
+		default: "#9c27b0",
+		error: "#f44336",
+		normal: "#546e7a"
+	},
+	textColor: "#212121",
+	fontSize: 14,
+	fontFamily: "Arial, sans-serif"
+};
+/**
+* AWS Dark Theme - matches the AWS Step Functions console dark mode
+*/
+const AWS_DARK_THEME = {
+	background: "#1e1e1e",
+	nodeColors: {
+		Pass: {
+			fill: "#01579b",
+			stroke: "#4fc3f7"
+		},
+		Task: {
+			fill: "#e65100",
+			stroke: "#ffb74d"
+		},
+		Choice: {
+			fill: "#4a148c",
+			stroke: "#ce93d8"
+		},
+		Wait: {
+			fill: "#1b5e20",
+			stroke: "#81c784"
+		},
+		Succeed: {
+			fill: "#2e7d32",
+			stroke: "#a5d6a7"
+		},
+		Fail: {
+			fill: "#b71c1c",
+			stroke: "#ef5350"
+		},
+		Parallel: {
+			fill: "#880e4f",
+			stroke: "#f48fb1"
+		},
+		Map: {
+			fill: "#33691e",
+			stroke: "#aed581"
+		}
+	},
+	edgeColors: {
+		choice: "#ce93d8",
+		default: "#ba68c8",
+		error: "#ef5350",
+		normal: "#90a4ae"
+	},
+	textColor: "#e0e0e0",
+	fontSize: 14,
+	fontFamily: "Arial, sans-serif"
+};
+/**
+* Get theme object from theme name or custom theme
+*/
+function getTheme(theme, customColors) {
+	let baseTheme;
+	if (!theme || theme === "light") baseTheme = AWS_LIGHT_THEME;
+	else if (theme === "dark") baseTheme = AWS_DARK_THEME;
+	else baseTheme = theme;
+	if (customColors) return {
+		...baseTheme,
+		nodeColors: {
+			...baseTheme.nodeColors,
+			...customColors
+		}
+	};
+	return baseTheme;
+}
+
+//#endregion
+//#region src/styles/NodeStyles.ts
+/**
+* Get node style for a given state type
+*/
+function getNodeStyle(params) {
+	const { stateType, theme = AWS_LIGHT_THEME, customColors, stylePreset = "aws-standard" } = params;
+	if (customColors?.[stateType]) return customColors[stateType];
+	const themeColor = theme.nodeColors[stateType];
+	if (themeColor) return {
+		fill: themeColor.fill,
+		shape: getShapeForStateType({
+			stateType,
+			stylePreset
+		}),
+		stroke: themeColor.stroke,
+		strokeWidth: getStrokeWidthForType(stateType)
+	};
+	return {
+		fill: theme.nodeColors.Task.fill,
+		shape: "rect",
+		stroke: theme.nodeColors.Task.stroke,
+		strokeWidth: 2
+	};
+}
+/**
+* Get the shape for a state type based on the style preset
+*/
+function getShapeForStateType(params) {
+	const { stateType, stylePreset } = params;
+	if (stylePreset === "aws-standard") return "rect";
+	switch (stateType) {
+		case "Choice": return "diamond";
+		case "Succeed":
+		case "Fail": return "circle";
+		default: return "rect";
+	}
+}
+/**
+* Get stroke width for a state type
+*/
+function getStrokeWidthForType(stateType) {
+	switch (stateType) {
+		case "Succeed":
+		case "Fail": return 3;
+		default: return 2;
+	}
+}
+
+//#endregion
+//#region src/constants/labels.ts
+/**
+* Label constants used in diagram generation
+*/
+const EDGE_LABELS = {
+	BRANCH_PREFIX: "Branch",
+	CATCH_PREFIX: "Catch",
+	CHOICE_PREFIX: "Choice",
+	CONDITION_FALLBACK: "Condition",
+	DEFAULT: "Default",
+	ERROR_PREFIX: "Error:",
+	ITERATOR: "Iterator"
+};
+/**
+* Generates an error label with error types
+*/
+function getErrorLabel(errorTypes) {
+	const errors = errorTypes?.join(", ") || "Any";
+	return `${EDGE_LABELS.ERROR_PREFIX} ${errors}`;
+}
+/**
+* Generates a catch block label based on style preference
+*/
+function getCatchLabel(params) {
+	const { catchLabelStyle = "error-type", errorTypes, index } = params;
+	if (catchLabelStyle === "catch-number") return `${EDGE_LABELS.CATCH_PREFIX} #${index + 1}`;
+	return getErrorLabel(errorTypes);
+}
+
+//#endregion
+//#region src/services/ServiceDetector.ts
+/**
+* Mapping of AWS service names to their icon filenames in the aws-icons package
+* Icons sourced from: https://github.com/MKAbuMattar/aws-icons
+* URL pattern: https://cdn.jsdelivr.net/npm/aws-icons@latest/icons/architecture-service/{ICON_NAME}.svg
+*/
+const SERVICE_ICON_MAP = {
+	"apigateway": "AmazonAPIGateway",
+	"appflow": "AmazonAppFlow",
+	"appsync": "AWSAppSync",
+	"eventbridge": "AmazonEventBridge",
+	"events": "AmazonEventBridge",
+	"mq": "AmazonMQ",
+	"sns": "AmazonSimpleNotificationService",
+	"sqs": "AmazonSimpleQueueService",
+	"stepfunctions": "AWSStepFunctions",
+	"sfn": "AWSStepFunctions",
+	"states": "AWSStepFunctions",
+	"athena": "AmazonAthena",
+	"emr": "AmazonEMR",
+	"glue": "AWSGlue",
+	"kinesis": "AmazonKinesis",
+	"kinesisanalytics": "AmazonKinesisDataAnalytics",
+	"kinesisfirehose": "AmazonKinesisDataFirehose",
+	"redshift": "AmazonRedshift",
+	"batch": "AWSBatch",
+	"ec2": "AmazonEC2",
+	"ecs": "AmazonElasticContainerService",
+	"eks": "AmazonElasticKubernetesService",
+	"fargate": "AWSFargate",
+	"lambda": "AWSLambda",
+	"ecr": "AmazonElasticContainerRegistry",
+	"aurora": "AmazonAurora",
+	"documentdb": "AmazonDocumentDB",
+	"dynamodb": "AmazonDynamoDB",
+	"elasticache": "AmazonElastiCache",
+	"neptune": "AmazonNeptune",
+	"rds": "AmazonRDS",
+	"timestream": "AmazonTimestream",
+	"codebuild": "AWSCodeBuild",
+	"codecommit": "AWSCodeCommit",
+	"codedeploy": "AWSCodeDeploy",
+	"codepipeline": "AWSCodePipeline",
+	"bedrock": "AmazonBedrock",
+	"comprehend": "AmazonComprehend",
+	"forecast": "AmazonForecast",
+	"personalize": "AmazonPersonalize",
+	"polly": "AmazonPolly",
+	"rekognition": "AmazonRekognition",
+	"sagemaker": "AmazonSageMaker",
+	"textract": "AmazonTextract",
+	"transcribe": "AmazonTranscribe",
+	"translate": "AmazonTranslate",
+	"cloudformation": "AWSCloudFormation",
+	"cloudwatch": "AmazonCloudWatch",
+	"config": "AWSConfig",
+	"systemsmanager": "AWSSystemsManager",
+	"ssm": "AWSSystemsManager",
+	"kms": "AWSKeyManagementService",
+	"secretsmanager": "AWSSecretsManager",
+	"waf": "AWSWAF",
+	"efs": "AmazonElasticFileSystem",
+	"fsx": "AmazonFSx",
+	"s3": "AmazonSimpleStorageService",
+	"s3glacier": "AmazonS3Glacier"
+};
+/**
+* Extract AWS service name from ARN (Amazon Resource Name)
+*
+* Supports three ARN patterns:
+* 1. Direct service ARNs: arn:aws:SERVICE:region:account:resource
+* 2. Service integrations: arn:aws:states:::SERVICE:action
+* 3. SDK integrations: arn:aws:states:::aws-sdk:SERVICE:action
+*
+* @param params - Parameters containing the ARN to parse
+* @returns Normalized service name or null if parsing fails
+*
+* @example
+* extractServiceFromArn({ arn: 'arn:aws:lambda:us-east-1:123:function:MyFunc' })
+* // Returns: 'lambda'
+*
+* @example
+* extractServiceFromArn({ arn: 'arn:aws:states:::dynamodb:getItem' })
+* // Returns: 'dynamodb'
+*/
+function extractServiceFromArn(params) {
+	const { arn } = params;
+	const directMatch = arn.match(/^arn:aws:([^:]+):/);
+	if (directMatch && directMatch[1] !== "states") return normalizeServiceName({ serviceName: directMatch[1] });
+	const integrationMatch = arn.match(/^arn:aws:states:::([^:]+):/);
+	if (integrationMatch) {
+		const service = integrationMatch[1];
+		if (service === "aws-sdk") {
+			const sdkMatch = arn.match(/^arn:aws:states:::aws-sdk:([^:]+):/);
+			if (sdkMatch) return normalizeServiceName({ serviceName: sdkMatch[1] });
+		}
+		return normalizeServiceName({ serviceName: service });
+	}
+	return null;
+}
+/**
+* Normalize AWS service name to canonical form
+*
+* Converts service names to lowercase and removes hyphens for consistent mapping
+*
+* @param params - Parameters containing the service name to normalize
+* @returns Normalized service name
+*
+* @example
+* normalizeServiceName({ serviceName: 'Amazon-S3' })
+* // Returns: 'amazons3'
+*
+* @example
+* normalizeServiceName({ serviceName: 'DynamoDB' })
+* // Returns: 'dynamodb'
+*/
+function normalizeServiceName(params) {
+	const { serviceName } = params;
+	return serviceName.toLowerCase().replace(/-/g, "");
+}
+/**
+* Build CDN URL for AWS service icon
+*
+* Constructs jsDelivr CDN URL for icons from the aws-icons npm package
+*
+* @param params - Parameters containing the icon filename
+* @returns Full CDN URL to the icon SVG file
+*
+* @example
+* buildIconUrl({ iconName: 'AWSLambda' })
+* // Returns: 'https://cdn.jsdelivr.net/npm/aws-icons@latest/icons/architecture-service/AWSLambda.svg'
+*/
+function buildIconUrl(params) {
+	const { iconName } = params;
+	return `https://cdn.jsdelivr.net/npm/aws-icons@latest/icons/architecture-service/${iconName}.svg`;
+}
+/**
+* Detect AWS service from ASL Task state and resolve icon URL
+*
+* Analyzes the Resource field of Task states to identify the AWS service,
+* then maps to the corresponding icon URL from the aws-icons CDN
+*
+* @param params - Parameters for service detection
+* @param params.state - ASL state definition to analyze
+* @param params.iconResolver - Optional custom function to resolve icon URLs
+* @returns Service information with name and icon URL, or null for non-Task states
+*
+* @example
+* const taskState = {
+*   Type: 'Task',
+*   Resource: 'arn:aws:lambda:us-east-1:123456789012:function:MyFunction'
+* };
+*
+* detectService({ state: taskState })
+* // Returns: {
+* //   serviceName: 'lambda',
+* //   iconUrl: 'https://cdn.jsdelivr.net/npm/aws-icons@latest/icons/arch/Arch_AWS-Lambda_48.svg'
+* // }
+*
+* @example
+* // With custom icon resolver
+* detectService({
+*   state: taskState,
+*   iconResolver: (service) => {
+*     if (service === 'lambda') {
+*       return 'https://my-cdn.com/lambda.svg';
+*     }
+*     return null; // Use default
+*   }
+* })
+*/
+function detectService(params) {
+	const { iconResolver, state } = params;
+	if (state.Type !== "Task" || !state.Resource) return null;
+	const serviceName = extractServiceFromArn({ arn: state.Resource });
+	if (!serviceName) return null;
+	if (iconResolver) return {
+		iconUrl: iconResolver(serviceName),
+		serviceName
+	};
+	const iconName = SERVICE_ICON_MAP[serviceName];
+	if (!iconName) return {
+		iconUrl: null,
+		serviceName
+	};
+	return {
+		iconUrl: buildIconUrl({ iconName }),
+		serviceName
+	};
+}
+
+//#endregion
+//#region src/AslParser.ts
+/**
+* Error thrown when ASL validation fails
+*/
+var AslValidationError = class extends Error {
+	constructor(message) {
+		super(message);
+		this.name = "AslValidationError";
+	}
+};
+/** Valid ASL state types */
+const VALID_STATE_TYPES = [
+	"Pass",
+	"Task",
+	"Choice",
+	"Wait",
+	"Succeed",
+	"Fail",
+	"Parallel",
+	"Map"
+];
+/**
+* Validates an ASL definition and returns helpful error messages
+*
+* @param params - Validation parameters
+* @throws {AslValidationError} When the ASL definition is invalid
+*/
+function validateAsl(params) {
+	const { definition } = params;
+	if (!definition || typeof definition !== "object") throw new AslValidationError("ASL definition must be a non-null object");
+	const asl = definition;
+	if (!("StartAt" in asl)) throw new AslValidationError("ASL definition missing required field: StartAt");
+	if (typeof asl.StartAt !== "string" || asl.StartAt.trim() === "") throw new AslValidationError("StartAt must be a non-empty string");
+	if (!("States" in asl)) throw new AslValidationError("ASL definition missing required field: States");
+	if (!asl.States || typeof asl.States !== "object") throw new AslValidationError("States must be a non-null object");
+	const states = asl.States;
+	const stateNames = Object.keys(states);
+	if (stateNames.length === 0) throw new AslValidationError("States object cannot be empty");
+	if (!stateNames.includes(asl.StartAt)) throw new AslValidationError(`StartAt references non-existent state: "${asl.StartAt}". Available states: ${stateNames.join(", ")}`);
+	for (const [stateName, stateValue] of Object.entries(states)) validateState({
+		stateName,
+		stateNames,
+		stateValue
+	});
+}
+/**
+* Validates an individual state within an ASL definition
+*/
+function validateState(params) {
+	const { stateName, stateNames, stateValue } = params;
+	if (!stateValue || typeof stateValue !== "object") throw new AslValidationError(`State "${stateName}" must be a non-null object`);
+	const state = stateValue;
+	if (!("Type" in state)) throw new AslValidationError(`State "${stateName}" missing required field: Type`);
+	const stateType = state.Type;
+	if (typeof stateType !== "string" || !VALID_STATE_TYPES.includes(stateType)) throw new AslValidationError(`State "${stateName}" has invalid Type: "${stateType}". Valid types: ${VALID_STATE_TYPES.join(", ")}`);
+	if ("Next" in state && state.Next !== void 0) {
+		if (typeof state.Next !== "string") throw new AslValidationError(`State "${stateName}": Next must be a string`);
+		if (!stateNames.includes(state.Next)) throw new AslValidationError(`State "${stateName}": Next references non-existent state "${state.Next}"`);
+	}
+	if ("Default" in state && state.Default !== void 0) {
+		if (typeof state.Default !== "string") throw new AslValidationError(`State "${stateName}": Default must be a string`);
+		if (!stateNames.includes(state.Default)) throw new AslValidationError(`State "${stateName}": Default references non-existent state "${state.Default}"`);
+	}
+	if ("Choices" in state && Array.isArray(state.Choices)) {
+		for (const [index, choice] of state.Choices.entries()) if (choice && typeof choice === "object" && "Next" in choice) {
+			const choiceNext = choice.Next;
+			if (typeof choiceNext === "string" && !stateNames.includes(choiceNext)) throw new AslValidationError(`State "${stateName}": Choices[${index}].Next references non-existent state "${choiceNext}"`);
+		}
+	}
+	if ("Catch" in state && Array.isArray(state.Catch)) {
+		for (const [index, catchBlock] of state.Catch.entries()) if (catchBlock && typeof catchBlock === "object" && "Next" in catchBlock) {
+			const catchNext = catchBlock.Next;
+			if (typeof catchNext === "string" && !stateNames.includes(catchNext)) throw new AslValidationError(`State "${stateName}": Catch[${index}].Next references non-existent state "${catchNext}"`);
+		}
+	}
+	if (!["Succeed", "Fail"].includes(stateType) && stateType !== "Choice") {
+		const hasNext = "Next" in state;
+		const hasEnd = "End" in state && state.End === true;
+		if (!hasNext && !hasEnd) throw new AslValidationError(`State "${stateName}" (Type: ${stateType}) must have either "Next" or "End: true"`);
+	}
+}
+function parseAsl(params) {
+	const { definition, options } = params;
+	const nodes = [];
+	const edges = [];
+	validateAsl({ definition });
+	extractStatesRecursively({
+		definition,
+		nodes,
+		options
+	});
+	for (const [stateName, state] of Object.entries(definition.States)) {
+		const stateEdges = extractEdgesFromState({
+			catchLabelStyle: options?.catchLabelStyle,
+			state,
+			stateName
+		});
+		edges.push(...stateEdges);
+	}
+	extractNestedEdges({
+		definition,
+		edges,
+		options
+	});
+	return {
+		edges,
+		nodes
+	};
+}
+function createStateNode(params) {
+	const { name, options, state, stylePreset } = params;
+	const isContainer = state.Type === "Parallel" || state.Type === "Map";
+	const baseNode = {
+		id: name,
+		isContainer,
+		label: state.Comment || name,
+		style: getNodeStyle({
+			stateType: state.Type,
+			stylePreset
+		}),
+		type: state.Type
+	};
+	if (isContainer) baseNode.children = [];
+	if (options?.showIcons && state.Type === "Task") {
+		const serviceInfo = detectService({
+			iconResolver: options.iconResolver,
+			state
+		});
+		if (serviceInfo) {
+			baseNode.serviceType = serviceInfo.serviceName;
+			baseNode.iconUrl = serviceInfo.iconUrl || void 0;
+		}
+	}
+	return baseNode;
+}
+function extractEdgesFromState(params) {
+	const { catchLabelStyle, state, stateName } = params;
+	const edges = [];
+	switch (state.Type) {
+		case "Choice":
+			if (state.Choices) state.Choices.forEach((choice) => {
+				const condition = extractConditionLabel(choice);
+				edges.push({
+					condition,
+					from: stateName,
+					label: condition,
+					to: choice.Next,
+					type: "choice"
+				});
+			});
+			if (state.Default) {
+				if (!(state.Choices?.map((choice) => choice.Next) || []).includes(state.Default)) edges.push({
+					from: stateName,
+					label: EDGE_LABELS.DEFAULT,
+					to: state.Default,
+					type: "default"
+				});
+			}
+			break;
+		case "Parallel": break;
+		case "Map": break;
+		default:
+			if (state.Next) edges.push({
+				from: stateName,
+				to: state.Next,
+				type: "normal"
+			});
+			break;
+	}
+	if (state.Catch) state.Catch.forEach((catchBlock, index) => {
+		if (catchBlock.Next) edges.push({
+			from: stateName,
+			label: getCatchLabel({
+				catchLabelStyle,
+				errorTypes: catchBlock.ErrorEquals,
+				index
+			}),
+			to: catchBlock.Next,
+			type: "error"
+		});
+	});
+	return edges;
+}
+function extractConditionLabel(choice) {
+	const conditions = [];
+	const variable = choice.Variable || "";
+	if (choice.StringEquals !== void 0) conditions.push(`${variable} == "${choice.StringEquals}"`);
+	if (choice.NumericEquals !== void 0) conditions.push(`${variable} == ${choice.NumericEquals}`);
+	if (choice.BooleanEquals !== void 0) conditions.push(`${variable} == ${choice.BooleanEquals}`);
+	return conditions.join(" AND ") || EDGE_LABELS.CONDITION_FALLBACK;
+}
+/**
+* Recursively extract all states including those nested in Parallel branches and Map iterators
+*/
+function extractStatesRecursively(params) {
+	const { definition, nodes, options } = params;
+	for (const [stateName, state] of Object.entries(definition.States)) {
+		const stateNode = createStateNode({
+			name: stateName,
+			options,
+			state,
+			stylePreset: options?.stylePreset
+		});
+		nodes.push(stateNode);
+		if (state.Type === "Parallel" && state.Branches) state.Branches.forEach((branch, index) => {
+			extractStatesRecursively({
+				definition: branch,
+				nodes,
+				options
+			});
+			if (nodes.find((node) => node.id === branch.StartAt)) stateNode.children?.push(branch.StartAt);
+			const endNodeId = `${stateName}__branch${index}__end`;
+			const endNode = {
+				id: endNodeId,
+				isContainer: false,
+				label: "",
+				style: {
+					fill: "#fff9cc",
+					shape: "circle",
+					stroke: "#687078",
+					strokeWidth: .6
+				},
+				type: "BranchEnd"
+			};
+			nodes.push(endNode);
+			stateNode.children?.push(endNodeId);
+			markBranchStatesAsChildren({
+				branch,
+				containerNode: stateNode,
+				nodes
+			});
+		});
+		if (state.Type === "Map" && state.Iterator) {
+			const iterator = state.Iterator;
+			extractStatesRecursively({
+				definition: iterator,
+				nodes,
+				options
+			});
+			if (nodes.find((node) => node.id === iterator.StartAt)) stateNode.children?.push(iterator.StartAt);
+			const endNodeId = `${stateName}__iterator__end`;
+			const endNode = {
+				id: endNodeId,
+				isContainer: false,
+				label: "",
+				style: {
+					fill: "#fff9cc",
+					shape: "circle",
+					stroke: "#687078",
+					strokeWidth: .6
+				},
+				type: "IteratorEnd"
+			};
+			nodes.push(endNode);
+			stateNode.children?.push(endNodeId);
+			markBranchStatesAsChildren({
+				branch: iterator,
+				containerNode: stateNode,
+				nodes
+			});
+		}
+	}
+}
+/**
+* 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);
+}
+/**
+* Extract edges from nested state machines (Parallel branches and Map iterators)
+*/
+function extractNestedEdges(params) {
+	const { definition, edges, options } = params;
+	for (const [stateName, state] of Object.entries(definition.States)) {
+		if (state.Type === "Parallel" && state.Branches) state.Branches.forEach((branch, index) => {
+			const endNodeId = `${stateName}__branch${index}__end`;
+			edges.push({
+				from: stateName,
+				to: branch.StartAt,
+				type: "normal",
+				visualOnly: true
+			});
+			for (const [branchStateName, branchState] of Object.entries(branch.States)) {
+				const branchEdges = extractEdgesFromState({
+					catchLabelStyle: options?.catchLabelStyle,
+					state: branchState,
+					stateName: branchStateName
+				});
+				edges.push(...branchEdges);
+				if (branchState.End || !branchState.Next && branchState.Type !== "Choice") edges.push({
+					from: branchStateName,
+					to: endNodeId,
+					type: "normal"
+				});
+			}
+			if (state.Next) edges.push({
+				from: endNodeId,
+				to: state.Next,
+				type: "normal"
+			});
+			if (state.Branches && index === state.Branches.length - 1 && state.Next) edges.push({
+				from: stateName,
+				to: state.Next,
+				type: "normal",
+				visualOnly: true
+			});
+			extractNestedEdges({
+				definition: branch,
+				edges,
+				options
+			});
+		});
+		if (state.Type === "Map" && state.Iterator) {
+			const endNodeId = `${stateName}__iterator__end`;
+			edges.push({
+				from: stateName,
+				to: state.Iterator.StartAt,
+				type: "normal",
+				visualOnly: true
+			});
+			for (const [iteratorStateName, iteratorState] of Object.entries(state.Iterator.States)) {
+				const iteratorEdges = extractEdgesFromState({
+					catchLabelStyle: options?.catchLabelStyle,
+					state: iteratorState,
+					stateName: iteratorStateName
+				});
+				edges.push(...iteratorEdges);
+				if (iteratorState.End || !iteratorState.Next && iteratorState.Type !== "Choice") edges.push({
+					from: iteratorStateName,
+					to: endNodeId,
+					type: "normal"
+				});
+			}
+			if (state.Next) {
+				edges.push({
+					from: endNodeId,
+					to: state.Next,
+					type: "normal"
+				});
+				edges.push({
+					from: stateName,
+					to: state.Next,
+					type: "normal",
+					visualOnly: true
+				});
+			}
+			extractNestedEdges({
+				definition: state.Iterator,
+				edges,
+				options
+			});
+		}
+	}
+}
+
+//#endregion
+//#region src/layout/DagreLayout.ts
+/**
+* DagreLayout - Calculates node positions and edge routing using Dagre algorithm
+*/
+var DagreLayout = class {
+	options;
+	constructor(options) {
+		this.options = options;
+	}
+	/**
+	* Calculate layout positions for nodes and edges
+	*/
+	calculate(nodes, edges) {
+		const graph = new _dagrejs_dagre.default.graphlib.Graph();
+		graph.setGraph({
+			marginx: this.options.padding || 20,
+			marginy: this.options.padding || 20,
+			nodesep: this.options.nodeSeparation || 50,
+			rankdir: this.options.layout || "TB",
+			ranksep: this.options.rankSeparation || 50
+		});
+		graph.setDefaultEdgeLabel(() => ({}));
+		const layoutNodes = nodes.filter((node) => !node.isContainer);
+		layoutNodes.forEach((node) => {
+			const dimensions = this.getNodeDimensions(node);
+			graph.setNode(node.id, {
+				height: dimensions.height,
+				label: node.label,
+				shape: node.style?.shape || "rect",
+				width: dimensions.width
+			});
+		});
+		edges.filter((edge) => !edge.visualOnly).forEach((edge) => {
+			graph.setEdge(edge.from, edge.to, {
+				label: edge.label,
+				type: edge.type
+			});
+		});
+		_dagrejs_dagre.default.layout(graph);
+		const positionedNodes = layoutNodes.map((node) => {
+			const dagNode = graph.node(node.id);
+			return {
+				...node,
+				height: dagNode.height,
+				width: dagNode.width,
+				x: dagNode.x,
+				y: dagNode.y
+			};
+		});
+		const containerNodes = this.calculateContainerBounds({
+			containers: nodes.filter((node) => node.isContainer),
+			positionedNodes
+		});
+		const allPositionedNodes = [...positionedNodes, ...containerNodes];
+		const routedEdges = edges.map((edge) => {
+			if (edge.visualOnly) return {
+				...edge,
+				points: this.calculateVisualEdgePoints({
+					edge,
+					positionedNodes: allPositionedNodes
+				})
+			};
+			const dagEdge = graph.edge(edge.from, edge.to);
+			return {
+				...edge,
+				points: dagEdge.points
+			};
+		});
+		const graphDims = graph.graph();
+		return {
+			edges: routedEdges,
+			graph: {
+				height: this.options.height || (graphDims.height ?? 600),
+				width: this.options.width || (graphDims.width ?? 800)
+			},
+			nodes: allPositionedNodes
+		};
+	}
+	/**
+	* Calculate bounding boxes for container nodes based on their children positions
+	*/
+	calculateContainerBounds(params) {
+		const { containers, positionedNodes } = params;
+		return containers.map((container) => {
+			const children = positionedNodes.filter((node) => container.children?.includes(node.id) && node.type !== "BranchEnd" && node.type !== "IteratorEnd");
+			if (children.length === 0) return {
+				...container,
+				height: 200,
+				width: 400,
+				x: 0,
+				y: 0
+			};
+			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));
+			const width = maxX - minX + padding * 2;
+			const height = maxY - minY + padding * 2 + headerHeight;
+			const x = (minX + maxX) / 2;
+			const y = (minY + maxY) / 2 + headerHeight / 2;
+			return {
+				...container,
+				height,
+				width,
+				x,
+				y
+			};
+		});
+	}
+	/**
+	* 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);
+		if (!fromNode || !toNode) return [];
+		if (fromNode.isContainer && fromNode.children?.includes(edge.to)) {
+			const headerHeight = 50;
+			const fromX$1 = fromNode.x || 0;
+			const toX$1 = toNode.x || 0;
+			const fromY$1 = (fromNode.y || 0) - (fromNode.height || 0) / 2 + headerHeight;
+			const toY$1 = (toNode.y || 0) - (toNode.height || 0) / 2;
+			return [{
+				x: fromX$1,
+				y: fromY$1
+			}, {
+				x: toX$1,
+				y: toY$1
+			}];
+		}
+		const fromX = fromNode.x || 0;
+		const fromY = (fromNode.y || 0) + (fromNode.height || 0) / 2;
+		const toX = toNode.x || 0;
+		const toY = (toNode.y || 0) - (toNode.height || 0) / 2;
+		return [{
+			x: fromX,
+			y: fromY
+		}, {
+			x: toX,
+			y: toY
+		}];
+	}
+	/**
+	* Get node dimensions based on shape and options
+	*/
+	getNodeDimensions(node) {
+		const baseWidth = this.options.nodeWidth || 120;
+		const baseHeight = this.options.nodeHeight || 60;
+		switch (node.style?.shape) {
+			case "circle": {
+				if (node.type === "BranchEnd" || node.type === "IteratorEnd") return {
+					height: 16,
+					width: 16
+				};
+				const terminalDiameter = baseHeight * 1.4;
+				return {
+					height: terminalDiameter,
+					width: terminalDiameter
+				};
+			}
+			case "diamond": return {
+				height: baseHeight * 1.2,
+				width: baseWidth * 1.2
+			};
+			default: return {
+				height: baseHeight,
+				width: baseWidth
+			};
+		}
+	}
+};
+
+//#endregion
+//#region src/renderers/SvgRenderer.ts
+/**
+* SvgRenderer - Generates SVG diagrams from positioned nodes and edges
+*/
+var SvgRenderer = class {
+	options;
+	theme;
+	constructor(options) {
+		this.options = options;
+		this.theme = getTheme(options.theme, options.customColors);
+	}
+	/**
+	* Render the diagram to SVG string
+	*/
+	render(layout) {
+		const document = new jsdom.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 = (0, d3.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}`);
+		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);
+		defs.append("marker").attr("id", "arrowhead-error").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.error);
+		defs.append("marker").attr("id", "arrowhead-choice").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.choice);
+		defs.append("marker").attr("id", "arrowhead-default").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.default);
+		const edgesGroup = svg.append("g").attr("class", "edges");
+		const containersGroup = svg.append("g").attr("class", "containers");
+		const nodesGroup = svg.append("g").attr("class", "nodes");
+		const containerNodes = layout.nodes.filter((node) => node.isContainer);
+		const regularNodes = layout.nodes.filter((node) => !node.isContainer);
+		layout.edges.forEach((edge) => {
+			const fromNode = layout.nodes.find((node) => node.id === edge.from);
+			if (fromNode && (fromNode.type === "BranchEnd" || fromNode.type === "IteratorEnd")) return;
+			this.renderEdge({
+				edge,
+				group: edgesGroup
+			});
+		});
+		containerNodes.forEach((node) => {
+			this.renderContainer({
+				group: containersGroup,
+				node
+			});
+		});
+		regularNodes.forEach((node) => {
+			this.renderNode({
+				group: nodesGroup,
+				node
+			});
+		});
+		return {
+			height: bounds.height,
+			metadata: {
+				edgeCount: layout.edges.length,
+				nodeCount: layout.nodes.length
+			},
+			svg: svgNode.outerHTML,
+			width: bounds.width
+		};
+	}
+	/**
+	* Calculate bounding box including all nodes and edge points
+	*/
+	calculateBounds(layout) {
+		let minX = Infinity;
+		let minY = Infinity;
+		let maxX = -Infinity;
+		let maxY = -Infinity;
+		layout.nodes.forEach((node) => {
+			const halfWidth = (node.width || 0) / 2;
+			const halfHeight = (node.height || 0) / 2;
+			minX = Math.min(minX, (node.x || 0) - halfWidth);
+			minY = Math.min(minY, (node.y || 0) - halfHeight);
+			maxX = Math.max(maxX, (node.x || 0) + halfWidth);
+			maxY = Math.max(maxY, (node.y || 0) + halfHeight);
+		});
+		layout.edges.forEach((edge) => {
+			if (edge.points) edge.points.forEach((point) => {
+				minX = Math.min(minX, point.x);
+				minY = Math.min(minY, point.y);
+				maxX = Math.max(maxX, point.x);
+				maxY = Math.max(maxY, point.y);
+			});
+			if (edge.label && edge.points && edge.points.length > 0) {
+				const midpoint = this.getPathMidpoint(edge.points);
+				const labelDimensions = this.calculateLabelDimensions(edge.label);
+				const labelMinX = midpoint.x - labelDimensions.width / 2;
+				const labelMaxX = midpoint.x + labelDimensions.width / 2;
+				const labelMinY = midpoint.y - labelDimensions.height / 2;
+				const labelMaxY = midpoint.y + labelDimensions.height / 2;
+				minX = Math.min(minX, labelMinX);
+				minY = Math.min(minY, labelMinY);
+				maxX = Math.max(maxX, labelMaxX);
+				maxY = Math.max(maxY, labelMaxY);
+			}
+		});
+		const padding = this.options.padding || 20;
+		minX -= padding;
+		minY -= padding;
+		maxX += padding;
+		maxY += padding;
+		return {
+			height: maxY - minY,
+			minX,
+			minY,
+			width: maxX - minX
+		};
+	}
+	/**
+	* Render a container node (Parallel/Map) with bounding box
+	*/
+	renderContainer(params) {
+		const { group, node } = params;
+		const containerGroup = group.append("g").attr("class", `container container-${node.type}`).attr("transform", `translate(${node.x}, ${node.y})`);
+		const width = node.width || 480;
+		const height = node.height || 180;
+		const headerHeight = 50;
+		containerGroup.append("rect").attr("x", -width / 2).attr("y", -height / 2).attr("width", width).attr("height", height).attr("rx", 7).attr("fill", node.style?.fill || "#fce4ec").attr("stroke", node.style?.stroke || "#c2185b").attr("stroke-width", 2).attr("opacity", .5);
+		containerGroup.append("rect").attr("x", -width / 2).attr("y", -height / 2).attr("width", width).attr("height", headerHeight).attr("rx", 7).attr("fill", node.style?.fill || "#fce4ec").attr("stroke", node.style?.stroke || "#c2185b").attr("stroke-width", 2);
+		containerGroup.append("text").attr("x", 0).attr("y", -height / 2 + headerHeight / 2).attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("fill", this.theme.textColor).attr("font-size", this.theme.fontSize).attr("font-family", this.theme.fontFamily).text(node.label);
+		if (this.options.showStateTypes) containerGroup.append("text").attr("x", 0).attr("y", -height / 2 + headerHeight / 2 + 18).attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("fill", this.theme.textColor).attr("font-size", this.theme.fontSize - 2).attr("opacity", .7).text(`${node.type} state`);
+	}
+	/**
+	* Render a single node
+	*/
+	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;
+		switch (style.shape) {
+			case "circle":
+				this.renderCircle({
+					group: nodeGroup,
+					node,
+					style
+				});
+				break;
+			case "diamond":
+				this.renderDiamond({
+					group: nodeGroup,
+					node,
+					style
+				});
+				break;
+			default: this.renderRect({
+				group: nodeGroup,
+				node,
+				style
+			});
+		}
+		if (node.iconUrl && this.options.showIcons) this.renderIcon({
+			group: nodeGroup,
+			iconPosition: this.options.iconPosition || "left",
+			iconSize: this.options.iconSize || 24,
+			iconUrl: node.iconUrl,
+			node
+		});
+		const labelX = this.calculateLabelX({
+			hasIcon: !!node.iconUrl && !!this.options.showIcons,
+			iconPosition: this.options.iconPosition || "left",
+			iconSize: this.options.iconSize || 24,
+			node
+		});
+		const labelY = this.calculateLabelY({
+			hasIcon: !!node.iconUrl && !!this.options.showIcons,
+			iconPosition: this.options.iconPosition || "left",
+			iconSize: this.options.iconSize || 24,
+			node
+		});
+		nodeGroup.append("text").attr("x", labelX).attr("y", labelY).attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("fill", this.theme.textColor).attr("font-size", this.theme.fontSize).attr("font-family", this.theme.fontFamily).text(node.label);
+		if (this.options.showStateTypes) nodeGroup.append("text").attr("x", labelX).attr("y", labelY + 20).attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("fill", this.theme.textColor).attr("font-size", this.theme.fontSize - 2).attr("opacity", .7).text(node.type);
+	}
+	/**
+	* Render rectangle node
+	*/
+	renderRect(params) {
+		const { group, node, style } = params;
+		const width = node.width || 120;
+		const height = node.height || 60;
+		group.append("rect").attr("x", -width / 2).attr("y", -height / 2).attr("width", width).attr("height", height).attr("rx", 5).attr("fill", style.fill).attr("stroke", style.stroke).attr("stroke-width", style.strokeWidth);
+	}
+	/**
+	* Render circle node
+	*/
+	renderCircle(params) {
+		const { group, node, style } = params;
+		const radius = (node.width || 60) / 2;
+		group.append("circle").attr("r", radius).attr("fill", style.fill).attr("stroke", style.stroke).attr("stroke-width", style.strokeWidth);
+	}
+	/**
+	* Render diamond node
+	*/
+	renderDiamond(params) {
+		const { group, node, style } = params;
+		const halfWidth = (node.width || 120) / 2;
+		const halfHeight = (node.height || 60) / 2;
+		const path = `M 0,-${halfHeight} L ${halfWidth},0 L 0,${halfHeight} L -${halfWidth},0 Z`;
+		group.append("path").attr("d", path).attr("fill", style.fill).attr("stroke", style.stroke).attr("stroke-width", style.strokeWidth);
+	}
+	/**
+	* Render AWS service icon within node
+	*/
+	renderIcon(params) {
+		const { group, iconPosition, iconSize, iconUrl, node } = params;
+		const width = node.width || 120;
+		const height = node.height || 60;
+		const padding = 8;
+		let iconX = 0;
+		let iconY = 0;
+		switch (iconPosition) {
+			case "left":
+				iconX = -width / 2 + padding;
+				iconY = -iconSize / 2;
+				break;
+			case "top":
+				iconX = -iconSize / 2;
+				iconY = -height / 2 + padding;
+				break;
+			case "right":
+				iconX = width / 2 - iconSize - padding;
+				iconY = -iconSize / 2;
+				break;
+		}
+		group.append("image").attr("x", iconX).attr("y", iconY).attr("width", iconSize).attr("height", iconSize).attr("href", iconUrl).attr("preserveAspectRatio", "xMidYMid meet");
+	}
+	/**
+	* Calculate label X position based on icon presence and position
+	*/
+	calculateLabelX(params) {
+		const { hasIcon, iconPosition, iconSize } = params;
+		if (!hasIcon) return 0;
+		const padding = 8;
+		const gap = 4;
+		switch (iconPosition) {
+			case "left": return (padding + iconSize + gap) / 2;
+			case "right": return -(padding + iconSize + gap) / 2;
+			default: return 0;
+		}
+	}
+	/**
+	* Calculate label Y position based on icon presence and position
+	*/
+	calculateLabelY(params) {
+		const { hasIcon, iconPosition, iconSize } = params;
+		if (!hasIcon || iconPosition !== "top") return 0;
+		return (8 + iconSize + 4) / 2;
+	}
+	/**
+	* Render an edge
+	*/
+	renderEdge(params) {
+		const { edge, group } = params;
+		if (!edge.points || edge.points.length < 2) return;
+		const edgeColor = this.theme.edgeColors[edge.type || "normal"];
+		const markerType = edge.type || "normal";
+		const pathGenerator = (0, d3.line)().x((d) => d.x).y((d) => d.y);
+		if (this.options.edgeStyle === "curved") pathGenerator.curve(d3.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})`);
+		if (edge.type === "error") pathElement.attr("stroke-dasharray", "5,5");
+		else if (edge.type === "default") pathElement.attr("stroke-dasharray", "8,4");
+		if (edge.label) {
+			const midpoint = this.getPathMidpoint(edge.points);
+			const labelDimensions = this.calculateLabelDimensions(edge.label);
+			group.append("rect").attr("x", midpoint.x - labelDimensions.width / 2).attr("y", midpoint.y - labelDimensions.height / 2).attr("width", labelDimensions.width).attr("height", labelDimensions.height).attr("fill", this.theme.background || "#ffffff").attr("stroke", edgeColor).attr("stroke-width", .5).attr("rx", 3);
+			group.append("text").attr("x", midpoint.x).attr("y", midpoint.y).attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("fill", edgeColor).attr("font-size", this.theme.fontSize - 2).text(edge.label);
+		}
+	}
+	/**
+	* Get the midpoint of a path for label placement
+	*/
+	getPathMidpoint(points) {
+		return points[Math.floor(points.length / 2)];
+	}
+	/**
+	* Calculate dimensions for edge label
+	*/
+	calculateLabelDimensions(label) {
+		const fontSize = this.theme.fontSize - 2;
+		const avgCharWidth = fontSize * .6;
+		const padding = 8;
+		const verticalPadding = 4;
+		const width = label.length * avgCharWidth + padding * 2;
+		return {
+			height: fontSize + verticalPadding * 2,
+			width
+		};
+	}
+};
+
+//#endregion
+//#region src/renderers/MermaidRenderer.ts
+/**
+* MermaidRenderer - Generates Mermaid state diagram syntax from ASL
+*/
+var MermaidRenderer = class {
+	/**
+	* Render nodes and edges to Mermaid syntax
+	*/
+	render(params) {
+		const { asl, edges, nodes } = params;
+		const lines = [];
+		lines.push("stateDiagram-v2");
+		lines.push("");
+		const startState = this.findStartState({
+			asl,
+			edges,
+			nodes
+		});
+		if (startState) lines.push(`    [*] --> ${this.sanitizeId(startState)}`);
+		const stateDefinitions = /* @__PURE__ */ new Set();
+		nodes.forEach((node) => {
+			const id = this.sanitizeId(node.id);
+			if (node.label !== node.id && !stateDefinitions.has(id)) {
+				lines.push(`    ${id}: ${this.escapeLabel(node.label)}`);
+				stateDefinitions.add(id);
+			}
+		});
+		if (stateDefinitions.size > 0) lines.push("");
+		edges.forEach((edge) => {
+			const from = this.sanitizeId(edge.from);
+			const to = this.sanitizeId(edge.to);
+			if (edge.label || edge.condition) {
+				const label = this.escapeLabel(edge.condition || edge.label || "");
+				lines.push(`    ${from} --> ${to}: ${label}`);
+			} else lines.push(`    ${from} --> ${to}`);
+		});
+		const endStates = nodes.filter((node) => node.type === "Succeed" || node.type === "Fail");
+		if (endStates.length > 0) {
+			lines.push("");
+			endStates.forEach((node) => {
+				const id = this.sanitizeId(node.id);
+				lines.push(`    ${id} --> [*]`);
+			});
+		}
+		lines.push("");
+		lines.push("    classDef successState fill:#e8f5e8,stroke:#4caf50,stroke-width:3px");
+		lines.push("    classDef failState fill:#ffebee,stroke:#f44336,stroke-width:3px");
+		lines.push("    classDef choiceState fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px");
+		lines.push("    classDef taskState fill:#fff3e0,stroke:#ef6c00,stroke-width:2px");
+		lines.push("");
+		nodes.forEach((node) => {
+			const id = this.sanitizeId(node.id);
+			switch (node.type) {
+				case "Succeed":
+					lines.push(`    class ${id} successState`);
+					break;
+				case "Fail":
+					lines.push(`    class ${id} failState`);
+					break;
+				case "Choice":
+					lines.push(`    class ${id} choiceState`);
+					break;
+				case "Task":
+					lines.push(`    class ${id} taskState`);
+					break;
+			}
+		});
+		return {
+			code: lines.join("\n"),
+			metadata: {
+				stateCount: nodes.length,
+				edgeCount: edges.length
+			}
+		};
+	}
+	/**
+	* Sanitize state ID for Mermaid (no spaces, special chars)
+	*/
+	sanitizeId(id) {
+		return id.replace(/[^a-zA-Z0-9_]/g, "_");
+	}
+	/**
+	* Escape label text for Mermaid
+	*/
+	escapeLabel(label) {
+		return label.replace(/"/g, "'").replace(/\n/g, " ");
+	}
+	/**
+	* Find the start state from ASL definition or by analyzing edges
+	*/
+	findStartState(params) {
+		const { asl, edges, nodes } = params;
+		if (asl?.StartAt) return asl.StartAt;
+		const targetNodes = new Set(edges.map((edge) => edge.to));
+		return nodes.find((node) => !targetNodes.has(node.id))?.id || nodes[0]?.id || null;
+	}
+};
+
+//#endregion
+//#region src/exporters/PngExporter.ts
+/**
+* PngExporter - Converts SVG to PNG using headless rendering
+*/
+var PngExporter = class {
+	options;
+	constructor(options) {
+		this.options = options;
+	}
+	/**
+	* Convert SVG string to PNG buffer
+	*
+	* Note: External images (like AWS service icons from CDN) may not render in PNG export
+	* due to limitations with headless browser rendering. Use SVG output for best results
+	* when showIcons is enabled.
+	*/
+	async convert(params) {
+		const { svg, width, height } = params;
+		return {
+			buffer: await (0, node_html_to_image.default)({
+				html: this.wrapSvgInHtml({
+					svg,
+					width,
+					height
+				}),
+				puppeteerArgs: { args: ["--no-sandbox", "--disable-setuid-sandbox"] },
+				quality: this.options.pngQuality || 90,
+				transparent: this.options.backgroundColor === "transparent",
+				type: "png"
+			}),
+			height,
+			metadata: { format: "png" },
+			width
+		};
+	}
+	/**
+	* Wrap SVG in HTML for rendering
+	*/
+	wrapSvgInHtml(params) {
+		const { svg, width, height } = params;
+		return `
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            width: ${width}px;
+            height: ${height}px;
+            background: ${this.options.backgroundColor || "transparent"};
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        svg {
+            max-width: 100%;
+            max-height: 100%;
+        }
+    </style>
+</head>
+<body>
+    ${svg}
+</body>
+</html>
+        `.trim();
+	}
+};
+
+//#endregion
+//#region src/config/defaults.ts
+/**
+* Default diagram options - used when options not provided
+*/
+const DEFAULT_DIAGRAM_OPTIONS = {
+	format: "svg",
+	theme: "light",
+	customColors: void 0,
+	layout: "TB",
+	rankSeparation: 50,
+	nodeSeparation: 50,
+	width: void 0,
+	height: void 0,
+	nodeWidth: 120,
+	nodeHeight: 60,
+	padding: 20,
+	includeComments: true,
+	showStateTypes: false,
+	edgeStyle: "curved",
+	catchLabelStyle: "error-type",
+	stylePreset: "aws-standard",
+	iconPosition: "left",
+	iconResolver: void 0,
+	iconSize: 24,
+	showIcons: false,
+	pngQuality: 90,
+	backgroundColor: "transparent"
+};
+/**
+* Merge user-provided options with defaults
+*/
+function mergeOptions(options = {}) {
+	return {
+		...DEFAULT_DIAGRAM_OPTIONS,
+		...options
+	};
+}
+
+//#endregion
+//#region src/utils/iconEmbedder.ts
+/** Default timeout for icon fetch operations in milliseconds */
+const DEFAULT_FETCH_TIMEOUT_MS = 5e3;
+/**
+* Fetch a remote resource and convert it to a base64 data URI
+*
+* @param params - Parameters containing the URL and optional timeout
+* @returns Base64 data URI string, or original URL on failure
+*/
+async function fetchAsDataUri(params) {
+	const { timeoutMs = DEFAULT_FETCH_TIMEOUT_MS, url } = params;
+	const controller = new AbortController();
+	const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+	try {
+		const response = await fetch(url, { signal: controller.signal });
+		clearTimeout(timeoutId);
+		if (!response.ok) throw new Error(`Failed to fetch ${url}: ${response.statusText}`);
+		const buffer = await response.arrayBuffer();
+		const base64 = Buffer.from(buffer).toString("base64");
+		return `data:${url.endsWith(".svg") ? "image/svg+xml" : "image/png"};base64,${base64}`;
+	} catch (error) {
+		clearTimeout(timeoutId);
+		const errorMessage = error instanceof Error && error.name === "AbortError" ? `Timeout after ${timeoutMs}ms` : error;
+		console.warn(`Failed to embed icon from ${url}:`, errorMessage);
+		return url;
+	}
+}
+/**
+* Embed external icon URLs in SVG as base64 data URIs
+*
+* This function scans the SVG for external image references (href attributes)
+* and replaces them with inline base64-encoded data URIs. This ensures icons
+* display correctly in standalone SVG files, PNG exports, and contexts where
+* external resources are blocked by security policies.
+*
+* @param params - Parameters for icon embedding
+* @param params.svg - SVG string containing external icon URLs
+* @returns Promise resolving to SVG string with embedded icons
+*
+* @example
+* const svgWithExternalIcons = generateSvg({ aslDefinition, showIcons: true });
+* const svgWithEmbeddedIcons = await embedIcons({ svg: svgWithExternalIcons.svg });
+* writeFileSync('diagram.svg', svgWithEmbeddedIcons);
+*
+* @example
+* // Chain with PNG export
+* const { svg } = generateSvg({ aslDefinition, showIcons: true });
+* const embeddedSvg = await embedIcons({ svg });
+* const png = await exportPng({ svg: embeddedSvg });
+*/
+async function embedIcons(params) {
+	const { svg, timeoutMs } = params;
+	const matches = Array.from(svg.matchAll(/href="(https?:\/\/[^"]+)"/g));
+	if (matches.length === 0) return svg;
+	const uniqueUrls = [...new Set(matches.map((match) => match[1]))];
+	const urlToDataUri = /* @__PURE__ */ new Map();
+	await Promise.all(uniqueUrls.map(async (url) => {
+		const dataUri = await fetchAsDataUri({
+			timeoutMs,
+			url
+		});
+		urlToDataUri.set(url, dataUri);
+	}));
+	let embeddedSvg = svg;
+	urlToDataUri.forEach((dataUri, url) => {
+		embeddedSvg = embeddedSvg.replaceAll(`href="${url}"`, `href="${dataUri}"`);
+	});
+	return embeddedSvg;
+}
+
+//#endregion
+//#region src/index.ts
+/**
+* Generate an SVG diagram from an AWS Step Functions ASL definition
+*
+* This function parses an ASL definition and renders it as an SVG diagram using D3.js
+* with automatic graph layout via Dagre. The output is a complete SVG string that can
+* be saved to a file or embedded in HTML.
+*
+* @param params - Configuration object
+* @param params.aslDefinition - ASL definition as an object or JSON string
+* @param params.theme - Color theme: 'light' (default), 'dark', or a CustomTheme object
+* @param params.layout - Layout direction: 'TB' (top-bottom, default), 'LR' (left-right), 'RL', or 'BT'
+* @param params.nodeWidth - Width of state nodes in pixels (default: 120)
+* @param params.nodeHeight - Height of state nodes in pixels (default: 60)
+* @param params.rankSeparation - Vertical separation between ranks in pixels (default: 50)
+* @param params.nodeSeparation - Horizontal separation between nodes in pixels (default: 50)
+* @param params.padding - Padding around the diagram in pixels (default: 20)
+* @param params.edgeStyle - Edge path style: 'curved' (default), 'straight', or 'orthogonal'
+* @param params.showStateTypes - Whether to display state types on nodes (default: false)
+* @param params.includeComments - Whether to use state comments as labels (default: true)
+* @param params.customColors - Override colors for specific state types
+*
+* @returns SVG output containing the diagram string, dimensions, and metadata
+*
+* @throws {SyntaxError} If params.asl is a string with invalid JSON
+* @throws {Error} If the ASL definition structure is invalid
+*
+* @example
+* ```typescript
+* import { generateSvg } from 'sfn-diagram';
+* import { writeFileSync } from 'fs';
+*
+* const asl = {
+*   StartAt: 'HelloWorld',
+*   States: {
+*     HelloWorld: { Type: 'Pass', Result: 'Hello!', End: true }
+*   }
+* };
+*
+* const { svg, width, height } = generateSvg({ aslDefinition: asl, theme: 'dark', layout: 'LR' });
+* writeFileSync('diagram.svg', svg);
+* console.log(`Generated ${width}x${height} diagram`);
+* ```
+*
+* @example
+* ```typescript
+* // From JSON string
+* const aslJson = fs.readFileSync('state-machine.json', 'utf-8');
+* const result = generateSvg({ asl: aslJson, theme: 'light' });
+* ```
+*
+* @example
+* ```typescript
+* // With AWS service icons
+* const { svg } = generateSvg({
+*   aslDefinition: asl,
+*   showIcons: true,
+*   iconPosition: 'left',
+*   nodeWidth: 150
+* });
+* ```
+*/
+function generateSvg(params) {
+	const { aslDefinition, ...options } = params;
+	const aslObj = typeof aslDefinition === "string" ? JSON.parse(aslDefinition) : aslDefinition;
+	const mergedOptions = mergeOptions(options);
+	const { nodes, edges } = parseAsl({
+		definition: aslObj,
+		options: mergedOptions
+	});
+	const positioned = new DagreLayout(mergedOptions).calculate(nodes, edges);
+	return new SvgRenderer(mergedOptions).render(positioned);
+}
+/**
+* Generate Mermaid diagram syntax from an AWS Step Functions ASL definition
+*
+* This function converts an ASL definition into Mermaid state diagram syntax,
+* which can be rendered using the Mermaid library or included in Markdown documentation.
+* The output includes CSS classes for styling different state types.
+*
+* @param params - Configuration object
+* @param params.aslDefinition - ASL definition as an object or JSON string
+*
+* @returns Mermaid output containing the diagram code and metadata
+*
+* @throws {SyntaxError} If params.asl is a string with invalid JSON
+* @throws {Error} If the ASL definition structure is invalid
+*
+* @example
+* ```typescript
+* import { generateMermaid } from 'sfn-diagram';
+*
+* const asl = {
+*   StartAt: 'Process',
+*   States: {
+*     Process: { Type: 'Task', Resource: 'arn:aws:...', Next: 'Done' },
+*     Done: { Type: 'Succeed' }
+*   }
+* };
+*
+* const { code, metadata } = generateMermaid({ asl });
+* console.log(code);
+* // Output:
+* // stateDiagram-v2
+* //     [*] --> Process
+* //     Process --> Done
+* //     Done --> [*]
+* //     ...
+*
+* console.log(`Generated diagram with ${metadata.stateCount} states`);
+* ```
+*
+* @example
+* ```typescript
+* // Use in Markdown
+* const { code } = generateMermaid({ asl: myStateMachine });
+* const markdown = `\`\`\`mermaid\n${code}\n\`\`\``;
+* fs.writeFileSync('diagram.md', markdown);
+* ```
+*/
+function generateMermaid(params) {
+	const { aslDefinition, ...options } = params;
+	const aslObj = typeof aslDefinition === "string" ? JSON.parse(aslDefinition) : aslDefinition;
+	const { nodes, edges } = parseAsl({
+		definition: aslObj,
+		options: mergeOptions(options)
+	});
+	return new MermaidRenderer().render({
+		nodes,
+		edges,
+		asl: aslObj
+	});
+}
+/**
+* Generate a diagram from an ASL definition (auto-detects format from options)
+*
+* This is a convenience function that generates either an SVG or Mermaid diagram
+* based on the `format` option. If no format is specified, defaults to SVG.
+*
+* @param params - Configuration object
+* @param params.aslDefinition - ASL definition as an object or JSON string
+* @param params.format - Output format: 'svg' (default) or 'mermaid'
+* @param params.theme - Color theme (SVG only)
+* @param params.layout - Layout direction (SVG only)
+* @param ...params - Other options (see generateSvg or generateMermaid)
+*
+* @returns SVG output if format is 'svg', Mermaid output if format is 'mermaid'
+*
+* @throws {SyntaxError} If params.asl is a string with invalid JSON
+* @throws {Error} If the ASL definition structure is invalid
+*
+* @example
+* ```typescript
+* import { generateDiagram } from 'sfn-diagram';
+*
+* // Generate SVG (default)
+* const svgResult = generateDiagram({ asl: myAsl });
+*
+* // Generate Mermaid
+* const mermaidResult = generateDiagram({ asl: myAsl, format: 'mermaid' });
+* ```
+*/
+function generateDiagram(params) {
+	const { aslDefinition, format, ...options } = params;
+	if (mergeOptions({
+		format,
+		...options
+	}).format === "mermaid") return generateMermaid({
+		aslDefinition,
+		...options
+	});
+	return generateSvg({
+		aslDefinition,
+		...options
+	});
+}
+/**
+* Export a diagram as PNG (asynchronous)
+*
+* This function generates an SVG diagram and converts it to PNG format using
+* headless browser rendering. The output is a Buffer that can be written to a file.
+*
+* **Note:** This function is asynchronous and uses Puppeteer for rendering,
+* which may take a moment on first run to download the browser binary.
+*
+* @param params - Configuration object
+* @param params.aslDefinition - ASL definition as an object or JSON string
+* @param params.pngQuality - PNG quality from 1-100 (default: 90)
+* @param params.backgroundColor - Background color as CSS color or 'transparent' (default: 'transparent')
+* @param ...params - Other SVG options (see generateSvg)
+*
+* @returns Promise resolving to PNG output with buffer and dimensions
+*
+* @throws {SyntaxError} If params.asl is a string with invalid JSON
+* @throws {Error} If the ASL definition structure is invalid or PNG conversion fails
+*
+* @example
+* ```typescript
+* import { exportPng } from 'sfn-diagram';
+* import { writeFileSync } from 'fs';
+*
+* const asl = { StartAt: 'Hello', States: { Hello: { Type: 'Pass', End: true } } };
+*
+* const { buffer, width, height } = await exportPng({
+*   asl,
+*   theme: 'dark',
+*   pngQuality: 95,
+*   backgroundColor: 'white'
+* });
+*
+* writeFileSync('diagram.png', buffer);
+* console.log(`Saved ${width}x${height} PNG`);
+* ```
+*/
+async function exportPng(params) {
+	const { aslDefinition, ...options } = params;
+	const svgOutput = generateSvg({
+		aslDefinition,
+		...options
+	});
+	return new PngExporter(options).convert({
+		svg: svgOutput.svg,
+		width: svgOutput.width,
+		height: svgOutput.height
+	});
+}
+/**
+* Generate a diagram from an AWS SDK DescribeStateMachine response
+*
+* This is a convenience function for integrating with the AWS SDK. It extracts
+* the ASL definition from the response and generates a diagram.
+*
+* @param params - Configuration object
+* @param params.response - AWS SDK DescribeStateMachine response object
+* @param params.format - Output format: 'svg' (default) or 'mermaid'
+* @param ...params - Other options (see generateSvg or generateMermaid)
+*
+* @returns SVG output if format is 'svg', Mermaid output if format is 'mermaid'
+*
+* @throws {Error} If response.definition is missing
+* @throws {SyntaxError} If the definition contains invalid JSON
+* @throws {Error} If the ASL definition structure is invalid
+*
+* @example
+* ```typescript
+* import { SFNClient, DescribeStateMachineCommand } from '@aws-sdk/client-sfn';
+* import { generateFromAwsResponse } from 'sfn-diagram';
+*
+* const client = new SFNClient({ region: 'us-east-1' });
+* const response = await client.send(
+*   new DescribeStateMachineCommand({
+*     stateMachineArn: 'arn:aws:states:...'
+*   })
+* );
+*
+* const { svg } = generateFromAwsResponse({
+*   response,
+*   theme: 'light',
+*   layout: 'TB'
+* });
+* ```
+*/
+function generateFromAwsResponse(params) {
+	const { response, ...options } = params;
+	if (!response.definition) throw new Error("No definition found in AWS response");
+	return generateDiagram({
+		aslDefinition: response.definition,
+		...options
+	});
+}
+/**
+* Class-based API for advanced usage with fluent interface
+*
+* This class allows you to configure diagram options once and generate multiple
+* diagrams with the same settings. Options can be updated using the fluent
+* `setOptions()` method.
+*
+* @example
+* ```typescript
+* import { SfnDiagramGenerator } from 'sfn-diagram';
+*
+* const generator = new SfnDiagramGenerator({
+*   theme: 'dark',
+*   layout: 'LR',
+*   nodeWidth: 150
+* });
+*
+* // Generate multiple diagrams with the same options
+* const diagram1 = generator.generateSvg({ asl: stateMachine1 });
+* const diagram2 = generator.generateSvg({ asl: stateMachine2 });
+*
+* // Update options and generate more
+* generator.setOptions({ theme: 'light' });
+* const diagram3 = generator.generateSvg({ asl: stateMachine3 });
+* ```
+*/
+var SfnDiagramGenerator = class {
+	options;
+	/**
+	* Create a new diagram generator with default options
+	*
+	* @param options - Default diagram options for all subsequent generations
+	*
+	* @example
+	* ```typescript
+	* const generator = new SfnDiagramGenerator({ theme: 'dark', layout: 'LR' });
+	* ```
+	*/
+	constructor(options = {}) {
+		this.options = mergeOptions(options);
+	}
+	/**
+	* Generate a diagram (auto-detects format from options)
+	*
+	* @param params - Generation parameters
+	* @param params.asl - ASL definition as an object or JSON string
+	* @returns SVG or Mermaid output based on format option
+	*
+	* @example
+	* ```typescript
+	* const result = generator.generate({ asl: myStateMachine });
+	* ```
+	*/
+	generate(params) {
+		return generateDiagram({
+			...params,
+			...this.options
+		});
+	}
+	/**
+	* Generate an SVG diagram
+	*
+	* @param params - Generation parameters
+	* @param params.asl - ASL definition as an object or JSON string
+	* @returns SVG output with diagram and metadata
+	*
+	* @example
+	* ```typescript
+	* const { svg } = generator.generateSvg({ asl: myStateMachine });
+	* ```
+	*/
+	generateSvg(params) {
+		return generateSvg({
+			...params,
+			...this.options
+		});
+	}
+	/**
+	* Generate Mermaid diagram syntax
+	*
+	* @param params - Generation parameters
+	* @param params.asl - ASL definition as an object or JSON string
+	* @returns Mermaid output with code and metadata
+	*
+	* @example
+	* ```typescript
+	* const { code } = generator.generateMermaid({ asl: myStateMachine });
+	* ```
+	*/
+	generateMermaid(params) {
+		return generateMermaid({
+			...params,
+			...this.options
+		});
+	}
+	/**
+	* Export diagram as PNG
+	*
+	* @param params - Generation parameters
+	* @param params.asl - ASL definition as an object or JSON string
+	* @returns Promise resolving to PNG output
+	*
+	* @example
+	* ```typescript
+	* const { buffer } = await generator.exportPng({ asl: myStateMachine });
+	* ```
+	*/
+	async exportPng(params) {
+		return exportPng({
+			...params,
+			...this.options
+		});
+	}
+	/**
+	* Update the generator's default options (fluent interface)
+	*
+	* @param options - Partial options to merge with existing options
+	* @returns This generator instance for method chaining
+	*
+	* @example
+	* ```typescript
+	* generator
+	*   .setOptions({ theme: 'dark' })
+	*   .setOptions({ layout: 'LR' });
+	*
+	* const result = generator.generateSvg({ asl: myAsl });
+	* ```
+	*/
+	setOptions(options) {
+		this.options = mergeOptions({
+			...this.options,
+			...options
+		});
+		return this;
+	}
+};
+
+//#endregion
+exports.AWS_DARK_THEME = AWS_DARK_THEME;
+exports.AWS_LIGHT_THEME = AWS_LIGHT_THEME;
+exports.AslValidationError = AslValidationError;
+exports.PngExporter = PngExporter;
+exports.SfnDiagramGenerator = SfnDiagramGenerator;
+exports.embedIcons = embedIcons;
+exports.exportPng = exportPng;
+exports.generateDiagram = generateDiagram;
+exports.generateFromAwsResponse = generateFromAwsResponse;
+exports.generateMermaid = generateMermaid;
+exports.generateSvg = generateSvg;
+exports.validateAsl = validateAsl;