The JavaScript diagram library — no framework required

One custom element: JSON attributes in, a fully interactive canvas out — drag, connect, undo, export. No build step required, works in any page, any stack, or no stack. The same MIT engine that powers the React, Angular and Vue bindings.

npm install @grafloria/element

index.html

<script type="module">
import '@grafloria/element';
</script>

<grafloria-flow theme="light" fit-view
  nodes='[{"id":"a","position":{"x":0,"y":0},"label":"Extract"},
          {"id":"b","position":{"x":220,"y":0},"label":"Load"}]'
  edges='[{"source":"a","target":"b"}]'>
</grafloria-flow>

<script>
  // rich data goes in as properties; events come out as DOM events
  const el = document.querySelector('grafloria-flow');
  el.addEventListener('grafloria-connect', (e) => console.log(e.detail.link));
</script>

live — the same engine this binding wraps, drag anything

rendering…

Why teams pick it

The standard custom-element contract

Simple data on attributes, rich data as properties, DOM events out, <template data-node-type> for custom nodes — the contract every framework’s template binding already targets, and every future framework will.

Kits speak JSON too

Hand the same element an erDiagram, umlDiagram or dashboard spec and it renders interactive table cards, class cards or a drag-and-pack grid — plus Mermaid and .drawio text import.

Headless when you need it

The engine underneath runs in plain Node — server-side SVG/PNG/PDF export, byte-identical to the browser render. Same model, no DOM, no headless-browser gymnastics.

Coming from Drawflow or JointJS core?

Drawflow is wonderfully small and JointJS’s MPL core is genuinely capable — both leave layout, undo and export to you, and JointJS keeps the editor chrome for its commercial tier. Grafloria’s element ships the whole editor surface MIT. The sourced table is on the comparison page.

Every demo, in your framework

The gallery is the documentation: 111 runnable pages, each executed in CI with real pointer events — and each one available in this framework’s own idiom, source shown. The full gallery — 111 plain-JS demos, view-source is the tutorial →

Open the demos Get the packages

Grafloria is MIT — every feature, no commercial tier. React, Next.js, Angular, Vue, React Flow, Vue Flow, ngx-vflow, JointJS and Drawflow are trademarks of their respective owners; comparative references only, no affiliation implied. Corrections welcome via GitHub issues.