Skip to content
sfn-diagram

Gallery

Each of these renders straight from an ASL fixture with generateSvg — no manual layout, no hand-drawn boxes. Click a fixture name to see the exact ASL behind it in the state types guide.

A minimal two-state Pass to Succeed workflowA minimal two-state Pass to Succeed workflow
Simple — a minimal two-state workflow.
A Choice state branching into two pathsA Choice state branching into two paths
Choice — branching logic based on input.
A Parallel state running two branches concurrentlyA Parallel state running two branches concurrently
Parallel — concurrent branches, one container.
A Map state iterating over an array of itemsA Map state iterating over an array of items
Map — iterating over an array of items.
A Distributed Map with ItemReader and ResultWriterA Distributed Map with ItemReader and ResultWriter
Distributed Map — ItemReader source and ResultWriter sink shown distinctly from an inline Map.
Catch blocks rendered as dashed error edgesCatch blocks rendered as dashed error edges
Error handling — Catch blocks as dashed red edges.
A Retry policy rendered as a labelled self-loopA Retry policy rendered as a labelled self-loop
Retry — a retry policy as a labelled self-loop.
AWS service integrations shown with service icons on Task statesAWS service integrations shown with service icons on Task states
Service icons — --show-icons draws the AWS service behind each Task.

Two more patterns are easier to show live than as a static image:

  • Visual diffing — --diff <baseline> highlights added, modified, and removed states between two revisions. It’s what drives the GitHub Action’s PR comments.
  • Execution overlays — --execution <history.json> paints a real run’s path, status, and per-state duration onto the diagram.

Want to try your own definition? Paste it into the playground — no install required.