generateHtml

function generateHtml(params): HtmlOutput;

Defined in: src/html.ts:399

Generate a self-contained interactive HTML diagram from an ASL definition.

Wraps the SVG output in an HTML document with an inline vanilla-JS controller providing pan/zoom, state search (press / to focus, Enter to cycle hits), and a click-a-state detail panel showing the state’s raw ASL. No external dependencies, so it opens from file://.

Optional overlays draw on the same document: history colours each state by its execution outcome and emphasizes the taken path (what generateExecutionHtml produces), and diff renders the definition as a change against an earlier one (what generateDiff draws, in the viewer). The two compose — see GenerateHtmlParams.diff for how a state that both changed and ran is shown.

Parameters

params

GenerateHtmlParams

ASL definition plus the same options as generateSvg, and optionally history and/or diff.

Returns

HtmlOutput

The HTML document string plus dimensions and metadata. metadata.execution and metadata.diff carry each overlay’s summary when it was requested.

Examples

import { generateHtml } from 'sfn-diagram';
import { writeFileSync } from 'node:fs';
const { html } = generateHtml({ aslDefinition: asl });
writeFileSync('diagram.html', html);

// A run's outcome painted onto a diff of the definition it ran against
const { html, metadata } = generateHtml({
  aslDefinition: after,
  diff: { before },
  history: events,
});
console.log(metadata.diff?.modified, metadata.execution?.failed);

Remarks

With showIcons: true the embedded SVG references CDN-hosted AWS service icons, so the document is not fully offline. Use generateHtmlAsync to inline those icons as data URIs.

Overlays collapse like a plain diagram. A diff placeholder that hides a change is annotated "<n> changed inside"; a history placeholder takes the status rolled up from the states it hides (any failure makes it failed, otherwise any running makes it running, otherwise the container’s own outcome) and a 3/4 succeeded summary beside its own duration.