Diagram view

The Diagram view draws your data as a node graph. Each object or array becomes a node, and edges connect parents to children. It helps you see the shape of nested data at a glance. The Diagram view is Pro. Free users get one free try per day.

The Diagram view is available for JSON, JSONL, YAML, and XML. See Views for the full list.

Open the Diagram view

1. Load a JSON, YAML, or XML document.
2. Select the Diagram tab, or run view diagram in the Command Palette.

Prettify lays out the nodes and fits them to the screen.

Read a node

Each node is a card.

• The header shows the key or the array index.
• The body lists the scalar fields of that object, as key and value.
• Child objects and arrays become their own nodes, joined by edges.

To copy a node's path, hover the node and select copy. Prettify copies the path to the clipboard.

Layout

Use the toggle at the top right to set the flow direction.

• LR lays the graph out from left to right. This is the default.
• TB lays the graph out from top to bottom.

The view re-fits after you change the direction.

Expand and collapse

A node with children shows a chevron in its header. Select the chevron to hide or show that node's children. A collapsed node hides all of its descendants, so you can focus on one branch.

Zoom and pan

• Drag the background to pan.
• Scroll to zoom.
• Use the controls at the bottom left to zoom in, zoom out, or fit the graph.
• Use the minimap at the bottom right to jump across a large graph.

Node limit

The Diagram view draws up to 500 nodes. For a larger document, Prettify shows a notice and caps the graph. Use the Tree view to browse the full structure.

Schema errors on nodes

When you attach a JSON Schema and the data fails it, the Diagram view marks the failing nodes.

• A node with errors shows a red badge with the error count. Select the badge to read the messages.
• The fields that fail are highlighted in the node body.
• A summary chip at the top left shows the total count. Use its arrows to step through the failing nodes.
• A click on an issue in the Problems panel pans the diagram to the matching node.

Export

1. Open the export menu at the top right.
2. Choose PNG or SVG.

The export covers the whole graph. It leaves out the minimap, the controls, and the toolbar.

Related pages

Views, Chart view, JSON Schema, JSON, YAML, XML, Pro.