WP Manifestindependent plugin directory
manifest / seo / wordpress-link-graph

Link Graph Visualizer

Visualizes internal and external links between posts in a draggable graph using React Flow.

by Stoph · github.com/stoph/wordpress-link-graph

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/stoph/wordpress-link-graph/archive/refs/heads/main.zip
Readme github.com/stoph/wordpress-link-graph ↗

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