json-to-graph

Paste JSON, get an interactive graph.

Try it online →

---

• Renders nested graphs (compound nodes, "a graph inside a graph") with Cytoscape.js and ELK layouts: layered, tree and force.
• Edit the JSON on the left — the graph updates as you type.
• Click a node or an edge to inspect its data; pan and zoom to navigate.
• Load data from any URL with the ?data= parameter.
• Export the graph as a PNG.
• No account, no tracking, no storage: everything stays in the browser tab.

Data format

Cytoscape.js elements JSON: an array of elements, or an object with nodes / edges arrays. Use parent on a node's data to nest it inside another node.

{
  "nodes": [
    { "data": { "id": "a", "label": "Node A" } },
    { "data": { "id": "b", "label": "Node B", "parent": "group" } },
    { "data": { "id": "group", "label": "A group" } }
  ],
  "edges": [
    { "data": { "source": "a", "target": "b", "label": "a → b" } }
  ]
}

Optional per-node color sets the node border color. See data/trace.json for a bigger example with nested nodes.

Examples

Pick one from the Examples menu in the app, or open a demo link below. Together they cover the range of shapes the tool handles — from a tiny flow to a large, dense map:

Example	Case it shows	Demo
Support ticket	Simple — a small ticket lifecycle with a reopen loop	open
Distributed trace	Rich data — spans and calls carrying large data payloads (attributes, inputs/outputs, an error with a stack); click a node to explore	open
Microservices map	Very big — ~80 services in 10 domains with ~140 dependencies	open
Org chart	Deeply nested — company → divisions → departments → teams → people (5 levels of compounds)	open
Map-reduce	Very distributed — wide fan-out to 24 mappers, then fan-in to 6 reducers	open
User journeys	Separate graphs — four unconnected flows in a single JSON	open

URL parameters

Parameter	Values	Description
data	an http(s) URL	JSON document to load into the editor
layout	flow-right | flow-down | tree | radial | organic | force	layout preset (default flow-right)

The layout is also switchable in the app from the picker on the graph. The legacy ?algorithm=layered\|mrtree\|force still works and maps onto the presets above.

Example: ?data=https://raw.githubusercontent.com/tabkram/json-to-graph/main/data/trace.json

Development

npm install
npm run dev      # local dev server
npm run build    # type-check + production build in dist/

Built with Vite and TypeScript — no UI framework. The editor is CodeMirror, the graph is Cytoscape.js with cytoscape-elk.

Deployment to GitHub Pages is automated by .github/workflows/deploy.yml on every push to main (repository Settings → Pages → Source must be set to "GitHub Actions").

Contributing

Contributions, bug reports, and documentation improvements are welcome. Please read the contribution guide and follow the Code of Conduct.

For vulnerabilities, use the private reporting process in the Security Policy instead of opening a public issue.

Community

If json-to-graph is useful to you, consider starring the repository.

License

This project is licensed under the MIT License. See LICENSE for details.