SunGraph - Beautiful Graph Visualization for React

Inspired by swimlane/ngx-graph, SunGraph is a powerful React component for creating beautiful, interactive graph visualizations. Build stunning flowcharts, organizational charts, network diagrams, and more with minimal effort.

✨ Features

• 🎨 Beautiful Visualizations - Create stunning graph visualizations out of the box
• 🎯 Interactive - Zoom, pan, and drag nodes with smooth interactions
• 🧩 Customizable - Create custom node templates with full React component support
• 📐 Flexible Layouts - Use built-in layouts or create your own positioning algorithms
• 🎭 Custom Styling - Full control over node and edge styling
• 📦 TypeScript Support - Fully typed with comprehensive type definitions
• 🚀 Performance - Optimized for large graphs

📚 Documentation

• Setup Guide - Installation and quick start
• API Documentation - Complete API reference
• Live Demo - Interactive examples
• Portal Examples - Source code of example implementations

🚀 Quick Start

Installation

Install SunGraph using npm or yarn:

npm install sun-graph
# or
yarn add sun-graph

Basic Usage

import React from 'react';
import { SunGraph } from 'sun-graph';
import { Node, Edge, Graph } from 'sun-graph/graph.model';
import { CustomDagreLayout } from 'sun-graph/layout.model';

function MyGraph() {
  const nodes: Node[] = [
    { id: '1', label: 'Node A', width: 100, height: 100 },
    { id: '2', label: 'Node B', width: 100, height: 100 },
    { id: '3', label: 'Node C', width: 100, height: 100 }
  ];

  const edges: Edge[] = [
    { source: '1', target: '2' },
    { source: '2', target: '3' }
  ];

  const graph: Graph = { nodes, edges };

  return (
    <div style={{ width: '100%', height: '600px' }}>
      <SunGraph
        graph={graph}
        layout={new CustomDagreLayout()}
        autoCenter={true}
      />
    </div>
  );
}

export default MyGraph;

📖 Full Documentation Structure

For Quick Learning

1. Start with the Setup Guide
2. Try the examples in the Portal
3. Explore the API Documentation for detailed reference

Core Concepts

Nodes

Represent entities in your graph. Each node can have:

• Custom styling via templates
• Custom data
• Automatic positioning
• Interaction handlers

Edges

Connections between nodes. Features include:

• Custom labels and styling
• Automatic path calculation
• Custom rendering

Layouts

Algorithms that position nodes. SunGraph includes:

• CustomDagreLayout - Hierarchical layout (default)
• Create your own by implementing the Layout interface

🎨 Examples

Organization Chart

See docs/SETUP.md for a complete organization chart example.

Network Diagram

See docs/SETUP.md for network visualization with custom styling.

Custom Templates

Define custom node rendering:

const customNode: Node = {
  id: 'custom-1',
  width: 150,
  height: 100,
  template: (node) => (
    <div style={{
      width: '100%',
      height: '100%',
      background: 'linear-gradient(135deg, #667eea, #764ba2)',
      borderRadius: '10px',
      color: 'white',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      <strong>{node.label}</strong>
    </div>
  )
};

🛠️ Development

Installation

npm install

Start Development Server

npm start

Build for Production

Build the library:

npm run buildPackage

Build the documentation site:

npm run buildDocs

Run Tests

npm test

📦 Installation from Package Template

The package includes TypeScript definitions and a ready-to-use template:

npm install sun-graph

Then import:

import { SunGraph } from "sun-graph";
import { Node, Edge, Graph } from "sun-graph/graph.model";
import { Layout } from "sun-graph/layout.model";

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Related Projects

• swimlane/ngx-graph - The original Angular version that inspired this project
• Dagre - Graph layout library used by CustomDagreLayout
• D3 - Used for curve calculations

📞 Support

For issues, questions, or feature requests, please open an issue on GitHub.