generateSvg

function generateSvg(params): SvgOutput;

Defined in: src/index.ts:108

Generate an SVG diagram from an AWS Step Functions ASL definition

This function parses an ASL definition and renders it as an SVG diagram using D3.js with automatic graph layout via Dagre. The output is a complete SVG string that can be saved to a file or embedded in HTML.

Parameters

params

GenerateSvgParams

Configuration object

Returns

SvgOutput

SVG output containing the diagram string, dimensions, and metadata

Throws

If params.aslDefinition is a string with invalid JSON (also an instanceof SyntaxError and AslValidationError)

Throws

If the ASL definition structure is invalid

Examples

import { generateSvg } from 'sfn-diagram';
import { writeFileSync } from 'fs';

const asl = {
  StartAt: 'HelloWorld',
  States: {
    HelloWorld: { Type: 'Pass', Result: 'Hello!', End: true }
  }
};

const { svg, width, height } = generateSvg({ aslDefinition: asl, theme: 'dark', layout: 'LR' });
writeFileSync('diagram.svg', svg);
console.log(`Generated ${width}x${height} diagram`);

// From JSON string
const aslJson = fs.readFileSync('state-machine.json', 'utf-8');
const result = generateSvg({ aslDefinition: aslJson, theme: 'light' });

// With AWS service icons
const { svg } = generateSvg({
  aslDefinition: asl,
  showIcons: true,
  iconPosition: 'left',
  nodeWidth: 150
});