@radica/flow

Radica UI components for building dataflow-style diagrams with nodes and edges.

Overview

@radica/flow provides a set of web components for creating and editing dataflow-programming style diagrams. Nodes are positioned as HTML elements within a canvas, and edges are drawn with SVG for connections between ports.

Components

• rad-flow-canvas - The container that holds nodes and edges
• rad-flow-node - A draggable node that can contain any HTML content
• rad-flow-port - Input/output connection points on nodes
• rad-flow-edge - SVG-based connections between ports

Usage

<rad-flow-canvas>
  <rad-flow-node id="node-1" style="left: 100px; top: 50px;">
    <span slot="header">Input Node</span>
    <rad-flow-port slot="outputs" name="out"></rad-flow-port>
  </rad-flow-node>

  <rad-flow-node id="node-2" style="left: 400px; top: 100px;">
    <span slot="header">Output Node</span>
    <rad-flow-port slot="inputs" name="in"></rad-flow-port>
  </rad-flow-node>

  <rad-flow-edge from="node-1" from-port="out" to="node-2" to-port="in">
  </rad-flow-edge>
</rad-flow-canvas>

Design Principles

1. HTML-first rendering - Nodes are standard HTML elements positioned absolutely. This allows any HTML content inside nodes.

2. SVG for edges only - Edges are drawn with SVG (using perfect-arrows for bezier curves), minimizing SVG usage while enabling smooth connections.

3. Port-based connections - Nodes can have multiple input and output ports (similar to Quartz Composer or node-based visual programming tools).

4. Declarative graph structure - The graph can be represented entirely in HTML, making it easy to serialize/deserialize from other formats like JSON.

Installation

npm install @radica/flow

License

MIT