Searchlight
Tools
BlogAbout
Free SEO Audit
Back to home
📈SEO & Analytics
🗂️Text & Data
🔐Encoders & Decoders
⚡Generators
🔄Converters
🖼️Image Tools
📄PDF Tools
💻Code Tools
🔍Regex & Parsing
🧮Calculators
🗺️Diagrams
Mind MapFlowchartUML DiagramsSketch DiagramER DiagramGantt ChartFunction PlotterJSON TreeNetwork Graph
🌐Network & Web
✍️Text Utilities
🎨Color Tools
🔀Diff & Compare
148+ tools. OAuth is read-only.
Searchlight

148+ free SEO, developer, image, PDF, and productivity tools - no account needed.

Free · all tools included
Company
  • Blog
  • About
  • Free SEO Audit
Legal
  • Privacy Policy
  • Terms of Service
  • Cookie Policy

© 2026 Searchlight. All rights reserved.

Read-only OAuth · No data reselling · Completely free

Network Graph

Visualise relationships between nodes with a live force-directed graph. Drag nodes to rearrange.

Add Node
Add Edge
Graph
5 nodes · 5 edges
React
Next.js
Node.js
Tailwind
TypeScript

About this tool

Visualise relationships between entities as an interactive network graph. Add nodes and edges, set labels and weights, choose layout algorithms (force-directed, circular, hierarchical), and highlight clusters. Export as SVG or PNG. Used for social network analysis, dependency graphs, knowledge graphs, and data relationship mapping.

How to Visualise a Network Graph

  1. 1Add nodes by clicking the canvas or importing a CSV/JSON file.
  2. 2Connect nodes by dragging from one node to another.
  3. 3Set edge weights if relationships have different strengths.
  4. 4Choose a layout algorithm: force-directed shows clusters naturally.
  5. 5Enable community detection to colour-code connected groups.
  6. 6Export as SVG for presentations or publications.

Frequently Asked Questions

What is a force-directed layout?+
Force-directed layout simulates physics: nodes repel each other like charged particles while edges act as springs pulling connected nodes together. The result is a natural-looking graph where connected groups cluster together.
What is the difference between directed and undirected graphs?+
Directed graphs have arrows showing one-way relationships (A influences B). Undirected graphs show mutual relationships with lines (A is connected to B, bidirectionally). Social friendships are undirected; web links are directed.
How do I highlight clusters in a network graph?+
Enable community detection (Louvain or modularity algorithms) to automatically group nodes into clusters and colour them by community. This reveals hidden structure in large graphs.
What data format does the tool accept?+
JSON node/edge lists, CSV adjacency matrices, or GraphML. Node CSV needs columns: id, label. Edge CSV needs columns: source, target, and optionally weight.
Looking for a deeper guide on this topic? Browse the Searchlight blog.
Visit the blog →

Related tools

View all Diagrams →
Mind MapInteractive mind map editor (markmap)FlowchartFlowchart & sequence diagrams via MermaidUML DiagramsClass, sequence & activity diagramsSketch DiagramFreehand whiteboard - shapes, arrows, text