state-machine-cat 12.0.17 → 12.0.19

package/README.md

@@ -518,7 +518,7 @@ eat   -> sleep [color="blue" width=3.5] : belly full;
 
 ... would yield this diagram:
 
-<img width="659" alt="colored states and transitions" src="https://raw.githubusercontent.com/sverweij/state-machine-cat/main/docs/pics/10colored_states_and_transitions.png">
+<img width="488" alt="colored states and transitions" src="https://raw.githubusercontent.com/sverweij/state-machine-cat/main/docs/pics/10colored_states_and_transitions.png">
 
 What does 'experimental' mean?
 

package/dist/cli/cli.mjs

@@ -1,12 +1,8 @@
-import { readFileSync } from "node:fs";
 import { parseArgs } from "node:util";
-import satisfies from "semver/functions/satisfies.js";
+import { version } from "../version.mjs";
 import { formatError, displayLicense, transform } from "./actions.mjs";
 import normalize from "./normalize.mjs";
 import validations from "./validations.mjs";
-const $package = JSON.parse(
-	readFileSync(new URL("../../package.json", import.meta.url), "utf8"),
-);
 const HELP_TEXT = `Usage: smcat [options] [infile]
 
 Write beautiful state charts - https://github.com/sverweij/state-machine-cat
@@ -130,31 +126,20 @@ function parseArguments(pArguments) {
 		);
 	return { values: camelizeObject(values), positionals };
 }
-function assertNodeVersion(pCurrentNodeVersion, pSupportedEngines) {
-	if (!satisfies(pCurrentNodeVersion, pSupportedEngines)) {
-		throw new Error(
-			`\nERROR: your node version (${pCurrentNodeVersion}) is not recent enough.\n` +
-				`       state-machine-cat is supported on node ${pSupportedEngines}\n\n`,
-		);
-	}
-}
 export default async function cli(pArguments = process.argv, pOptions) {
 	const lOptions = {
-		currentNodeVersion: process.versions.node,
-		supportedEngines: $package.engines.node,
 		outStream: process.stdout,
 		errorStream: process.stderr,
 		...pOptions,
 	};
 	try {
-		assertNodeVersion(lOptions.currentNodeVersion, lOptions.supportedEngines);
 		const { values, positionals } = parseArguments(pArguments.slice(2));
 		if (values.help) {
 			lOptions.outStream.write(HELP_TEXT, "utf8");
 			return;
 		}
 		if (values.version) {
-			lOptions.outStream.write(`${$package.version}\n`, "utf8");
+			lOptions.outStream.write(`${version}\n`, "utf8");
 			return;
 		}
 		if (values.license) {

package/dist/index.mjs

@@ -4,11 +4,12 @@ import desugar from "./transform/desugar.mjs";
 import getRenderFunction from "./render/index.mjs";
 import { version as _version } from "./version.mjs";
 export function render(pScript, pOptions) {
-	const lStateMachine = parse.getAST(pScript, pOptions);
-	const lDesugar = options.getOptionValue(pOptions, "desugar");
-	return getRenderFunction(options.getOptionValue(pOptions, "outputType"))(
+	const lOptions = pOptions ?? {};
+	const lStateMachine = parse.getAST(pScript, lOptions);
+	const lDesugar = options.getOptionValue(lOptions, "desugar");
+	return getRenderFunction(options.getOptionValue(lOptions, "outputType"))(
 		lDesugar ? desugar(lStateMachine) : lStateMachine,
-		pOptions,
+		lOptions,
 	);
 }
 export const version = _version;

package/dist/options.mjs

@@ -8,7 +8,6 @@ const ALLOWED_VALUES = Object.freeze({
 		values: [
 			{ name: "ast" },
 			{ name: "dot" },
-			{ name: "ndot" },
 			{ name: "eps" },
 			{ name: "json" },
 			{ name: "oldeps" },

package/dist/parse/scxml/index.mjs

@@ -1,6 +1,6 @@
 import fastxml from "fast-xml-parser";
 import he from "he";
-import traverse from "traverse";
+import traverse from "neotraverse";
 import utl from "../../transform/utl.mjs";
 import parserHelpers from "../parser-helpers.mjs";
 import { castArray } from "./utl.mjs";

package/dist/render/dot/attributebuilder.mjs

@@ -36,19 +36,25 @@ const EDGE_ATTRIBUTES = [
 function toNameValueString(pAttribute) {
 	return `${pAttribute.name}=${pAttribute.value}`;
 }
+export function buildGraphAttributes(pEngine, pDirection, pDotGraphAttributes) {
+	return GENERIC_GRAPH_ATTRIBUTES.concat(GRAPH_ATTRIBUTES[pEngine] || [])
+		.concat(DIRECTION_ATTRIBUTES[pDirection] || [])
+		.concat(pDotGraphAttributes || [])
+		.map(toNameValueString)
+		.join(" ");
+}
+export function buildNodeAttributes(pDotNodeAttributes) {
+	return NODE_ATTRIBUTES.concat(pDotNodeAttributes || [])
+		.map(toNameValueString)
+		.join(" ");
+}
+export function buildEdgeAttributes(pDotEdgeAttributes) {
+	return EDGE_ATTRIBUTES.concat(pDotEdgeAttributes || [])
+		.map(toNameValueString)
+		.join(" ");
+}
 export default {
-	buildGraphAttributes: (pEngine, pDirection, pDotGraphAttributes) =>
-		GENERIC_GRAPH_ATTRIBUTES.concat(GRAPH_ATTRIBUTES[pEngine] || [])
-			.concat(DIRECTION_ATTRIBUTES[pDirection] || [])
-			.concat(pDotGraphAttributes || [])
-			.map(toNameValueString)
-			.join(" "),
-	buildNodeAttributes: (pDotNodeAttributes) =>
-		NODE_ATTRIBUTES.concat(pDotNodeAttributes || [])
-			.map(toNameValueString)
-			.join(" "),
-	buildEdgeAttributes: (pDotEdgeAttributes) =>
-		EDGE_ATTRIBUTES.concat(pDotEdgeAttributes || [])
-			.map(toNameValueString)
-			.join(" "),
+	buildGraphAttributes,
+	buildNodeAttributes,
+	buildEdgeAttributes,
 };

package/dist/render/dot/index.mjs

@@ -1,150 +1,271 @@
-import options from "../../options.mjs";
+import he from "he";
+import { getOptionValue } from "../../options.mjs";
 import StateMachineModel from "../../state-machine-model.mjs";
-import attributebuilder from "./attributebuilder.mjs";
-import stateTransformers from "./state-transformers.mjs";
-import transitionTransformers from "./transition-transformers.mjs";
-import renderDotFromAST from "./render-dot-from-ast.mjs";
-import utl from "./utl.mjs";
-function addExternalSelfTransitions(pStateMachineModel) {
-	return (pState) => {
-		if (Object.hasOwn(pState, "statemachine")) {
-			pState.nestedExternalSelfTransitions = pStateMachineModel
-				.findExternalSelfTransitions(pState.name)
-				.map((pTransition) => pTransition.name);
-		}
-		return pState;
-	};
-}
-function transformStates(
-	pStates,
-	pDirection,
-	pNodeAttributes,
-	pStateMachineModel,
-) {
-	pStates
-		.filter((pState) => pState.statemachine)
-		.forEach((pState) => {
-			pState.statemachine.states = transformStates(
-				pState.statemachine.states,
-				pDirection,
-				pNodeAttributes,
-				pStateMachineModel,
+import {
+	buildGraphAttributes,
+	buildNodeAttributes,
+	buildEdgeAttributes,
+} from "./attributebuilder.mjs";
+import {
+	escapeLabelString,
+	formatActionType,
+	getTransitionPorts,
+	isCompositeSelf,
+	isVertical,
+	noteToLabel,
+	normalizeState,
+	stateNote,
+} from "./utl.mjs";
+let gRenderedTransitions = new Set();
+function initial(pState, pIndent) {
+	const lActiveAttribute = pState.active ? " penwidth=3.0" : "";
+	return `${pIndent}  "${pState.name}" [shape=circle style=filled class="${pState.class}" color="${pState.color}" fillcolor="${pState.color}" fixedsize=true height=0.15 label=""${lActiveAttribute}]${pState.noteText}`;
+}
+function regularStateActions(pActions, pIndent) {
+	return pActions
+		.map((pAction) =>
+			he.escape(`${formatActionType(pAction.type)}${pAction.body}`),
+		)
+		.map((pActionString, pIndex) => {
+			let lReturnValue = `<tr><td align="left" cellpadding="2">${pActionString}</td></tr>`;
+			if (pIndex === 0) {
+				lReturnValue = `<hr/>${lReturnValue}`;
+			}
+			return `\n${pIndent}        ${lReturnValue}`;
+		})
+		.join("");
+}
+function compositeStateActions(pActions, pIndent) {
+	return pActions
+		.map((pAction) =>
+			he.escape(`${formatActionType(pAction.type)}${pAction.body}`),
+		)
+		.map((pActionString, pIndex) => {
+			let lReturnValue = `<tr><td align="left">${pActionString}</td></tr>`;
+			if (pIndex === 0) {
+				lReturnValue = `<hr/>${lReturnValue}`;
+			}
+			return `\n${pIndent}        ${lReturnValue}`;
+		})
+		.join("");
+}
+function atomicRegular(pState, pIndent) {
+	const lActiveAttribute = pState.active ? " peripheries=1 style=rounded" : "";
+	const lCellPadding = (pState.actions?.length ?? 0) > 0 ? 2 : 7;
+	const lActions = regularStateActions(pState?.actions ?? [], pIndent);
+	const lLabel = pState.active ? `<i>${pState.label}</i>` : pState.label;
+	const lLabelTag = `
+${pIndent}    <table align="center" cellborder="0" border="2" style="rounded" width="48">
+${pIndent}      <tr><td width="48" cellpadding="${lCellPadding}">${lLabel}</td></tr>${lActions}
+${pIndent}    </table>`;
+	return `${pIndent}  "${pState.name}" [margin=0 class="${pState.class}" label= <${lLabelTag}
+${pIndent}  >${pState.colorAttribute}${pState.fontColorAttribute}${lActiveAttribute}]${pState.noteText}`;
+}
+function compositeRegular(pState, pIndent, pOptions, pModel) {
+	const lPenWidth = pState.isParallelArea
+		? "1.0"
+		: pState.active
+			? "3.0"
+			: "2.0";
+	const lStyle = pState.isParallelArea ? "dashed" : "rounded";
+	const lActions = compositeStateActions(pState?.actions ?? [], pIndent);
+	const lLabel = pState.active ? `<i>${pState.label}</i>` : pState.label;
+	const lLabelTag = `${pIndent}    <table cellborder="0" border="0">
+${pIndent}      <tr><td>${lLabel}</td></tr>${lActions}
+${pIndent}    </table>`;
+	const lSelfTransitionHelperPoints = pModel
+		.findExternalSelfTransitions(pState.name)
+		.map(
+			(pTransition) =>
+				`${pIndent}  "self_tr_${pTransition.from}_${pTransition.to}_${pTransition.id}" [shape=point style=invis width=0 height=0 fixedsize=true]\n`,
+		)
+		.join("");
+	return `${lSelfTransitionHelperPoints}${pIndent}  subgraph "cluster_${pState.name}" {
+${pIndent}    class="${pState.class}" label= <
+${lLabelTag}
+${pIndent}    > style=${lStyle} penwidth=${lPenWidth}${pState.colorAttribute}${pState.fontColorAttribute}
+${pIndent}    "${pState.name}" [shape=point style=invis margin=0 width=0 height=0 fixedsize=true]
+${states(pState?.statemachine?.states ?? [], `${pIndent}    `, pOptions, pModel)}
+${pIndent}  }${pState.noteText}`;
+}
+function regular(pState, pIndent, pOptions, pModel) {
+	if (pState.statemachine) {
+		return compositeRegular(pState, pIndent, pOptions, pModel);
+	}
+	return atomicRegular(pState, pIndent);
+}
+function history(pState, pIndent) {
+	const lActiveAttribute = pState.active ? " peripheries=2 penwidth=3.0" : "";
+	return `${pIndent}  "${pState.name}" [shape=circle class="${pState.class}" label="H"${pState.colorAttribute}${pState.fontColorAttribute}${lActiveAttribute}]${pState.noteText}`;
+}
+function deepHistory(pState, pIndent) {
+	const lActiveAttribute = pState.active ? " peripheries=2 penwidth=3.0" : "";
+	return `${pIndent}  "${pState.name}" [shape=circle class="${pState.class}" label="H*"${pState.colorAttribute}${pState.fontColorAttribute}${lActiveAttribute}]${pState.noteText}`;
+}
+function choiceActions(pActions, pActive) {
+	return pActions
+		.map((pAction) => {
+			let lReturnValue = he.escape(
+				`${formatActionType(pAction.type)}${pAction.body}`,
 			);
-		});
-	return pStates
-		.map(stateTransformers.setLabel)
-		.map(stateTransformers.nameNote)
-		.map(stateTransformers.classifyState)
-		.map(stateTransformers.escapeStateStrings)
-		.map(stateTransformers.flattenNote)
-		.map(stateTransformers.flattenActions)
-		.map(stateTransformers.flagParallelChildren)
-		.map(stateTransformers.tipForkJoinStates(pDirection))
-		.map(stateTransformers.recolor(pNodeAttributes))
-		.map(addExternalSelfTransitions(pStateMachineModel));
-}
-function splitStates(pStateMachine) {
-	pStateMachine.initialStates = pStateMachine.states.filter(
-		stateTransformers.isType("initial"),
-	);
-	pStateMachine.regularStates = pStateMachine.states.filter(
-		(pState) =>
-			stateTransformers.isType("regular")(pState) && !pState.statemachine,
-	);
-	pStateMachine.historyStates = pStateMachine.states.filter(
-		stateTransformers.isType("history"),
-	);
-	pStateMachine.deepHistoryStates = pStateMachine.states.filter(
-		stateTransformers.isType("deephistory"),
-	);
-	pStateMachine.choiceStates = pStateMachine.states.filter(
-		stateTransformers.isType("choice"),
-	);
-	pStateMachine.forkjoinStates = pStateMachine.states.filter(
-		stateTransformers.isOneOfTypes(["fork", "join", "forkjoin"]),
-	);
-	pStateMachine.junctionStates = pStateMachine.states.filter(
-		stateTransformers.isType("junction"),
-	);
-	pStateMachine.terminateStates = pStateMachine.states.filter(
-		stateTransformers.isType("terminate"),
-	);
-	pStateMachine.finalStates = pStateMachine.states.filter(
-		stateTransformers.isType("final"),
-	);
-	pStateMachine.compositeStates = pStateMachine.states.filter(
-		(pState) => pState.statemachine,
-	);
-	return pStateMachine;
-}
-function addEndTypes(pStateMachineModel) {
-	return (pTransition) => {
-		if (pStateMachineModel.findStateByName(pTransition.from).statemachine) {
-			pTransition.fromComposite = true;
-		}
-		if (pStateMachineModel.findStateByName(pTransition.to).statemachine) {
-			pTransition.toComposite = true;
-		}
-		return pTransition;
-	};
-}
-function addCompositeSelfFlag(pStateMachineModel) {
-	return (pTransition) => {
-		let lAdditionalAttributes = {};
-		if (utl.isCompositeSelf(pStateMachineModel, pTransition)) {
-			if (pStateMachineModel.findStateByName(pTransition.from).hasParent) {
-				lAdditionalAttributes = { hasParent: true, isCompositeSelf: true };
-			} else {
-				lAdditionalAttributes = { isCompositeSelf: true };
+			if (pActive) {
+				lReturnValue = `<i>${lReturnValue}</i>`;
 			}
-		}
-		return { ...pTransition, ...lAdditionalAttributes };
-	};
-}
-function nameTransition() {
-	return (pTransition) => {
-		pTransition.name = `tr_${pTransition.from}_${pTransition.to}_${pTransition.id}`;
-		if (pTransition.note) {
-			pTransition.noteName = `note_${pTransition.name}`;
-		}
-		return pTransition;
-	};
-}
-function transformTransitions(pStateMachineModel, pDirection) {
-	return pStateMachineModel.flattenedTransitions
-		.map(nameTransition())
-		.map(transitionTransformers.escapeTransitionStrings)
-		.map(transitionTransformers.classifyTransition)
-		.map(stateTransformers.flattenNote)
-		.map(addEndTypes(pStateMachineModel))
-		.map(addCompositeSelfFlag(pStateMachineModel))
-		.map(transitionTransformers.addPorts(pDirection));
-}
-export default (pStateMachine, pOptions) => {
-	pOptions = pOptions || {};
-	let lStateMachine = structuredClone(pStateMachine);
-	const lStateMachineModel = new StateMachineModel(lStateMachine);
-	lStateMachine.transitions = transformTransitions(
-		lStateMachineModel,
-		pOptions.direction,
+			return lReturnValue;
+		})
+		.join("\\n");
+}
+function choice(pState, pIndent) {
+	const lActiveAttribute = pState.active ? "penwidth=3.0 " : "";
+	const lActions = choiceActions(
+		pState?.actions ?? [],
+		pState?.active ?? false,
 	);
-	lStateMachine.states = transformStates(
-		lStateMachine.states,
-		pOptions.direction,
-		pOptions.dotNodeAttrs,
-		lStateMachineModel,
+	const lLabelTag = lActions;
+	const lDiamond = `${pIndent}  "${pState.name}" [shape=diamond fixedsize=true width=0.35 height=0.35 fontsize=10 label=" " class="${pState.class}"${pState.colorAttribute}${lActiveAttribute}]`;
+	const lLabelConstruct = `${pIndent}  "${pState.name}" -> "${pState.name}" [color="#FFFFFF01" fontcolor="${pState.color}" class="${pState.class}" label=<${lLabelTag}>]`;
+	return `${lDiamond}\n${lLabelConstruct}${pState.noteText}`;
+}
+function forkjoin(pState, pIndent, pOptions) {
+	const lActiveAttribute = pState.active ? "penwidth=3.0 " : "";
+	const lDirection = getOptionValue(pOptions, "direction");
+	const lSizingExtras = isVertical(lDirection) ? " height=0.1" : " width=0.1";
+	return `${pIndent}  "${pState.name}" [shape=rect fixedsize=true label=" " style=filled class="${pState.class}" color="${pState.color}" fillcolor="${pState.color}"${lActiveAttribute}${lSizingExtras}]${pState.noteText}`;
+}
+function junction(pState, pIndent) {
+	const lActiveAttribute = pState.active ? " penwidth=3.0" : "";
+	const lNote = stateNote(pState, pIndent);
+	return `${pIndent}  "${pState.name}" [shape=circle fixedsize=true height=0.15 label="" style=filled class="${pState.class}" color="${pState.color}" fillcolor="${pState.color}"${lActiveAttribute}]${lNote}`;
+}
+function terminate(pState, pIndent) {
+	const lLabelTag = `
+${pIndent}      <table align="center" cellborder="0" border="0">
+${pIndent}        <tr><td cellpadding="0"><font color="${pState.color}" point-size="20">X</font></td></tr>
+${pIndent}        <tr><td cellpadding="0"><font color="${pState.color}">${pState.label}</font></td></tr>
+${pIndent}      </table>`;
+	return `${pIndent}  "${pState.name}" [label= <${lLabelTag}
+${pIndent}    > class="${pState.class}"]${pState.noteText}`;
+}
+function final(pState, pIndent) {
+	const lActiveAttribute = pState.active ? " peripheries=2 penwidth=3.0" : "";
+	return `${pIndent}  "${pState.name}" [shape=circle style=filled class="${pState.class}" color="${pState.color}" fillcolor="${pState.color}" fixedsize=true height=0.15 peripheries=2 label=""${lActiveAttribute}]${pState.noteText}`;
+}
+const STATE_TYPE2FUNCTION = new Map([
+	["initial", initial],
+	["regular", regular],
+	["history", history],
+	["deephistory", deepHistory],
+	["choice", choice],
+	["fork", forkjoin],
+	["forkjoin", forkjoin],
+	["join", forkjoin],
+	["junction", junction],
+	["terminate", terminate],
+	["final", final],
+]);
+function state(pState, pIndent, pOptions, pModel) {
+	const lState = normalizeState(pState, pOptions, pIndent);
+	const lCandidateTransitions = pModel.findTransitionsToSiblings(
+		pState.name,
+		gRenderedTransitions,
 	);
-	lStateMachine = splitStates(lStateMachine);
-	lStateMachine.graphAttributes = attributebuilder.buildGraphAttributes(
-		options.getOptionValue(pOptions, "engine"),
-		options.getOptionValue(pOptions, "direction"),
-		pOptions.dotGraphAttrs,
+	lCandidateTransitions.forEach((pTransition) => {
+		gRenderedTransitions.add(pTransition.id);
+	});
+	const lTransitions = transitions(
+		lCandidateTransitions,
+		pIndent,
+		pOptions,
+		pModel,
 	);
-	lStateMachine.nodeAttributes = attributebuilder.buildNodeAttributes(
-		pOptions.dotNodeAttrs,
+	return (
+		(STATE_TYPE2FUNCTION.get(pState.type) ?? regular)(
+			lState,
+			pIndent,
+			pOptions,
+			pModel,
+		) +
+		lTransitions +
+		"\n"
 	);
-	lStateMachine.edgeAttributes = attributebuilder.buildEdgeAttributes(
-		pOptions.dotEdgeAttrs,
+}
+function states(pStates, pIndent, pOptions, pModel) {
+	return pStates
+		.map((pState) => state(pState, pIndent, pOptions, pModel))
+		.join("");
+}
+function transition(pTransition, pIndent, pOptions, pModel) {
+	const lLabel = `${escapeLabelString(pTransition.label ?? " ")}`;
+	const lColorAttribute = pTransition.color
+		? ` color="${pTransition.color}"`
+		: "";
+	const lFontColorAttribute = pTransition.color
+		? ` fontcolor="${pTransition.color}"`
+		: "";
+	const lPenWidth = pTransition.width ? ` penwidth=${pTransition.width}` : "";
+	const lClass = pTransition.class
+		? `transition${pTransition.type ? " " + pTransition.type + " " : " "}${pTransition.class}`
+		: `transition${pTransition.type ? " " + pTransition.type : ""}`;
+	const lTail = pModel.findStateByName(pTransition.from)?.statemachine
+		? ` ltail="cluster_${pTransition.from}"`
+		: "";
+	const lHead = pModel.findStateByName(pTransition.to)?.statemachine
+		? ` lhead="cluster_${pTransition.to}"`
+		: "";
+	const lTransitionName = `tr_${pTransition.from}_${pTransition.to}_${pTransition.id}`;
+	if (pTransition.note) {
+		const lNoteName = `note_${lTransitionName}`;
+		const lNoteNodeName = `i_${lNoteName}`;
+		const lNoteNode = `\n${pIndent}  "${lNoteNodeName}" [shape=point style=invis margin=0 width=0 height=0 fixedsize=true]`;
+		const lTransitionFrom = `\n${pIndent}  "${pTransition.from}" -> "${lNoteNodeName}" [arrowhead=none${lTail}${lColorAttribute}]`;
+		const lTransitionTo = `\n${pIndent}  "${lNoteNodeName}" -> "${pTransition.to}" [label="${lLabel}"${lHead}${lColorAttribute}${lFontColorAttribute}]`;
+		const lLineToNote = `\n${pIndent}  "${lNoteNodeName}" -> "${lNoteName}" [style=dashed arrowtail=none arrowhead=none weight=0]`;
+		const lNote = `\n${pIndent}  "${lNoteName}" [label="${noteToLabel(pTransition.note)}" shape=note fontsize=10 color=black fontcolor=black fillcolor="#ffffcc" penwidth=1.0]`;
+		return lNoteNode + lTransitionFrom + lTransitionTo + lLineToNote + lNote;
+	}
+	if (isCompositeSelf(pModel, pTransition)) {
+		const { lTailPorts, lHeadPorts } = getTransitionPorts(
+			pOptions,
+			pModel,
+			pTransition,
+		);
+		const lTransitionFrom = `\n${pIndent}  "${pTransition.from}" -> "self_tr_${pTransition.from}_${pTransition.to}_${pTransition.id}" [label="${lLabel}" arrowhead=none class="${lClass}"${lTailPorts}${lTail}${lColorAttribute}${lFontColorAttribute}]`;
+		const lTransitionTo = `\n${pIndent}  "self_tr_${pTransition.from}_${pTransition.to}_${pTransition.id}" -> "${pTransition.to}" [class="${lClass}"${lHead}${lHeadPorts}${lColorAttribute}${lPenWidth}]`;
+		return lTransitionFrom + lTransitionTo;
+	}
+	return `\n${pIndent}  "${pTransition.from}" -> "${pTransition.to}" [label="${lLabel}" class="${lClass}"${lTail}${lHead}${lColorAttribute}${lFontColorAttribute}${lPenWidth}]`;
+}
+function transitions(pTransitions, pIndent, pOptions, pModel) {
+	return pTransitions
+		.map((pTransition) => transition(pTransition, pIndent, pOptions, pModel))
+		.join("");
+}
+export default function renderDot(pStateMachine, pOptions = {}, pIndent = "") {
+	const lGraphAttributes = buildGraphAttributes(
+		getOptionValue(pOptions, "engine"),
+		getOptionValue(pOptions, "direction"),
+		pOptions?.dotGraphAttrs || [],
+	);
+	const lNodeAttributes = buildNodeAttributes(pOptions.dotNodeAttrs || []);
+	const lEdgeAttributes = buildEdgeAttributes(pOptions.dotEdgeAttrs || []);
+	const lModel = new StateMachineModel(pStateMachine);
+	gRenderedTransitions = new Set();
+	const lStates = states(pStateMachine.states, pIndent, pOptions, lModel);
+	const lRemainingTransitions = transitions(
+		lModel.flattenedTransitions.filter(
+			(pTransition) => !gRenderedTransitions.has(pTransition.id),
+		),
+		pIndent,
+		pOptions,
+		lModel,
 	);
-	return renderDotFromAST(lStateMachine);
-};
+	gRenderedTransitions = new Set();
+	return `digraph "state transitions" {
+  ${lGraphAttributes}
+  node [${lNodeAttributes}]
+  edge [${lEdgeAttributes}]
+
+${lStates}${lRemainingTransitions}
+}
+`;
+}

package/dist/render/dot/utl.mjs

@@ -1,31 +1,103 @@
-function escapeString(pString) {
+import he from "he";
+import { getOptionValue } from "../../options.mjs";
+function getStateColor(pState, pNodeAttributes) {
+	const lNodeColor = (pNodeAttributes || []).find(
+		(pAttribute) => pAttribute.name === "color",
+	)?.value;
+	if (
+		lNodeColor &&
+		!pState.color &&
+		[
+			"initial",
+			"fork",
+			"join",
+			"junction",
+			"forkjoin",
+			"terminate",
+			"final",
+		].includes(pState.type)
+	) {
+		return lNodeColor;
+	}
+	return pState.color ?? "black";
+}
+export function escapeString(pString) {
 	return pString
 		.replace(/\\/g, "\\\\")
 		.replace(/\n\s*/g, "\\l")
 		.replace(/"/g, '\\"')
 		.concat("\\l");
 }
-function escapeLabelString(pString) {
+export function escapeLabelString(pString) {
 	return pString
 		.replace(/\\/g, "\\\\")
 		.replace(/\n\s*/g, "   \\l")
 		.replace(/"/g, '\\"')
 		.concat("   \\l");
 }
-function isVertical(pDirection) {
+export function isVertical(pDirection) {
 	const lDirection = pDirection || "top-down";
 	return lDirection === "top-down" || lDirection === "bottom-top";
 }
-function isCompositeSelf(pStateMachineModel, pTransition) {
+export function isCompositeSelf(pStateMachineModel, pTransition) {
 	return (
 		pTransition.from === pTransition.to &&
-		pStateMachineModel.findStateByName(pTransition.from).statemachine &&
+		(pStateMachineModel.findStateByName(pTransition.from)?.statemachine ??
+			false) &&
 		pTransition.type !== "internal"
 	);
 }
-export default {
-	escapeString,
-	escapeLabelString,
-	isVertical,
-	isCompositeSelf,
-};
+export function noteToLabel(pNote) {
+	return pNote.map(escapeString).join("");
+}
+export function stateNote(pState, pIndent) {
+	if (pState.note) {
+		const lNoteName = `note_${pState.name}`;
+		let lReturnValue = `\n${pIndent}  "${lNoteName}" [color=black fontcolor=black label="${noteToLabel(pState.note)}" shape=note fontsize=10 fillcolor="#ffffcc" penwidth=1.0]`;
+		lReturnValue += `\n${pIndent}  "${pState.name}" -> "${lNoteName}" [style=dashed arrowtail=none arrowhead=none]`;
+		return lReturnValue;
+	}
+	return "";
+}
+export function normalizeState(pState, pOptions, pIndent) {
+	const lReturnValue = structuredClone(pState);
+	lReturnValue.colorAttribute = pState.color ? ` color="${pState.color}"` : "";
+	lReturnValue.fontColorAttribute = pState.color
+		? ` fontcolor="${pState.color}"`
+		: "";
+	lReturnValue.color = getStateColor(pState, pOptions.dotNodeAttrs);
+	lReturnValue.class = pState.class
+		? `state ${pState.type} ${pState.class}`
+		: `state ${pState.type}`;
+	lReturnValue.label = he.escape(pState.label ?? pState.name);
+	lReturnValue.noteText = stateNote(pState, pIndent);
+	if (
+		!pState.isParallelArea &&
+		pState.type === "parallel" &&
+		(pState.statemachine?.states ?? []).length > 0
+	) {
+		lReturnValue.statemachine.states = pState.statemachine.states.map(
+			(pChildState) => ({
+				...pChildState,
+				isParallelArea: pChildState.type === "regular",
+			}),
+		);
+	}
+	return lReturnValue;
+}
+export function formatActionType(pString) {
+	return pString === "activity" ? "" : `${pString}/ `;
+}
+export function getTransitionPorts(pOptions, pModel, pTransition) {
+	let lTailPorts = ' tailport="n" headport="n"';
+	let lHeadPorts = ' tailport="n"';
+	const lDirection = getOptionValue(pOptions, "direction");
+	if (isVertical(lDirection)) {
+		lTailPorts = ' tailport="e" headport="e"';
+		lHeadPorts = ' tailport="w"';
+	} else if (pModel.findStateByName(pTransition.from)?.parent ?? false) {
+		lTailPorts = ' tailport="n" headport="n"';
+		lHeadPorts = ' tailport="s"';
+	}
+	return { lTailPorts, lHeadPorts };
+}