Flowchart

Vanduo Flowchart is a standalone SVG flowchart editor, installed separately from the framework. Drag from the palette, connect ports, edit text inline, and export/import JSON. It ships an optional Vue 3 binding (@vanduo-oss/vd3-cbun/flowchart) used here.

Editor

API Reference

Install

pnpm add @vanduo-oss/vd3-cbun

Usage

<script setup lang="ts">
import { VdFlowchart } from '@vanduo-oss/vd3-cbun/flowchart';

const doc = {
  nodes: [{ id: 'a', type: 'rounded-rect', x: 80, y: 80, text: 'Step' }],
  edges: [],
};
</script>

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

Component API

Prop / event	Description
`:data`	Flowchart document ({ nodes, edges }); updates flow through the editor's load().
`:readonly`	Render as a non-editable viewer.
`:gridSize`	Background grid size in px.
`@change / @select / @viewport / @connect`	Forwarded editor events.
`@ready`	Emitted once with the underlying VdFlowchart instance.

Node Types

Type	Use
`rounded-rect`	Primary flow step
`rect`	Sharp process block
`diamond`	Decision
`circle`	Start or end state
`textbox`	Notes or descriptive payload
`label`	Free text annotation
`junction`	Fixed-size branch or merge point

Events

Event	Description
`change`	Document mutated (add/move/edit). Resize completion fires with reason: 'node:resize'.
`select`	Selection changed; payload carries the selection snapshot.
`viewport`	Pan/zoom changed.
`connect`	A pointer-created edge connected two ports.