Learn Grafloria

Two layers: a 10-minute tutorial in your framework takes you from install to a working editor, and the concept guides explain how the engine thinks — so the API stops being a list and starts being obvious. Every code sample on these pages was executed against the published packages before it was published here; the demo gallery stays the deep reference, with 111 CI-run pages.

Tutorials

Install → canvas → custom nodes → connection rules → undo → layout → export.

JavaScriptrender() and the <grafloria-flow> element — no framework, no build step required. React<GrafloriaFlow>, nodeTypes components, useNodesState — Next.js notes included. Vue 3v-model bindings and #node-<type> slots — declaring the slot is the opt-in. AngularSignal bindings, ng-template nodes, zoneless-verified.

Framework guides

Deep dives in your framework's own idiom — custom nodes, state, dashboards.

ReactCustom nodes · State & data flow · Dashboards

Vue 3Custom nodes · State & data flow · Dashboards

AngularCustom nodes · State, signals & tooling · Dashboards

JavaScriptCustom nodes · Element vs render() · Dashboards

Concepts

Framework-agnostic — read once, apply everywhere.

The modelNodes, ports, links, groups — one headless model under every binding. Edges & routingFour geometries, five routers — including obstacle avoidance, one word away. Ports & validationWhere links may attach, and the three layers that keep wires legal. GroupsContainers with semantics: collective drag, reversible collapse, frameless grids. Commands & undoWhy ⌘Z always works, and how your features join the same history. Events & interactionOne event map, four framework idioms — plus the connection lifecycle. LayoutEleven algorithms, one call — and why ELK never bloats your bundle. Mermaid & the text formatDiagrams in git: the round trip and the lossless sidecar. ThemingOne theme object, the token bridge, per-node styling. ExportPNG, SVG, real vector PDF, server-side — and files that re-open editable. CollaborationCRDT sync with any transport; presence and comments ride along. KitserDiagram(), umlDiagram(), dashboard() — data in, interactive diagram out.

Reference

Look-up pages for when you already know what you're doing.

The DiagramInstanceOne object, the whole surface — and what deliberately lives a layer down. FAQ & troubleshootingBlank canvas, invisible ports, stale reconcile — walls we actually hit.