sfn-diagram vs. other ways to visualize Step Functions

There’s no shortage of ways to look at a state machine. Here’s where sfn-diagram fits versus the other two most common options:

	sfn-diagram	AWS Console visualizer	Mermaid Live Editor
Input	ASL, CloudFormation/SAM/CDK templates, live AWS state machines	Deployed state machine only	Manual Mermaid you write by hand
Output	SVG, Mermaid, PNG, interactive HTML	Static graph in-browser	Mermaid diagram only
CI / PR integration	GitHub Action posts a diff overlay on every PR that touches ASL	None	None
Execution overlays	Paints a real run’s path/status/duration onto the diagram	Basic per-execution highlighting, console-only	Not applicable
Runs where	CLI, Node, browser, edge runtimes	AWS Console only	Web app only
Automation	Full programmatic API (generateSvg, generateMermaid, etc.)	None — UI only	None — UI only

In short: reach for the AWS Console visualizer to eyeball a state machine you already deployed, reach for Mermaid Live if you’re hand-drawing a diagram from scratch — reach for sfn-diagram when you want diagrams generated automatically from your actual definition, checked into CI, and diffed on every pull request.

Why not just export from the Console?

The Console visualizer only ever shows what’s already deployed. It can’t render a CloudFormation/SAM/CDK template before you deploy it, can’t diff a pull request against production, and has no CLI or API — every diagram is a manual click through the UI. That’s fine for a one-off look at a state machine you own; it doesn’t fit into a review process.

Why not just draw it in Mermaid Live?

Hand-drawn Mermaid is disconnected from the actual definition. It drifts the first time someone edits the state machine and forgets to update the diagram — there’s no source of truth tying the picture to the ASL. sfn-diagram generates the same Mermaid syntax, but from the definition, so it can never go stale.

See the full feature list on the introduction page, or jump straight to the quick start.