Most diagram syntax is now machine-generated — and imperfect. Flora renders it gracefully instead of failing silently: interactive SVGs plus structured warnings, from Mermaid-compatible input.
LLM output is imperfect — unclosed brackets, dangling arrows, truncated lines. Flora renders what it can and tells you exactly what it skipped. This demo is live: the diagram and warnings below come straight from Flora's parser.
flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Do thing
B -->
D[End]Flora never throws. It recovers from unterminated brackets, dangling arrows, and malformed lines—rendering what it can and returning structured warnings for the rest.
Subtle gradients, color-coded node shapes, refined typography. Diagrams look polished without any theme configuration. Fully customizable when you need it.
Hover highlights, click handlers, and smooth zoom/pan—all built in. No extra config, no plugins. Diagrams are interactive by default.
Drop-in replacement for Mermaid's flowchart syntax. One dependency (dagre for layout). Ships as ESM and CJS with full TypeScript types.
Click any node to trace its upstream and downstream dependencies. Everything else fades away — perfect for data pipelines and dependency graphs.
Click a node to trace its lineage
npm install @topspinj/floraimport { render } from "@topspinj/flora";
const { warnings } = render(
`flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Do thing]
B -->|No| D[Other thing]`,
document.getElementById("diagram"),
{ interactive: true }
);render(input, el, opts?) Parse and render into a DOM element.
toSVGElement(input, opts?) Returns an SVG element without attaching to DOM.
toAST(input) Parse and return the abstract syntax tree.
toLayout(input) Parse and return computed node/edge positions.
Install Flora and render your first diagram in under a minute — or try it in the playground first.