JSON Relationship Viewer
Map entities and foreign-key references in JSON — detect id/*_id fields and draw the relationship graph.
JSON Document Input
Relationship Diagram (4 Entities)
root
1| _id |
|---|
| 1 |
users
2linked via _parentId → root._id
| _parentId | _id | id | name | |
|---|---|---|---|---|
| 1 | 1 | 1 | Alice | alice@example.com |
| 1 | 2 | 2 | Bob | bob@example.com |
posts
2linked via _parentId → root._id
| _parentId | _id | id | title | userId |
|---|---|---|---|---|
| 1 | 1 | 10 | Hello World | 1 |
| 1 | 2 | 11 | JSON Tools | 2 |
comments
1linked via _parentId → root._id
| _parentId | _id | id | body | postId | userId |
|---|---|---|---|---|---|
| 1 | 1 | 100 | Great article! | 10 | 2 |
What is JSON Relationship Viewer?
The JSON Relationship Viewer runs the same table-normalization engine as JSON to Table — every array of objects anywhere in the document becomes its own table, linked back to whichever table contained it via a `_parentId → parentTable._id` column — but renders the result as an interactive entity-relationship diagram instead of literal spreadsheet tables. Nodes can be laid out two ways: an ERD Schema view showing each table as a card (either its full rows, or a compact 'Nodes Only' summary of just its column names), or a Node-Link Graph view showing each table as a small draggable pill labeled with its row and column counts. An arrow is drawn from a table to an array only when that array sits nested directly inside one of its own records — the link comes from where the array physically lives in the JSON, not from a field's name, so a same-looking field like `userId` on a `posts` array that's a sibling of a `users` array (both nested under the same parent, not inside each other) stays a plain flattened column rather than becoming a detected relationship.
How to use JSON Relationship Viewer
- Paste a JSON array of objects or a single object into the left panel, or load the built-in Users / Posts / Comments sample.
- The diagram builds automatically — every nested array of objects becomes its own node, connected by an arrow back to the table whose record actually contained it.
- Use the view controls at the bottom of the canvas to switch between ERD Schema (full table cards, or 'Nodes Only' for just column names) and Node-Link Graph (compact draggable pills).
- Drag any node to reposition it, click Reset to restore the automatic depth-based layout, and zoom with the on-screen controls or Ctrl/Cmd + scroll.
- Click the download icon on any node to export just that table's rows as CSV, or open JSON to Table to see the same data as literal spreadsheet tables.
Examples
Sibling arrays link only to their shared parent
Input
{ "users": [{ "id": 1, "name": "Alice" }], "posts": [{ "id": 10, "title": "Hi", "userId": 1 }], "comments": [{ "id": 100, "postId": 10, "userId": 1 }] }
Output
Four nodes: root (1 row), users, posts, and comments — each linked directly to root, since users, posts, and comments are siblings rather than nested inside each other. userId and postId remain plain columns on posts/comments, not edges.
A genuinely nested one-to-many array
Input
{"users": [{"id": 1, "name": "Alice", "posts": [{"id": 10, "title": "Hello"}, {"id": 11, "title": "World"}]}]}
Output
Two linked nodes: users and users.posts, with an arrow from users to users.posts — because posts is nested inside each user record, not a sibling array under the same root.
Common mistakes
- Expecting a field like userId or post_id to draw a relationship line to another table — edges only come from where an array is physically nested in the JSON; a same-looking field on a sibling array is just a flattened column, not a detected link.
- Assuming _id and _parentId are fields from your original data — they're synthetic, generated by the tool to represent the parent-child link, exactly as in JSON to Table.
- Providing a bare array of primitives or a single flat object with no nested arrays and expecting multiple linked nodes — that produces exactly one node (root or records), since there's nothing to normalize into a child table.
- Switching to Node-Link Graph and expecting to see the actual row data there — that view only shows row/column counts per node; switch to ERD Schema with 'Nodes Only' off to see full table contents.
- Dragging nodes into a custom layout and then pasting a different JSON document — the layout resets to the automatic depth-based arrangement whenever the set of detected tables changes.
Why use this tool
- Reuses JSON to Table's exact normalization logic, so the diagram always matches what the same document would produce as spreadsheets — no separate detection rules to keep in sync mentally.
- Two distinct layouts — a detailed ERD Schema view and a compact Node-Link Graph — cover both a close read of one table's fields and a bird's-eye view of a document with many linked tables.
- Auto-layout positions nodes by nesting depth, and dragging, zooming, and a one-click CSV export per node are all available without leaving the diagram.
- Runs entirely client-side — the document you visualize is never uploaded anywhere.
- A direct link to JSON to Table lets you jump from the diagram to the literal spreadsheet view of the exact same data in one click.