The diagram library that can show you, not tell you
Grafloria Diagrams is an MIT JavaScript diagram library for flowcharts, workflow editors, UML and ER diagrams, with obstacle-avoiding routing, auto-layout, undo and real-time collaboration built in.
setNodes, getEngine().layout, loadText, exportText, exportSvgString.Reduced-motion users get the canvas at rest.Edges never cross their own nodes
Orthogonal routing treats every node as an obstacle. Drop a node onto an edge's path and the edge walks around it; drag a node across the canvas and every edge it passes re-routes as you move. Waypoints you drag stay routed too.
Auto-layout you do not have to build
ELK layered, tree and force layouts run off the main thread in a Worker. One call arranges the graph; positions come back into the same document, so they save, undo and export like anything you placed by hand.
Mermaid in, canvas out, text back
Paste Mermaid, get an editable diagram. Move things, get the text back with positions kept in a sidecar, so a diagram can live in a repository as text and still be edited by hand.
Vector export, client or server
The same renderer that paints the canvas writes a standalone SVG, a PNG or a PDF, in the browser or in Node with no DOM. The thumbnails here are real exports of the canvas beside them, made when you press the buttons.
What people build with it
Flowcharts
Shapes, ports, orthogonal edges that never cross their own nodes. Edge demos →
Workflow editors
Node palettes, typed ports, validation, execution state on the canvas. Tutorial →
UML and ER diagrams
Class and ER kits as data; an ER editor with cardinalities. Diagram kits →
Real-time collaboration
Per-property CRDT, live cursors, anchored comments; you bring the transport. Collab demos →
Native in your framework
Custom nodes are your components; the engine is headless, so it renders on a server and hydrates on the client.
<GrafloriaFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange}
nodeTypes={{ job: JobNode }} layout="elk" /> // JobNode is your component
<grafloria-diagram-canvas [(nodes)]="nodes" [(edges)]="edges" [layout]="'elk'"> <ng-template gfNode="job" let-node><app-job [node]="node" /></ng-template> </grafloria-diagram-canvas>
<GrafloriaFlow v-model:nodes="nodes" v-model:edges="edges" layout="elk">
<template #node-job="{ node }"><JobCard :node="node" /></template>
</GrafloriaFlow>
React diagram library · Angular · Vue · plain JavaScript · Mermaid
Coming from another library?
Honest, sourced comparisons, both columns true: React Flow · JointJS · GoJS · Mermaid · the full tables. And the same engine draws dashboards: Grafloria Dashboards.
Questions people ask
Is Grafloria Diagrams a React Flow alternative?
For React users, yes, with the parts React Flow leaves to examples or Pro built in: obstacle-avoiding orthogonal routing, ELK and dagre auto-layout off-thread, command-based undo, real-time collaboration and vector export. It is also not React-only. The React Flow alternative page compares both columns honestly.
Does it work outside React?
Yes. The engine is headless TypeScript; the renderer is SVG. Native components exist for Angular, React and Vue, and a web component for plain HTML, Svelte, Solid or a CMS block.
Can it import Mermaid?
Yes. A Mermaid-compatible text format round-trips through the live canvas: paste a flowchart, edit it visually, get the text back.
Is auto-layout built in?
Yes. ELK layered, dagre, tree and force layouts run off-thread in a Worker; one call lays out the graph, and positions survive a save.
Is collaboration paid?
No. Per-property CRDT collaboration with live cursors and anchored comments is MIT like everything else; you bring the transport.
Does it draw dashboards too?
Yes. Grafloria Dashboards is the same engine's dashboard layout product: a diagram can be a widget in a dashboard, sharing one document and one undo stack.
Grafloria is MIT — every feature, no commercial tier. React Flow, JointJS, GoJS and Mermaid are trademarks of their respective owners; comparative references only, no affiliation implied.