sun-graph

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

• Start with the Setup Guide
• Try the examples in the Portal
• 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.