ChartFlow

A TypeScript library for creating animated, interactive data flow diagrams with real-time updates. Visualize complex data pipelines, state transitions, and workflow processes with smooth animations and user interaction.

Installation

npm install chartflow

Quick Start

import { FlowChart, FlowNode, FlowEdge } from 'chartflow';

// Create a new flow chart
const chart = new FlowChart({
  container: '#chart-container',
  theme: 'default',
  animationDuration: 300
});

// Add nodes
const nodeA = new FlowNode({
  id: 'input',
  label: 'Data Input',
  position: { x: 100, y: 100 },
  type: 'source'
});

const nodeB = new FlowNode({
  id: 'process',
  label: 'Transform',
  position: { x: 300, y: 100 },
  type: 'processor'
});

// Connect nodes with animated edge
const edge = new FlowEdge({
  source: 'input',
  target: 'process',
  animated: true
});

// Add to chart
chart.addNode(nodeA);
chart.addNode(nodeB);
chart.addEdge(edge);

// Render the chart
chart.render();

Real-time Updates

// Update node data in real-time
chart.updateNodeData('process', {
  status: 'processing',
  progress: 75
});

// Listen for node interactions
chart.onNodeClick((node) => {
  console.log('Node clicked:', node.id);
});

Features

• Animated Flow Diagrams: Smooth transitions and animated data flow
• Real-time Data Binding: Update diagrams dynamically with live data
• Customizable Themes: Built-in themes and custom styling options
• Interactive Elements: Click, hover, and drag interactions
• TypeScript Support: Full type safety and IntelliSense

Development

# Install dependencies
npm install

# Build the library
npm run build

# Run in development mode
npm run dev

# Run linting
npm run lint

License

MIT