Introduction

Grafloria is an MIT diagram and dashboard engine for JavaScript. Use it when you build flowcharts, workflow editors, UML or ER diagrams, or boards of draggable, resizable widgets. Its JavaScript surface and native Angular, React, Vue and Qwik bindings share one headless core, one document format and one undo stack.

Choose your packages

Start with the package for your framework, or the element package for framework-free embedding. The engine owns the graph and behavior; the renderer supplies the visual layer.

Package	What you use it for	Install in your project
`@grafloria/engine`	Headless graph models, commands and undo, layout, diagram text and collaboration.	`npm install @grafloria/engine`
`@grafloria/renderer`	SVG rendering, interaction, theming, accessibility and SVG, PNG or vector PDF export.	`npm install @grafloria/renderer @grafloria/engine`
`@grafloria/element`	The `<grafloria-flow>` custom element and dashboard, UML and ER kits, with or without a framework.	`npm install @grafloria/element @grafloria/engine @grafloria/renderer`
`@grafloria/dashboard`	Dashboard layouts with grid or splitter arrangements, undo, nesting and persistence.	`npm install @grafloria/dashboard @grafloria/element@^0.4.9 @grafloria/engine@^0.3.0 @grafloria/renderer@^0.4.0`
`@grafloria/react`	React components, hooks and component-based custom nodes.	`npm install @grafloria/react @grafloria/engine @grafloria/renderer @grafloria/element react react-dom`
`@grafloria/vue`	Vue 3 components, `v-model` bindings and slot-based custom nodes.	`npm install @grafloria/vue @grafloria/engine @grafloria/renderer @grafloria/element vue`
`@grafloria/angular`	Angular components, directives and services.	`npm install @grafloria/angular @grafloria/engine @grafloria/renderer @grafloria/element @angular/common @angular/core @angular/forms @angular/platform-browser rxjs`
`@grafloria/qwik`	Qwik components, QRL callbacks, custom nodes and resumable server rendering.	`npm install @grafloria/qwik @grafloria/engine @grafloria/renderer @grafloria/element @builder.io/qwik`

The standalone dashboard package at version 0.1.0 declares older peer ranges than the current framework packages. Its install line selects those ranges. For dashboards in a current framework project, start with that framework's binding and the dashboard kit in the element package.

Take your quick start

Choose your stack to install the binding and mount a sized canvas with two connected nodes:

JavaScript quick start: embed without a framework and keep the live instance for updates and cleanup.
React quick start: use controlled node and edge state and an initialization ref.
Vue quick start: use typed data, v-model bindings and an initialization callback.
Angular quick start: use a standalone canvas, two-way model bindings and view-child access.
Qwik quick start: use serializable signals, QRL change callbacks and initialization access.

To explore before installing, open the live demo gallery or the fluid dashboard demo.

Find your task

Concepts

Start with How Grafloria works, then follow specs and live models, instance lifetime, state and event flow, commands and history, and documents and kits to understand how your binding, live graph and saved document fit together.

Guides

The task guides cover shared capabilities; use the framework guides below for binding-specific state and content.

Edit the graph: edit nodes, validate port connections, route and label edges, configure gestures, and add editor controls to turn the canvas into an editor.
Layout and containment: lay out a diagram and group and nest nodes to arrange graphs and give zones, containers and swimlanes real membership.
Appearance: theme a canvas and highlight and animate state to adopt your design system and show graph state without changing graph structure.
Diagram editors: build a workflow editor, database model editor, UML class editor, or stencil editor using shipped capabilities.
Dashboards: build a dashboard and arrange dashboard containers to manage widgets, responsive layouts, nested sections and tabs.
Collaboration: synchronize editors and share presence and comments to connect peers and add shared cursors and discussion.
Saving and export: save and restore documents, import diagram text and files, and export images and documents to persist the live graph and exchange editable or rendered results.
Whiteboarding and extensions: draw and edit ink, tune large-graph rendering, extend rendered geometry, and extend layout execution when you need ink tools, rendering controls or capabilities beyond the built-ins.

Framework guides

JavaScript: elements and content covers embedding choices, DOM events, custom renderers and framework-free lifecycle.
React: state and subscriptions and custom content cover controlled ownership, instance access, portals and widget components.
Vue: state and composables and slots and widgets cover refs, providers, reactive content and dashboard views.
Angular: state and tooling and templates and handles cover model bindings, incremental patches, editor services, node templates and connection handles.
Qwik: state and resumption and custom content and kits cover QRL boundaries, serializable state and custom content across Qwik containers.

API reference

Use the package reference links in the package table to look up exports and signatures. For the live canvas facade, start with DiagramInstance: it provides rendering and spec updates, getModel() for data queries, and getEngine() for engine access. The Qwik Vite reference covers that package's Vite entry point.