FlowGram.AI
Guide
Examples
Common APIs
API Documentation
Guide
Examples
Common APIs
API Documentation

Port

Define Ports

  • Static Ports

Add defaultPorts to node declaration, such as { type: 'input' }, which will add an input port to the left side of the node

node-registries.ts
{
  type: 'start',
  meta: {
    defaultPorts: [{ type: 'output' }, { type: 'input'}]
  },
}
  • Dynamic Ports

Add useDynamicPort to node declaration, when set to true it will look for DOM elements with data-port-id and data-port-type attributes as ports

node-registries.ts
{
  type: 'condition',
  meta: {
    defaultPorts: [{ type: 'input'}]
    useDynamicPort: true
  },
}


/**
* Dynamic ports are found through querySelectorAll('[data-port-id]')
 */
function BaseNode() {
  return (
    <div>
      <div data-port-id="condition-if-0" data-port-type="output"></div>
      <div data-port-id="condition-if-1" data-port-type="output"></div>
      {/* others */}
    </div>
  )
}

Port Rendering

Ports are ultimately rendered through the WorkflowPortRender component, supporting custom styles, or businesses can reimplement this component based on the source code, see Free Layout Best Practices - Node Rendering

Custom Port Colors

You can customize port colors by passing color props to WorkflowPortRender:

  • primaryColor - Active state color (when linked or hovered)
  • secondaryColor - Default state color
  • errorColor - Error state color
  • backgroundColor - Background color

import { WorkflowPortRender, useNodeRender } from '@flowgram.ai/free-layout-editor';

function BaseNode() {
  const { ports } = useNodeRender();
  return (
    <div>
      <div data-port-id="condition-if-0" data-port-type="output"></div>
      <div data-port-id="condition-if-1" data-port-type="output"></div>
      {ports.map((p) => (
        <WorkflowPortRender
          key={p.id}
          entity={p}
          className="xxx"
          style={{ /* custom style */}}
          // Custom port colors
          primaryColor="#4d53e8"        // Active state color (linked/hovered)
          secondaryColor="#9197f1"      // Default state color
          errorColor="#ff4444"          // Error state color
          backgroundColor="#ffffff"     // Background color
        />
      ))}
    </div>
  )
}

Get Port Data

const ports = node.getData(WorkflowNodePortsData)

console.log(ports.inputPorts) // Get all input ports of the current node
console.log(ports.outputPorts) // Get all output ports of the current node

console.log(ports.inputPorts.map(port => port.availableLines)) // Find connected lines through ports

ports.updateDynamicPorts() // When dynamic ports modify DOM structure or position, you can manually refresh port positions through this method (DOM rendering has delay, best to execute in useEffect or setTimeout)