ExportPngParams
Defined in: src/types/index.ts:899
Parameters for exportPng (from the sfn-diagram/png subpath).
Extends
Section titled “Extends”DiagramOptions.PngExportOptions
Properties
Section titled “Properties”aslDefinition
Section titled “aslDefinition”aslDefinition: string | AslDefinition;Defined in: src/types/index.ts:901
ASL definition as object or JSON string
backgroundColor?
Section titled “backgroundColor?”optional backgroundColor?: string;Defined in: src/types/index.ts:450
Background color for PNG export
Default
Section titled “Default”'transparent'Inherited from
Section titled “Inherited from”DiagramOptions.backgroundColor
catchHandling?
Section titled “catchHandling?”optional catchHandling?: CatchHandling;Defined in: src/types/index.ts:458
How to treat per-state Catch (error-handler) branches. ‘show’ (default) renders them; ‘hide’ drops error edges and handler-only nodes so the happy path reads clearly on large machines.
Default
Section titled “Default”'show'Inherited from
Section titled “Inherited from”catchLabelStyle?
Section titled “catchLabelStyle?”optional catchLabelStyle?: CatchLabelStyle;Defined in: src/types/index.ts:464
Style for Catch block edge labels: ‘error-type’ shows error names, ‘catch-number’ shows “Catch #N”
Default
Section titled “Default”'error-type'Inherited from
Section titled “Inherited from”DiagramOptions.catchLabelStyle
collapse?
Section titled “collapse?”optional collapse?: boolean | string[];Defined in: src/types/index.ts:474
Collapse Parallel/Map containers into a placeholder node so dagre lays out a
smaller graph — hiding a container’s children shrinks the diagram instead of
leaving an empty bounding box behind. true collapses every container; a
string array collapses only the named containers (names that don’t resolve to
an existing container are ignored).
Default
Section titled “Default”undefined (no collapsing)Inherited from
Section titled “Inherited from”collapseControls?
Section titled “collapseControls?”optional collapseControls?: boolean;Defined in: src/types/index.ts:486
Draw a collapse control in every open container’s header and an expand control
on every collapsed placeholder, each tagged data-sfn-collapse-target="<id>",
for the interactive viewer’s per-container collapse.
Only useful for interactive output — generateHtml sets it for itself when it
embeds the in-browser relayout. It stays off by default so static SVG and PNG
export carry no controls.
Default
Section titled “Default”falseInherited from
Section titled “Inherited from”DiagramOptions.collapseControls
customColors?
Section titled “customColors?”optional customColors?: Partial<Record<StateType, NodeStyle>>;Defined in: src/types/index.ts:489
Custom styling overrides for specific state types
Inherited from
Section titled “Inherited from”diagramDescription?
Section titled “diagramDescription?”optional diagramDescription?: string;Defined in: src/types/index.ts:495
Accessible description for the diagram, rendered as the root <svg>’s <desc>.
Falls back to a state/transition count summary when omitted.
Inherited from
Section titled “Inherited from”DiagramOptions.diagramDescription
diagramTitle?
Section titled “diagramTitle?”optional diagramTitle?: string;Defined in: src/types/index.ts:503
Accessible name for the diagram, rendered as the root <svg>’s <title> and
aria-label. generateSvg defaults it from the ASL definition’s top-level
Comment when omitted.
Default
Section titled “Default”'AWS Step Functions state machine diagram'Inherited from
Section titled “Inherited from”edgeHitAreas?
Section titled “edgeHitAreas?”optional edgeHitAreas?: boolean;Defined in: src/types/index.ts:514
Render an invisible, thicker hit area beneath every edge so pointer events land on a comfortable target rather than on the drawn stroke, which is 1.5–2px wide.
Only useful for interactive output — generateHtml and the sfn-diagram/element
custom element set it themselves so edges are clickable in the viewer. It stays
off by default so static SVG and PNG export carry no extra paths.
Default
Section titled “Default”falseInherited from
Section titled “Inherited from”edgeOverrides?
Section titled “edgeOverrides?”optional edgeOverrides?: Record<string, EdgeStyleOverride>;Defined in: src/types/index.ts:653
Per-edge style overrides. Merged on top of the edge’s computed style — only specified fields are overridden. Used by the execution overlay to highlight taken transitions and dim untaken ones.
Two key shapes are accepted:
GraphEdge.id—${from}->${to}#${type}#${ordinal}, e.g.Route->Work#choice#1. Targets exactly one edge. Prefer this.${from}->${to}— legacy, broad-matches every edge between that pair. Kept for backwards compatibility through 1.x; removal is deferred to 2.0.
When both match an edge, the qualified key is merged on top of the bare one.
Example
Section titled “Example”{ 'Route->Work': { strokeWidth: 2 }, // both branches 'Route->Work#choice#1': { stroke: '#d13212' }, // only the second rule}Inherited from
Section titled “Inherited from”edgeStyle?
Section titled “edgeStyle?”optional edgeStyle?: EdgePathStyle;Defined in: src/types/index.ts:520
Style of edge paths: straight, curved, or orthogonal
Default
Section titled “Default”'curved'Inherited from
Section titled “Inherited from”engine?
Section titled “engine?”optional engine?: PngEngine;Defined in: src/types/index.ts:739
Rasterization engine. resvg is a native, browser-free renderer;
html-to-image launches headless Chromium via Puppeteer and is kept
as an opt-in fallback.
Default
Section titled “Default”'resvg'Inherited from
Section titled “Inherited from”PngExportOptions.enginefontDirs?
Section titled “fontDirs?”optional fontDirs?: string[];Defined in: src/types/index.ts:744
Directories to search for font files. resvg only.
Inherited from
Section titled “Inherited from”PngExportOptions.fontDirsfontFamily?
Section titled “fontFamily?”optional fontFamily?: string;Defined in: src/types/index.ts:750
Font family to use for text rendering, overriding automatic detection.
resvg only.
Inherited from
Section titled “Inherited from”PngExportOptions.fontFamilyfontFiles?
Section titled “fontFiles?”optional fontFiles?: string[];Defined in: src/types/index.ts:755
Explicit font files to load. resvg only.
Inherited from
Section titled “Inherited from”PngExportOptions.fontFilesformat?
Section titled “format?”optional format?: DiagramFormat;Defined in: src/types/index.ts:523
Output format for the diagram
Inherited from
Section titled “Inherited from”height?
Section titled “height?”optional height?: number;Defined in: src/types/index.ts:526
Overall diagram height in pixels (auto-calculated if not specified)
Inherited from
Section titled “Inherited from”iconPosition?
Section titled “iconPosition?”optional iconPosition?: "left" | "top" | "right";Defined in: src/types/index.ts:532
Position of AWS service icons relative to node label
Default
Section titled “Default”'left'Inherited from
Section titled “Inherited from”iconResolver?
Section titled “iconResolver?”optional iconResolver?: (service) => string | null;Defined in: src/types/index.ts:535
Custom function to resolve icon URLs for services
Parameters
Section titled “Parameters”service
Section titled “service”string
Returns
Section titled “Returns”string | null
Inherited from
Section titled “Inherited from”iconSize?
Section titled “iconSize?”optional iconSize?: number;Defined in: src/types/index.ts:541
Size of AWS service icons in pixels
Default
Section titled “Default”24Inherited from
Section titled “Inherited from”includeComments?
Section titled “includeComments?”optional includeComments?: boolean;Defined in: src/types/index.ts:547
Whether to use state comments as node labels
Default
Section titled “Default”trueInherited from
Section titled “Inherited from”DiagramOptions.includeComments
layout?
Section titled “layout?”optional layout?: LayoutDirection;Defined in: src/types/index.ts:550
Graph layout direction: TB (top-bottom), LR (left-right), RL (right-left), BT (bottom-top)
Inherited from
Section titled “Inherited from”nodeAnnotations?
Section titled “nodeAnnotations?”optional nodeAnnotations?: Record<string, string>;Defined in: src/types/index.ts:660
Extra annotation text rendered below a node’s label, keyed by graph node id -
the state name for every state whose name is unique across the machine. For a nested state whose name repeats elsewhere in the machine the id is qualified by its scope, so read it off the rendered data-state-id rather than assuming the bare name.
Used by the execution overlay to show per-state duration and retry counts.
Inherited from
Section titled “Inherited from”DiagramOptions.nodeAnnotations
nodeHeight?
Section titled “nodeHeight?”optional nodeHeight?: number;Defined in: src/types/index.ts:556
Height of each state node in pixels
Default
Section titled “Default”60Inherited from
Section titled “Inherited from”nodeOverrides?
Section titled “nodeOverrides?”optional nodeOverrides?: Record<string, Partial<NodeStyle>>;Defined in: src/types/index.ts:630
Per-node style overrides keyed by graph node id, which is the state name for
every state whose name is unique across the machine. For a nested state whose name repeats elsewhere in the machine the id is qualified by its scope, so read it off the rendered data-state-id rather than assuming the bare name.
Merged on top of the node’s computed style — only specified fields are overridden.
Inherited from
Section titled “Inherited from”nodeSeparation?
Section titled “nodeSeparation?”optional nodeSeparation?: number;Defined in: src/types/index.ts:562
Horizontal separation between nodes in pixels
Default
Section titled “Default”50Inherited from
Section titled “Inherited from”nodeWidth?
Section titled “nodeWidth?”optional nodeWidth?: number;Defined in: src/types/index.ts:568
Width of each state node in pixels
Default
Section titled “Default”120Inherited from
Section titled “Inherited from”padding?
Section titled “padding?”optional padding?: number;Defined in: src/types/index.ts:574
Padding around the diagram in pixels
Default
Section titled “Default”20Inherited from
Section titled “Inherited from”pngQuality?
Section titled “pngQuality?”optional pngQuality?: number;Defined in: src/types/index.ts:585
PNG export quality from 1-100.
Has no effect on the default resvg engine (PNG is lossless, and resvg
exposes no compression knob) or on the html-to-image fallback engine
(its quality option is JPEG-only). Retained for backward compatibility.
Use PngExportOptions.scale to control output resolution instead.
Default
Section titled “Default”90Inherited from
Section titled “Inherited from”rankSeparation?
Section titled “rankSeparation?”optional rankSeparation?: number;Defined in: src/types/index.ts:591
Vertical separation between ranks in pixels
Default
Section titled “Default”50Inherited from
Section titled “Inherited from”scale?
Section titled “scale?”optional scale?: number;Defined in: src/types/index.ts:761
Multiplier applied to the diagram’s rendered size. resvg only.
Default
Section titled “Default”1Inherited from
Section titled “Inherited from”PngExportOptions.scaleshowIcons?
Section titled “showIcons?”optional showIcons?: boolean;Defined in: src/types/index.ts:597
Whether to display AWS service icons on Task state nodes
Default
Section titled “Default”falseInherited from
Section titled “Inherited from”showStateTypes?
Section titled “showStateTypes?”optional showStateTypes?: boolean;Defined in: src/types/index.ts:603
Whether to display state type labels on nodes
Default
Section titled “Default”falseInherited from
Section titled “Inherited from”showVariables?
Section titled “showVariables?”optional showVariables?: boolean;Defined in: src/types/index.ts:611
Whether to annotate nodes with the variables they assign via ASL Assign.
Shown as $var1, $var2 beneath the node label. States that assign nothing
are unaffected.
Default
Section titled “Default”trueInherited from
Section titled “Inherited from”stylePreset?
Section titled “stylePreset?”optional stylePreset?: StylePreset;Defined in: src/types/index.ts:617
Visual style preset: ‘aws-standard’ uses rectangles (AWS parity), ‘enhanced’ uses shapes for visual distinction
Default
Section titled “Default”'aws-standard'Inherited from
Section titled “Inherited from”theme?
Section titled “theme?”optional theme?: ThemeOption;Defined in: src/types/index.ts:620
Color theme: ‘light’, ‘dark’, or custom theme object
Inherited from
Section titled “Inherited from”width?
Section titled “width?”optional width?: number;Defined in: src/types/index.ts:623
Overall diagram width in pixels (auto-calculated if not specified)