Overview

At its core, Vue Flow is about creating interactive graphs we call flows. A flow is a collection of nodes connected by edges, and while this sounds simple in theory, Vue Flow provides the foundation for building complex diagrams and rich interactive experiences:

• An infinite, interactive canvas for your flowgraph

• The ability to render and connect nodes with edges

• Everything is built using standard Vue components

To help you understand the terminology we use throughout the documentation, take a look at the example flow below:

Nodes

For basic applications, Vue Flow has a handful of default node types available out of the box. These let you quickly create simple diagrams with labelled nodes and edges or prototype an experience. The built-in node types are:

• "default" for a node with both a source (aka output) and target (aka input) handle.

• "input" for a node with just a source handle.

• "output" for a node with only a target handle.

• "group" to act as a selectable container for multiple nodes.

Vue Flow’s real power comes from the ability to define custom nodes. Custom nodes are just Vue components and allow you to embed interactive form controls, display dynamic data visualizations, or incorporate more-complex nodes with multiple connection handles directly into the flow.

We have a guide on creating your own custom nodes and you can find all the options for customizing your nodes in the Node reference.

Handles

A handle (sometimes known as a “port” in other libraries) is the attachment point where an edge connects to a node. By default, they appear as grey circles on the top, bottom, left, or right sides of a node. But they are just <div /> elements, and can be positioned and styled any way you’d like. When creating a custom node, you can include as many handles as needed. For more information, refer to the Handle guide.

Edges

Edges connect nodes. Every edge needs a target and a source node. Vue Flow comes with five built-in edge types: default (bezier), smoothstep, step, straight, and simplebezier. An edge is an SVG path that can be styled with CSS and is completely customizable. If you are using multiple handles, you can reference them individually to create multiple connections for a node.

Like custom nodes, you can also customize edges. Things that people do with custom edges include:

• Adding buttons to remove edges
• Custom routing behavior
• Complex styling or interactions that cannot be solved with just one SVG path

For more information, refer to the Edges page.

Selection

You can select an edge or a node by clicking on it. If you want to select multiple nodes/edges via clicking, you can hold the Meta/Control key and click on multiple elements to select them. If you want to change the keyboard key for multiselection to something else, you can use the multiSelectionKeyCode prop.

You can also select multiple edges/nodes by holding down Shift and dragging the mouse to make a selection box. When you release the mouse, any node or edge that falls within the selection box is selected. If you want to change the keyboard key for this behavior, you can use the selectionKeyCode prop.

Selected nodes and edges are elevated (assigned a higher zIndex than other elements), so that they are shown on top of all the other elements.

For default edges and nodes, selection is shown by a darker stroke/border than usual. If you are using a custom node/edge, you can use the selected prop to customize selection appearance inside your custom component.

Connection line

Vue Flow has built-in functionality that allows you to click and drag from one handle to another to create a new edge. While dragging, the placeholder edge is referred to as a connection line. The connection line comes with the same built-in types as edges and is customizable. You can find the props for configuring the connection line in the connection props reference.

Viewport

All of Vue Flow is contained within the viewport. Each node has an x- and y-coordinate, which indicates its position within the viewport. The viewport has x, y, and zoom values. When you drag the pane, you change the x and y coordinates. When you zoom in or out, you alter the zoom level. You can read more about the viewport in the Viewport page.