Node Types

Flow provides several built-in node types to meet different business scenario requirements.

Node Type Overview

Flow includes the following built-in node types:

Type	Description	Use Case
`input`	Input Node	Entry point, data source
`output`	Output Node	Exit point, data destination
`default`	Default Node	General processing node
`diamond`	Diamond Node	Decision logic, branching
`database`	Data Node	Storage/DB representations
`custom`	Custom Node	Custom business node
`group`	Group Node	Container for nodes, area division

Basic Node Types

Input Node

Default Node

Decision Node

Database

Output Node

Basic Node Types

Node Data Structure

interface Node<Data = NodeData> {
  id: string
  type: string
  position: { x: number; y: number }
  data: Data
  style?: NodeStyle
  class?: string
  width?: number
  height?: number
  draggable?: boolean // Whether node is draggable
  selectable?: boolean // Whether node is selectable
  connectable?: boolean // Whether node is connectable
  resizable?: boolean // Whether to show resize handle
  deletable?: boolean // Whether node can be deleted
  selected?: boolean
  dragging?: boolean
  hidden?: boolean
  parentId?: string // Parent node ID for grouping
  zIndex?: number
  extent?: 'parent' // Movement range limit
  handleBounds?: any // Custom handle configurations
}

Input Node (input)

Input nodes have only one right-side connection handle, suitable for the start of a flow.

const node = {
  id: 'node-1',
  type: 'input',
  position: { x: 100, y: 100 },
  data: {
    label: 'Data Input',
    icon: 'upload'
  }
}

Output Node (output)

Output nodes have only one left-side connection handle, suitable for the end of a flow.

const node = {
  id: 'node-2',
  type: 'output',
  position: { x: 500, y: 100 },
  data: {
    label: 'Result Output',
    icon: 'download'
  }
}

Default Node (default)

Default nodes have handles on both left and right sides, suitable for middle processing nodes.

const node = {
  id: 'node-3',
  type: 'default',
  position: { x: 300, y: 100 },
  data: {
    label: 'Process Node',
    description: 'Execute some action'
  }
}

Diamond Node (diamond)

Diamond nodes are standard flowchart decision nodes with four active handles on each side.

const node = {
  id: 'node-4',
  type: 'diamond',
  position: { x: 300, y: 300 },
  data: {
    label: 'Is Approved?'
  }
}

Database Node (database)

Database nodes are represented as cylinders, perfect for architecture charts pointing to services.

const node = {
  id: 'node-5',
  type: 'database',
  position: { x: 100, y: 300 },
  data: {
    label: 'MySQL Target'
  }
}

Group Node (group)

Group nodes are used to combine multiple nodes together, commonly used to represent phases or areas in a process.

Phase One

Start

Process

Phase Two

Process

End

Group Node

Custom Nodes

Create nodes that fully meet your business needs using the custom type and your own components.

// Define custom node data
const customNode = {
  id: 'custom-1',
  type: 'custom',
  position: { x: 100, y: 100 },
  data: {
    label: 'Custom Node',
    icon: 'settings',
    status: 'success',
    actions: ['Edit', 'Delete']
  }
}

Creating a Custom Node Component

<template>
  <div class="custom-node" :class="{ selected: node.selected }">
    <div class="custom-node__header">
      <span class="custom-node__icon">{{ node.data.icon }}</span>
      <span class="custom-node__label">{{ node.data.label }}</span>
    </div>
    <div class="custom-node__body">
      <span :class="['status', node.data.status]">{{ node.data.statusText }}</span>
    </div>
  </div>
<\/template>

<script setup lang="ts">
import type { Node } from '@yh-ui/flow'
defineProps<{
  node: Node
}>()
<\/script>

<style scoped>
.custom-node {
  padding: 12px;
  border-radius: 8px;
  background: white;
  border: 1px solid #dcdfe6;
  min-width: 150px;
}
.custom-node.selected {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
<\/style>

Node Handles

Each node has preset connection handle positions:

Position	Description
left	Left connection handle
right	Right connection handle
top	Top connection handle
bottom	Bottom connection handle

Four-way Handles

Handles

Node Properties

Property	Type	Description
id	string	Unique identifier
type	string	Node type
position	{ x: number, y: number }	Node position
data	NodeData	Node data
width / height	number	Node dimensions
draggable	boolean	Draggable (default: true)
selectable	boolean	Selectable (default: true)
connectable	boolean	Connectable (default: true)
selected	boolean	Whether node is selected
dragging	boolean	Whether node is being dragged
hidden	boolean	Whether node is hidden
parentId	string	Parent node ID for grouping
zIndex	number	Layer order
handleBounds	object	Custom handle config

Next

• Edge Types - Learn about different edge types
• Interaction - Learn more about interaction features
• Alignment - Use alignment and distribution features