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.

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. 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.