@vanduo-oss/flowchart

Standalone SVG flowchart editor for the Vanduo design system.

Nodes, port-guided edges with curve/straight/orthogonal routing, inline text editing, resize handles, and JSON import/export. Framework-agnostic, with an optional Vue 3 component.

Install

pnpm add @vanduo-oss/flowchart

Quick start

import { VdFlowchart } from "@vanduo-oss/flowchart";
import "@vanduo-oss/flowchart/css";

const editor = new VdFlowchart({
  element: document.getElementById("flowchart"),
  data: {
    nodes: [{ id: "start", type: "circle", x: 80, y: 80, text: "Start" }],
    edges: [],
  },
});

editor.addNode({ type: "diamond", text: "Approved?" });
const snapshot = editor.toJSON();

Auto-init: add data-vd-flowchart and call Vanduo.init(). Vue 3 (optional peer):

<VdFlowchart :data="doc" @change="onChange" />

Documentation

• Docs & live demos — https://vanduo.dev
• Agent / LLM reference (full class API, events, node/edge schema) — SKILL.md
• Changelog — CHANGELOG.md

License

MIT © Vanduo