grafloria
The framework-agnostic diagram engine — flow charts, dashboards, UML, and real-time collaboration. Native in Angular, React and Vue. Open source, MIT, no pro tier.
npm install @grafloria/react # or angular · vue · element
Not screenshots — every canvas below is a real Grafloria instance you can drag, pan and play with. The things people always wonder about, rendered live.
Wire a pipeline and watch it flow. Typed ports keep incompatible nodes from connecting, animated wires carry the data, and an AI-agent node fans out to its model, memory and tool sub-nodes.
The same engine drives a real execution model — run, pause, step — not just a picture of one.
Open the full workflow builder →Declare views as data; the kit packs the grid. KPI cards, line, bar and donut widgets tile a 12-column grid — drag to re-pack live, resize from a corner, undo any gesture.
Save and restore round-trips the whole board byte-for-byte.
Open the dashboard builder →From pure data to a full UML card. Each class renders its name, attributes and methods in real compartments; inheritance draws a hollow triangle, aggregation a hollow diamond.
No hand-placing boxes — pass classes and relationships, the kit does the rest.
Open the UML demo →Entities as tables, keys as ports. Every column is a row you can wire from; primary keys carry a PK badge, foreign keys an FK, and relationships attach with crow's-foot cardinality.
Edit it in the canvas — rename columns, drag new links — and export the model.
Open the ER editor →Paste Mermaid text and get a real diagram. Not a picture of one — every node on the right is live: drag it, connect it, re-route the edges, export it to SVG or PDF.
Flowchart, ER, class and state parse today, validated against Mermaid v11 by a 28-case oracle; anything else fails safe and says so rather than drawing something wrong.
How Mermaid support works →The features other libraries sell as “Pro” ship here as MIT: measured, gate-tested, and demonstrated in a 100-plus-page live gallery.
Angular ng-templates, React components, Vue slots — real bindings and state inside every node, ports as model anatomy.
ELK, dagre, force, tree, grid, and a zero-config auto — one prop. ELK loads lazily, so you ship none of it until a layout runs.
Declared as pure data: tabbed views, drag & resize with live re-packing, undo, and built-in KPI, line, bar, donut, funnel and table widgets.
CRDT sync over any transport, live cursors, anchored comment threads with a conversation panel — serverless cross-tab or your own websocket.
SVG, PNG, and a self-contained PDF writer — gradients, soft masks, images and text as true vectors, pixel-verified in CI.
Diagrams as text with a lossless sidecar: hand-edit the body, keep positions and styles, round-trip through the live model.
Most libraries let wires cut straight through nodes and call it a day — obstacle-avoiding routing is the feature the market puts price tags on. Grafloria ships it in the MIT core: orthogonal routes that never cross their own nodes, proven in CI by a 480-placement sweep, hardened by hundreds of real-gesture line-geometry checks.
Sixteen capability areas, every one demonstrated in the live gallery — this is what "framework-agnostic diagram engine" actually means in practice.
Framework-agnostic SVG VNode pipeline; per-entity caching; spatial-index viewport culling; 3-tier level-of-detail; rich HTML inside nodes.
Four path families, eight arrowhead types, labels, jump-overs, parallel links & self-loops, editable waypoints, reconnect, animated gradients.
Obstacle-avoiding orthogonal with a never-cross-your-own-node guarantee, escape stubs, smart connection points, port snapping.
Per-shape positioning, multi-port spreading, visibility strategies, typed ports with validation, connection limits.
21 built-in figures plus custom silhouettes, auto-sizing, resizer chrome, node toolbars, drag handles, intersections.
Drag, pan, zoom, marquee, snap-to-grid, helper lines, proximity connect, context menus, touch — every gesture undoable.
Nested groups with real frames, swimlanes & pools, parent-child membership, cross-boundary edges resolved at the right ancestor.
Layered (ELK), tree, force, grid, compound containers — off the main thread in a Worker, lazy-loaded so you ship none of it unused.
Plain-JSON specs, byte-stable save / load, Mermaid-compatible text in and out with a lossless position sidecar.
Viewport culling, level-of-detail, VNode caching, worker layout — see the stress test hold up under load.
Light/dark token themes with runtime switching, CSS variables, per-edge style API — up to glowing animated gradients.
Angular templates & signals, React hooks, Vue composables, a vanilla <grafloria-flow> element — one conformance suite across all four.
Keyboard-complete canvas: focus ring, arrow nudge with pixel-exact undo, connect by keyboard, live-region narration — axe-audited in CI.
SVG, PNG, and a self-contained PDF writer — true vectors, rendered server-side, byte-identical every run.
Per-property CRDT, serverless cross-tab sync, presence cursors, anchored comment threads, conflict resolution you can watch converge.
Custom tools on a public seam, custom shapes, lazy-loaded plugin chrome (minimap, controls, background), and data-driven kits: ER, UML, dashboards.
The same headless core underneath — each wrapper speaks its framework's idiom, verified by the same conformance suite.
<grafloria-diagram-canvas
[(nodes)]="nodes" [(edges)]="edges"
[layout]="'elk'" [plugins]="true">
<ng-template grafloriaNode="job"
let-data="data">
{{ data['title'] }}
</ng-template>
</grafloria-diagram-canvas><GrafloriaFlow
nodes={nodes} onNodesChange={set}
layout="elk" plugins
nodeTypes={{ job: JobCard }}
collab={{ transport, actor,
presence: true }}
/><GrafloriaFlow
v-model:nodes="nodes"
v-model:edges="edges"
layout="elk" :plugins="true">
<template #node-job="{ data }">
{{ data.title }}
</template>
</GrafloriaFlow>