Interface Guide

The ToDiagram interface has three main parts: a text editor on the left, a visual diagram in the center, and a toolbar for quick actions.

Toolbar Menu

Click the menu icon in the top-left corner to access:

• Export as Image (Cmd/Ctrl + S) - Save your diagram
• Search (Cmd/Ctrl + F) - Find nodes in the diagram
• Expand/Collapse Diagram - Show or hide nested data
• Customize Theme - Change colors and appearance
• Sync Editor Focus - Click nodes to jump to code (JSON only)

Zoom Controls

Use the zoom buttons in the bottom-left corner:

• 🎯 Center First (Shift + 1) - Jump to the root node
• ⛶ Fit to Center (Shift + 2) - Fit entire diagram on screen
• ➖ ➕ - Zoom in and out
• Mouse wheel - Scroll to zoom (or pan if disabled in settings)

Navigation

Moving Around:

• Click and drag the canvas to pan
• Scroll to zoom in/out
• Double-click a node to center it

Quick Navigation:

• Press Shift + 1 to jump to the first node
• Press Shift + 2 to fit the entire diagram on screen

Working with Nodes

View Node Details:

• Click any node to see its data
• Edit values directly in the modal

Expand/Collapse:

• Click the button on nodes with nested data
• Shows summaries like {3 keys} or [5 items] when collapsed
• Use toolbar menu to expand/collapse all nodes at once

Node Actions:

• Right-click a node to copy, cut, paste, or delete
• Node colors change when hovered or modified
• Green background indicates search matches

Search

Press Cmd/Ctrl + F to search your diagram:

1. Type any text to search
2. Use ↑/↓ arrows to jump between matches
3. Matching nodes are highlighted in green
4. Press Escape to close search

Keyboard Shortcuts

See all shortcuts for more.

Troubleshooting

Sync Editor Focus

This feature connects the text editor and diagram so clicking in one jumps to the same location in the other.

How to use:

1. Enable it from the toolbar menu (top-left)
2. Click a node in the diagram to jump to that line in the editor
3. Click in the editor to center that node in the diagram

Best for:

• Navigating large JSON files quickly
• Understanding how code translates to diagrams
• Making precise edits while seeing the visual structure

Next Steps

Now that you understand the interface:

• Explore Data Formats to work with different file types
• Try Core Features for JSON Schema and comparison features
• Customize your experience with Theme Settings
• Master Keyboard Shortcuts for faster workflows