Feature Overview

An overview of what’s possible with Vue Flow, bringing together built-in node and edge types, sub flows, the <NodeToolbar /> and <NodeResizer /> components, plus the <Controls /> and <MiniMap /> at the bottom.


import type { CSSProperties } from 'vue';
import type { BuiltInNode, Node, NodeProps } from '@xyflow/vue';
 
export type AnnotationNodeData = {
  level: number;
  label: string;
  arrowStyle?: CSSProperties;
};
export type AnnotationNode = Node<AnnotationNodeData, 'annotation'>;
export type AnnotationNodeProps = NodeProps<AnnotationNode>;
 
export type ResizerNodeData = {
  label: string;
};
export type ResizerNode = Node<ResizerNodeData, 'resizer'>;
export type ResizerNodeProps = NodeProps<ResizerNode>;
 
export type ToolbarNodeData = {
  label?: string;
};
export type ToolbarNode = Node<ToolbarNodeData, 'tools'>;
export type ToolbarNodeProps = NodeProps<ToolbarNode>;
 
export type CircleNode = Node<Record<string, unknown>, 'circle'>;
export type CircleNodeProps = NodeProps<CircleNode>;
 
export type TextInputNode = Node<Record<string, unknown>, 'textinput'>;
export type TextInputNodeProps = NodeProps<TextInputNode>;
 
export type OverviewNode
  = | AnnotationNode
    | BuiltInNode
    | ToolbarNode
    | ResizerNode
    | CircleNode
    | TextInputNode;