@vanduo-oss/flowchart

⚠️ Retired — 2026-07-25. @vanduo-oss/flowchart is no longer developed or released. The Vanduo legacy line (the dual-engine Vanilla + Vue 3 system) is retired; development continues in the perspective line. @vanduo-oss/vd3-cbun/flowchart is the successor. The final release, 1.1.0, stays on npm and keeps working — this is a stop to development, not a removal.

New docs: https://vanduo-oss.github.io/vd3-docs/ · Migration guide: https://vanduo-oss.github.io/vd3-docs/guides/migration

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