Node Types

FlowDrop ships with 8 built-in node types, each designed for specific workflow patterns.

Built-in Types

Type	Purpose	Description
default	Full-featured nodes	Input/output port lists, icon, label, description
simple	Compact layout	Header with icon and description, space-efficient
square	Icon-only	Minimal design for simple operations
tool	AI agent tools	Tool metadata with badge label
gateway	Branching logic	Conditional output paths with multiple branches
terminal	Start/end points	Circular nodes for workflow entry and exit
idea	Conceptual flow	BPMN-like flow nodes for conceptual diagrams
note	Documentation	Markdown-enabled sticky notes (no execution)

For the complete JSON structure, see Node Structure. For port definitions and data types, see Port System & Data Types.

default

Full-featured node with input/output port lists, icon, label, and description. Suitable for most workflow steps.

simple

Compact layout with header icon and description. Space-efficient for nodes that don’t need visible ports.

square

Icon-only minimal design. Ideal for simple operations where the icon alone conveys the purpose.

tool

Designed for AI agent tools. Displays tool metadata including version, badge label, and description.

gateway

Branching logic node with conditional output paths. Supports multiple branches for routing workflow execution.

terminal

Circular start/end point nodes. Used to mark workflow entry and exit points.

idea

Conceptual idea node for BPMN-like flow diagrams. Lightweight node with a colored top border accent.

note

Markdown-enabled sticky notes for documentation. These are non-executing nodes meant for annotations.

Connection Validation

FlowDrop validates connections automatically:

• Type compatibility — only compatible port data types can connect
• Cycle detection — prevents circular dependencies (O(V+E) algorithm)
• Loopback prevention — nodes cannot connect to themselves

Proximity Connect

When dragging a node near compatible ports, FlowDrop can auto-connect them. This is configurable via editor settings:

const app = await mountFlowDropApp(container, {
  features: {
    proximityConnect: true,
    proximityConnectDistance: 50 // pixels
  }
});

Dynamic Ports

Nodes can define user-configurable ports through special config properties:

{
  "dynamicInputs": {
    "type": "array",
    "title": "Input Ports",
    "items": {
      "type": "object",
      "properties": {
        "id": { "type": "string", "title": "Port ID" },
        "name": { "type": "string", "title": "Port Name" },
        "dataType": { "type": "string", "title": "Data Type", "default": "any" }
      }
    }
  }
}

Custom Node Types

Beyond the built-in types, you can register custom Svelte components as node types. See the Custom Nodes guide for details.