Flow Chart

Build flow charts and process diagrams that render as SVG. Decision nodes, process steps, connectors with labels, and automatic layout. Style every element with Tailwind CSS. Export to SVG or PNG.

$npm install @chartts/core
example.tsx
import { flow } from "@chartts/core"

const svg = flow({
  nodes: [
    { id: "start", label: "Start", type: "terminal" },
    { id: "input", label: "Get Data", type: "process" },
    { id: "valid", label: "Valid?", type: "decision" },
    { id: "process", label: "Process", type: "process" },
    { id: "error", label: "Show Error", type: "process" },
    { id: "end", label: "Done", type: "terminal" },
  ],
  edges: [
    { from: "start", to: "input" },
    { from: "input", to: "valid" },
    { from: "valid", to: "process", label: "Yes" },
    { from: "valid", to: "error", label: "No" },
    { from: "process", to: "end" },
  ],
})

Features

Decision, process, and terminal nodes
Connectors with labels
Automatic layout algorithms
Horizontal and vertical flow
Nested sub-processes
Tailwind CSS on all elements
SVG export for documentation
Read the DocsSee DemosExamples