JSON グラフ
JSON 構造をインタラクティブなグラフで表示
JSON Input
Graph View
See how a JSON document is connected, not just nested
Tree views show hierarchy, but they hide relationships — a node that references another node deep elsewhere looks the same as a leaf value. A graph view renders those relationships as a network, so you can spot cycles, identify hubs, and understand the shape of a document at a glance.
Use the graph when you need to
Map a complex API response
Render a deeply linked response as a graph to see which entities reference which.
Debug references in a config file
Visualize anchor and alias relationships, or any $ref-style pointers, instead of chasing them by hand.
Onboard onto a new dataset
See the big-picture shape of an unfamiliar JSON document before drilling into specific values.
How to visualize JSON as a graph
- 1
Paste your JSON into the editor.
- 2
Wait for the graph to render with nodes for objects and arrays.
- 3
Drag, zoom, and click nodes to inspect values and follow relationships.
Keep going
Switch to tree view
Use the tree when hierarchy matters more than connections.
Find oversized fields
Identify which nodes carry the most weight when network performance matters.
Format the source first
Beautify the JSON before visualizing for cleaner node labels.
Query specific paths
Once you spot a target node in the graph, query it with JSONPath.
Common graph workflows
Use the graph to spot circular references or unused nodes in a complex config.
Render the response as a graph to see how related entities connect.
Capture a screenshot of the graph for a teammate trying to understand the data shape.
関連ツール
よくある質問
JSON を貼り付けると、オブジェクトや配列をノードとして扱うインタラクティブなノードグラフを描画します。親子関係はエッジで接続されます。ノードのドラッグ、ズームイン/アウト、クリックによる値の確認ができます。
深いネストや複雑な構造を持つ JSON を全体像から理解したいときに特に有効です。API レスポンス、設定ファイル、構造把握が必要な JSON 全般で、俯瞰しながら関係性を追えます。
現時点ではブラウザ上でのインタラクティブ表示のみです。画像として保存したい場合は OS のスクリーンショット機能をご利用ください。PNG/SVG の直接エクスポートは追加予定です。
目安として 1MB 程度までなら快適に表示できます。ノード数が数千を超えるような大きな JSON は描画が重くなる場合があります。大規模データは Tree View や Size Analyzer の利用をおすすめします。