The Vue diagram library with the batteries included

Node editors and flow charts as Vue 3 components — v-model:nodes/v-model:edges, slot-based custom nodes (#node-<type>), provider composables. Underneath: obstacle-avoiding routing, ELK auto-layout, undo/redo, CRDT collaboration and SVG/PNG/PDF export. MIT, no Pro tier.

npm install @grafloria/vue @grafloria/renderer @grafloria/engine

Flow.vue

<script setup>
import { ref } from 'vue';
import { GrafloriaFlow } from '@grafloria/vue';

const nodes = ref([
  { id: 'a', type: 'job', position: { x: 0, y: 0 }, data: { title: 'Extract' } },
  { id: 'b', position: { x: 260, y: 0 }, label: 'Load' },
]);
const edges = ref([{ source: 'a', target: 'b' }]);
</script>

<template>
  <GrafloriaFlow v-model:nodes="nodes" v-model:edges="edges" layout="elk">
    <template #node-job="{ data }">
      <div class="job-card">{{ data.title }}</div>
    </template>
  </GrafloriaFlow>
</template>

live — the same engine this binding wraps, drag anything

rendering…

Why teams pick it

Idiomatic Vue 3

v-model for controlled nodes and edges, named slots per node type with full slot props, provider composables for selection and viewport — reads like every other Vue component you own.

The hard parts are library code

Obstacle-avoiding orthogonal routing with jump-overs, ELK/dagre/force layout in a worker, one-gesture-one-undo command history, drag-and-pack dashboard kit, UML/ER kits.

One engine, four surfaces

The identical JSON spec drives Vue, React, Angular and the plain web component — and the same model exports to Mermaid text, SVG, PNG and true-vector PDF, in the browser or in Node.

Coming from Vue Flow?

Vue Flow gives Vue developers the familiar React-Flow-style canvas and does it well. As with its sibling, the editor extras around it — automatic layout, undo, exports, collaboration — are yours to assemble. Grafloria ships them as MIT library features, with the same engine available if your team also touches React or Angular. Our broader field-by-field table is on the comparison page.

npm’s “unpacked size” is not what ships

npm’s unpacked size is uncompressed ESM source plus full TypeScript declarations. What your users download, measured worst-case — the entire public surface of @grafloria/vue, esbuild minify + splitting: 334 KB gzipped eager, with the ELK layout engine in a lazy chunk that downloads only if you invoke it. That covers the renderer, undo, export, Mermaid import and validation — about the cost of one charting library. Every package README carries a two-minute reproduction script.

Every demo, in your framework

The gallery is the documentation: every demo is a real, clickable page, and our CI drives each one with real pointer events so the examples can't rot — and each one available in this framework’s own idiom, source shown. Vue demos — every gallery page as a real SFC →

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.