React component

Render diagrams in a React app with the sfn-diagram-react package (source). It wraps generateSvg/generateMermaid in a component with the same platform-agnostic core, so it works in any React renderer. React 18 and 19 are both supported.

npm

npm i sfn-diagram-react sfn-diagram react

pnpm

pnpm add sfn-diagram-react sfn-diagram react

yarn

yarn add sfn-diagram-react sfn-diagram react

bun

bun add sfn-diagram-react sfn-diagram react

import { SfnDiagram } from 'sfn-diagram-react';

<SfnDiagram
  definition={asl}     // ASL object or JSON string
  format="svg"         // 'svg' (default) | 'mermaid'
  theme="dark"         // 'light' | 'dark' | CustomTheme
  layout="LR"          // 'TB' | 'LR' | 'RL' | 'BT'
  history={history}    // optional: renders an execution overlay
  onError={(err) => console.error(err)}
/>