# 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`](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/grafloria-engine-overview) | Headless graph models, commands and undo, layout, diagram text and collaboration. | `npm install @grafloria/engine` |
| [`@grafloria/renderer`](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/grafloria-renderer-overview) | SVG rendering, interaction, theming, accessibility and SVG, PNG or vector PDF export. | `npm install @grafloria/renderer @grafloria/engine` |
| [`@grafloria/element`](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/grafloria-element-overview) | 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`](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/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`](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/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`](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/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`](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/grafloria-angular-overview) | 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`](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/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](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/javascript-quick-start): embed without a framework and keep the live instance for updates and cleanup.
- [React quick start](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/react-quick-start): use controlled node and edge state and an initialization ref.
- [Vue quick start](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/vue-quick-start): use typed data, `v-model` bindings and an initialization callback.
- [Angular quick start](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/angular-quick-start): use a standalone canvas, two-way model bindings and view-child access.
- [Qwik quick start](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/qwik-quick-start): use serializable signals, QRL change callbacks and initialization access.

To explore before installing, open the [live demo gallery](https://grafloria.com/demos/) or the [fluid dashboard demo](https://grafloria.com/demos/dashboard/fluid-board.html).

## Find your task

### Concepts

Start with [How Grafloria works](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/how-grafloria-works), then follow [specs and live models](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/specs-and-live-models), [instance lifetime](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/instance-and-lifecycle), [state and event flow](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/state-and-event-flow), [commands and history](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/commands-and-history), and [documents and kits](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/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](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/edit-nodes), [validate port connections](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/validate-port-connections), [route and label edges](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/route-and-label-edges), [configure gestures](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/configure-editing-gestures), and [add editor controls](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/add-editor-controls) to turn the canvas into an editor.
- **Layout and containment:** [lay out a diagram](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/lay-out-a-diagram) and [group and nest nodes](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/group-and-nest-nodes) to arrange graphs and give zones, containers and swimlanes real membership.
- **Appearance:** [theme a canvas](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/theme-a-canvas) and [highlight and animate state](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/highlight-and-animate-state) to adopt your design system and show graph state without changing graph structure.
- **Diagram editors:** build a [workflow editor](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/build-a-workflow-editor), [database model editor](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/edit-database-models), [UML class editor](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/edit-uml-classes), or [stencil editor](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/build-a-stencil-editor) using shipped capabilities.
- **Dashboards:** [build a dashboard](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/build-a-dashboard) and [arrange dashboard containers](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/arrange-dashboard-containers) to manage widgets, responsive layouts, nested sections and tabs.
- **Collaboration:** [synchronize editors](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/synchronize-editors) and [share presence and comments](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/share-presence-and-comments) to connect peers and add shared cursors and discussion.
- **Saving and export:** [save and restore documents](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/save-and-restore-documents), [import diagram text and files](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/import-diagram-text-and-files), and [export images and documents](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/export-images-and-documents) to persist the live graph and exchange editable or rendered results.
- **Whiteboarding and extensions:** [draw and edit ink](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/draw-and-edit-ink), [tune large-graph rendering](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/tune-large-graph-rendering), [extend rendered geometry](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/extend-rendered-geometry), and [extend layout execution](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/extend-layout-execution) when you need ink tools, rendering controls or capabilities beyond the built-ins.

### Framework guides

- **JavaScript:** [elements and content](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/javascript-elements-and-content) covers embedding choices, DOM events, custom renderers and framework-free lifecycle.
- **React:** [state and subscriptions](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/react-state-and-subscriptions) and [custom content](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/react-custom-content) cover controlled ownership, instance access, portals and widget components.
- **Vue:** [state and composables](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/vue-state-and-composables) and [slots and widgets](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/vue-slots-and-widgets) cover refs, providers, reactive content and dashboard views.
- **Angular:** [state and tooling](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/angular-state-and-tooling) and [templates and handles](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/angular-templates-and-handles) cover model bindings, incremental patches, editor services, node templates and connection handles.
- **Qwik:** [state and resumption](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/qwik-state-and-resumption) and [custom content and kits](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/qwik-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`](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/grafloria-renderer-instance-diagraminstance): it provides rendering and spec updates, `getModel()` for data queries, and `getEngine()` for engine access. The [Qwik Vite reference](https://bench-grafloria-61d.atloria.app/p/bench-grafloria-61d-mQCmWpDrxv/developer/grafloria-qwik-vite) covers that package's Vite entry point.