A visualization tool for creating and displaying interactive graphs and networks. This project allows users to build, manipulate, and visualize graph data structures with an intuitive interface.
- Interactive graph creation and editing
- Visualization of data relationships
- Import and export functionality
- Customizable node and edge styling
- Responsive design for different screen sizes
- Create custom nodes with various shapes (rectangles, ellipses, circles)
- Drag and drop interface for node positioning
- Resize nodes to accommodate different content
- Custom labeling with text formatting options
- Color coding for different node types or categories
- Create directed and undirected connections between nodes
- Multiple edge styles (straight, curved, orthogonal)
- Add labels and weights to edges
- Customize line thickness and pattern (solid, dashed, dotted)
- Color coding for relationship types
- Import data from Excel spreadsheets (.xlsx files)
- Auto-generate graphs from tabular data
- Map columns to node properties and relationships
- Support for hierarchical data structures
- Export created graphs to various formats (PNG, SVG, JSON)
- Zoom in/out for detailed inspection or overview
- Pan across large graph networks
- Select and highlight connected nodes
- Search functionality to locate specific nodes
- Filter nodes and edges based on properties
- JointJS for graph visualization
- jQuery for DOM manipulation
- XLSX library for Excel file processing
- HTML5, CSS3, and JavaScript
- Clone the repository
- Open either
index.htmlorgraph_creator.htmlin a modern web browser - No build process is required as this is a client-side application
The Graph Creator provides a comprehensive interface for building custom graphs:
- Open
graph_creator.htmlin your browser - Use the sidebar panel to access node creation tools
- Click the "Add Node" button to create a new node on the canvas
- Customize node properties through the properties panel:
- Change shape, size, and color
- Add text labels or descriptions
- Set node ID and other metadata
- Select a source node by clicking on it
- Click the "Create Link" button
- Click on a target node to establish the connection
- Alternatively, drag from one node to another while holding the Shift key
- Customize the edge properties in the sidebar:
- Change line style, thickness, and color
- Add directional arrows
- Include edge labels or weights
- Click "Save Graph" to export your work as a JSON file
- Use "Load Graph" to import previously saved work
- The "Export as Image" option allows you to save as PNG or SVG
The main visualization tool offers powerful features for working with existing data:
- Prepare your Excel file with appropriate columns for nodes and relationships
- Click the "Import Data" button and select your file
- Use the mapping interface to connect spreadsheet columns to graph properties
- Click "Generate Graph" to create the visualization
- Use the mouse wheel to zoom in and out
- Click and drag on empty space to pan around the canvas
- Double-click on a node to focus and center it
- Use the minimap in the corner for orientation in large graphs
- Toggle the "Statistics" panel to view graph metrics
- Node count, edge count, graph density
- Centrality measures for important nodes
- Use "Find Path" to highlight the shortest path between two selected nodes
- Apply different layout algorithms through the "Layout" dropdown:
- Force-directed layout for natural clustering
- Hierarchical layout for organizational structures
- Circular layout for cyclic relationships
- Use the search bar to find specific nodes by name or property
- Apply filters based on node properties or relationship types
- Use the "Highlight Connected" feature to see all nodes connected to a selection
This project is licensed under the MIT License - see the LICENSE file for details.
- JointJS library (https://www.jointjs.com/)
- XLSX library for data processing