Link Graph Visualizer

A WordPress plugin that visualizes internal and external links between posts in an interactive, draggable graph using React Flow.

✨ Features

• Interactive Graph Visualization - Drag, zoom, and pan through your content relationships
• React Flow v12 - Modern, performant graph visualization library
• Node Types - Visual distinction between root posts, internal links, and external links
• Real-time API - REST API endpoints for dynamic graph data
• WordPress Integration - Native admin interface with post selection

🚀 Quick Start

1. Upload the plugin to wp-content/plugins/link-graph/
2. Activate the plugin in WordPress Admin → Plugins
3. Navigate to Admin → Link Graph
4. Select any post from the dropdown
5. Explore the interactive graph with connected nodes

🛠 Development Setup

Prerequisites

• Node.js 18+ and npm
• WordPress installation
• PHP 8.2+

Build Process

cd wp-content/plugins/link-graph
npm install
npm run build    # Production build
npm run dev      # Development server

File Structure

wp-content/plugins/link-graph/
├── link-graph.php          # Main WordPress plugin file
├── api/                    # REST API endpoints
│   └── class-link-graph-api.php
├── src/                    # React source files
│   ├── app.jsx            # Main React component
│   └── style.css          # Custom styles
├── assets/                 # Built files (generated)
│   ├── app.js             # Bundled JavaScript (324KB)
│   └── app.css            # Bundled CSS (16.8KB)
├── package.json           # Dependencies
├── vite.config.js         # Build configuration
└── README.md              # This file

🔧 Technical Details

Stack

• WordPress Plugin API - Native WordPress integration
• React 18.3.1 - Modern React with hooks
• React Flow 12.7.1 - Latest graph visualization library
• REST API - Custom endpoints for graph data

Bundle Info

• Self-contained - No external CDN dependencies
• 324KB JavaScript bundle (includes React + React Flow)
• 16.8KB CSS bundle (includes React Flow styles)
• Production optimized - Minified and tree-shaken

API Endpoints

• GET /wp-json/post-graph/v1/links/{post_id}?depth={1|2} - Get graph data for a post

🎯 How It Works

1. Post Selection - Choose any post from the WordPress admin interface
2. API Call - Plugin fetches related posts via REST API
3. Graph Generation - React Flow renders nodes and edges
4. Interactive Display - Users can drag, zoom, and explore connections

Node Types

• Root Node (Blue border) - The selected starting post
• Internal Links (Green border) - Links to other posts on your site
• External Links (Red border) - Links to external websites

Graph Features

• Draggable Nodes - Click and drag to reposition
• Zoom Controls - Mouse wheel or control buttons
• Pan Navigation - Click and drag background
• Auto Layout - Automatic positioning with collision detection

Development Commands

npm run build          # Production build
npm run dev           # Development server
npm install           # Install dependencies

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

GPL v2 or later - WordPress standard license