GraphX is a small interactive graph explorer for Node-Link JSON and Graphviz DOT files. It uses the @memgraph/orb rendering library to visualize graphs with optional force-directed physics.
This project started because I needed a lightweight tool to visualize graphs produced with NetworkX and to inspect node/edge properties in the UI the way Memgraph Lab allows — quick access to attributes, connected relationships, and an interactive force layout for exploration.
- Load graphs from Node-Link JSON and Graphviz DOT
- Interactive pan & zoom, node/edge selection, and attribute inspection
- Force-directed layout (physics)
- Auto-fit view on load and after simulation ends
- Node.js (for running the dev server and building with Vite)
- Install dependencies (optional, needed for the Vite dev server):
npm install
- Start development server (Vite):
npm run dev
- Open a browser at
http://localhost:5173(or the port shown in the terminal) to view the app.
- Drag-and-drop a graph file into the main area or use the "Load file" button.
- Example data is available via sidebar buttons:
examples/nodelink.jsonandexamples/graphviz.dot. - Controls in the header:
Fit viewbutton andPhysicstoggle. - Click a node or edge to see attributes in the details panel.
- Node-Link JSON: JSON object with
nodes(array of node objects withid,label, optionaltypeand attributes) andlinks/edges(objects withsource/targetor equivalent fields). This format is compatible with NetworkX'snode_link_dataexport (see https://networkx.org/documentation/stable/reference/readwrite/generated/networkx.readwrite.json_graph.node_link_data.html). - Graphviz DOT: lightweight parser supports node/edge declarations and attribute lists in square brackets (e.g.
a -> b [label="..."]).
This project uses @memgraph/orb for rendering.
I was able to create this project thanks to AI agents, Codex and Copilot, which did a lot in terms of writing code, where I only had to provide guidance and review the results.