Node and Edge Editing
Flow supports visual editing of nodes and edges. Double-click a node or an edge to open the editing panel and modify its properties.
Features
- Node editing: Double-click a node to open the panel; edit label, description, size, background color, border color, border radius, etc.
- Edge editing: Double-click an edge to open the panel; edit label, edge type, color, width, animation, etc.
- Undo/Redo: Editing changes are recorded in history.
Basic Usage
Double-click any node or edge in the flowchart below. The editing panel will open on the right where you can change labels, styles, and other properties. The demo uses v-model:nodes and v-model:edges so that edits stay in sync with the parent.
Node & Edge Editing
Node Editing Panel
After double-clicking a node, the node editing panel appears on the right with:
| Property | Description |
|---|---|
| Label | Text displayed on the node |
| Description | Node description |
| Size | Width and height |
| Background Color | Node background color |
| Border Color | Node border color |
| Border Radius | Corner radius |
Edge Editing Panel
After double-clicking an edge, the edge editing panel appears on the right with:
| Property | Description |
|---|---|
| Label | Text on the edge |
| Edge Type | bezier, smoothstep, step, straight |
| Animated Edge | Enable flow animation |
| Stroke Color | Edge color |
| Stroke Width | Edge thickness |
| Show Label Background | Toggle label background |
|---|---|
| Label Background Color | Label background color |
Readonly Mode
In readonly mode, double-clicking nodes or edges does not open the editing panel.
vue
<yh-flow :nodes="nodes" :edges="edges" readonly />Notes
- Editing is enabled by default; no extra configuration is required.
- Changes are stored in history and support undo/redo.
- Editing is disabled when the flow is readonly.
- The editing panel is fixed on the right side of the page.
Related
- Quick Start - Flow basics
- Built-in Nodes - Node types
- Edges & Connections - Edge types