A fault-tolerant, Mermaid-compatible diagram library for AI applications. Interactive SVGs from imperfect input.
LLMs produce broken Mermaid constantly. Mermaid throws an error and your UI goes blank. Flora renders what it can and tells you what went wrong.
await mermaid.render("id", `
flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Do thing
B -->
D[End]
`);
// Parse error on line 4
// Nothing renders. App crashes.const { warnings } = render(`
flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Do thing
B -->
D[End]
`, element);
// Renders A, B, D — skips broken lines
// warnings: [{ line: 4, ... }, ...]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.
Full Mermaid-compatible flowchart syntax with 5 node shapes, 3 edge styles, and chain edges.
Recovers from broken syntax. Returns structured warnings with line numbers.
Build diagrams from JS objects—ideal for AI tool-use with structured output.
Progressive rendering as LLM tokens stream in. Nodes appear in real-time.
Entity-relationship diagrams, sequence diagrams, and beyond.