Justin Clark

Posted on Jan 19

Getting Started with Flowchart React: Creating Flowcharts in React

#webdev #javascript #react #programming

Flowchart React is a React library for creating interactive flowcharts and diagrams. It provides components for building node-based visualizations with connections, making it easy to create process flows, decision trees, and organizational charts. This guide walks through setting up and creating flowcharts using Flowchart React with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React components
Familiarity with JavaScript/TypeScript

Installation

Install Flowchart React using your preferred package manager:

npm install flowchart-react

Or with yarn:

yarn add flowchart-react

Or with pnpm:

pnpm add flowchart-react

After installation, your package.json should include:

{
  "dependencies": {
    "flowchart-react": "^1.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Flowchart React requires minimal setup. Import the components and you're ready to use them.

First Example / Basic Usage

Let's create a simple flowchart. Create a new file src/FlowchartExample.jsx:

// src/FlowchartExample.jsx
import React from 'react';
import { Flowchart } from 'flowchart-react';

function FlowchartExample() {
  const nodes = [
    { id: '1', text: 'Start', x: 100, y: 50 },
    { id: '2', text: 'Process', x: 100, y: 150 },
    { id: '3', text: 'End', x: 100, y: 250 }
  ];

  const connections = [
    { from: '1', to: '2' },
    { from: '2', to: '3' }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Flowchart Example</h2>
      <Flowchart
        nodes={nodes}
        connections={connections}
        style={{ width: '100%', height: '400px' }}
      />
    </div>
  );
}

export default FlowchartExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import FlowchartExample from './FlowchartExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <FlowchartExample />
    </div>
  );
}

export default App;

This creates a basic flowchart with three nodes connected in sequence.

Understanding the Basics

Flowchart React provides flowchart components:

Flowchart component: Main flowchart container
Nodes array: Array of node objects with id, text, x, y
Connections array: Array of connection objects with from and to
Interactive: Drag and drop, zoom, pan
Customizable: Custom node shapes and styles

Key concepts:

Node structure: Objects with id, text, and position (x, y)
Connection structure: Objects with from and to node IDs
Positioning: Use x and y coordinates for node placement
Styling: Customize node and connection appearance
Interactivity: Built-in drag and drop functionality

Here's an example with a decision flowchart:

// src/DecisionFlowchartExample.jsx
import React from 'react';
import { Flowchart } from 'flowchart-react';

function DecisionFlowchartExample() {
  const nodes = [
    { id: '1', text: 'Start', x: 200, y: 50, shape: 'rectangle' },
    { id: '2', text: 'Decision?', x: 200, y: 150, shape: 'diamond' },
    { id: '3', text: 'Yes Path', x: 100, y: 250, shape: 'rectangle' },
    { id: '4', text: 'No Path', x: 300, y: 250, shape: 'rectangle' },
    { id: '5', text: 'End', x: 200, y: 350, shape: 'rectangle' }
  ];

  const connections = [
    { from: '1', to: '2' },
    { from: '2', to: '3', label: 'Yes' },
    { from: '2', to: '4', label: 'No' },
    { from: '3', to: '5' },
    { from: '4', to: '5' }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Decision Flowchart Example</h2>
      <Flowchart
        nodes={nodes}
        connections={connections}
        style={{ width: '100%', height: '500px' }}
      />
    </div>
  );
}

export default DecisionFlowchartExample;

Practical Example / Building Something Real

Let's build a process workflow flowchart:

// src/ProcessFlowchart.jsx
import React, { useState } from 'react';
import { Flowchart } from 'flowchart-react';

function ProcessFlowchart() {
  const [selectedNode, setSelectedNode] = useState(null);

  const nodes = [
    { id: '1', text: 'Start', x: 200, y: 50, shape: 'ellipse' },
    { id: '2', text: 'Input Data', x: 200, y: 150, shape: 'parallelogram' },
    { id: '3', text: 'Validate', x: 200, y: 250, shape: 'diamond' },
    { id: '4', text: 'Process', x: 100, y: 350, shape: 'rectangle' },
    { id: '5', text: 'Error Handler', x: 300, y: 350, shape: 'rectangle' },
    { id: '6', text: 'Output', x: 200, y: 450, shape: 'parallelogram' },
    { id: '7', text: 'End', x: 200, y: 550, shape: 'ellipse' }
  ];

  const connections = [
    { from: '1', to: '2' },
    { from: '2', to: '3' },
    { from: '3', to: '4', label: 'Valid' },
    { from: '3', to: '5', label: 'Invalid' },
    { from: '4', to: '6' },
    { from: '5', to: '6' },
    { from: '6', to: '7' }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '1000px', margin: '0 auto' }}>
      <h1>Process Workflow</h1>
      {selectedNode && (
        <div style={{
          padding: '10px',
          backgroundColor: '#f8f9fa',
          borderRadius: '4px',
          marginBottom: '20px'
        }}>
          Selected: {selectedNode.text}
        </div>
      )}
      <Flowchart
        nodes={nodes}
        connections={connections}
        style={{ width: '100%', height: '700px', border: '1px solid #ddd', borderRadius: '4px' }}
        onNodeClick={(node) => setSelectedNode(node)}
      />
    </div>
  );
}

export default ProcessFlowchart;

Now create an organizational chart:

// src/OrgChart.jsx
import React from 'react';
import { Flowchart } from 'flowchart-react';

function OrgChart() {
  const nodes = [
    { id: '1', text: 'CEO', x: 300, y: 50 },
    { id: '2', text: 'CTO', x: 150, y: 150 },
    { id: '3', text: 'CFO', x: 300, y: 150 },
    { id: '4', text: 'COO', x: 450, y: 150 },
    { id: '5', text: 'Dev Lead', x: 100, y: 250 },
    { id: '6', text: 'QA Lead', x: 200, y: 250 },
    { id: '7', text: 'Finance Manager', x: 300, y: 250 },
    { id: '8', text: 'Operations Manager', x: 450, y: 250 }
  ];

  const connections = [
    { from: '1', to: '2' },
    { from: '1', to: '3' },
    { from: '1', to: '4' },
    { from: '2', to: '5' },
    { from: '2', to: '6' },
    { from: '3', to: '7' },
    { from: '4', to: '8' }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Organizational Chart</h2>
      <Flowchart
        nodes={nodes}
        connections={connections}
        style={{ width: '100%', height: '400px', border: '1px solid #ddd', borderRadius: '4px' }}
      />
    </div>
  );
}

export default OrgChart;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ProcessFlowchart from './ProcessFlowchart';
import OrgChart from './OrgChart';
import './App.css';

function App() {
  return (
    <div className="App">
      <ProcessFlowchart />
      <OrgChart />
    </div>
  );
}

export default App;

This example demonstrates:

Process workflows
Decision trees
Organizational charts
Interactive features
Custom node shapes
Connection labels

Common Issues / Troubleshooting

Flowchart not displaying: Make sure you're importing Flowchart correctly from 'flowchart-react'. Check that nodes and connections arrays are properly formatted.
Nodes not showing: Ensure nodes have id, text, x, and y properties. Check that coordinates are within the visible area.
Connections not working: Verify that connection from and to IDs match node IDs. Check for typos in node IDs.
Styling issues: Customize node and connection styles through component props. Use shape property for different node shapes.
Positioning issues: Adjust x and y coordinates to position nodes. Use larger coordinate values for more spacing.
Interactive not working: Check that onNodeClick and other event handlers are properly configured. Ensure the component supports the events you're using.

Next Steps

Now that you have a basic understanding of Flowchart React:

Explore all available node shapes
Learn about advanced configurations
Add custom styling
Implement drag and drop
Create complex workflows
Learn about other flowchart libraries
Check the official repository: https://github.com/joyceworks/flowchart-react

Summary

You've successfully set up Flowchart React in your React application and created process flowcharts, decision trees, and organizational charts. Flowchart React provides a simple solution for creating interactive flowcharts with minimal configuration.

SEO Keywords

flowchart-react
React Flowchart
flowchart-react tutorial
React diagram library
flowchart-react installation
React process flow
flowchart-react example
React decision tree
flowchart-react setup
React organizational chart
flowchart-react customization
React flowchart component
flowchart-react workflow
React diagram visualization
flowchart-react getting started

DEV Community