Getting Started

Open the Editor

Visit todiagram.com/editor to access the interactive diagram editor. The editor opens with an example diagram to help you get started.

The editor interface includes:

• Top toolbar: File operations, tabs, sharing, and account options
• Main canvas: Interactive diagram visualization
• Text editor: Edit your data in real-time (optional pane)
• Bottom bar: Format selection, validation status, and cloud sync

Import Your Data

ToDiagram supports multiple ways to add your data:

Drag and Drop Files

Simply drag and drop your file onto the editor. Supported formats:

• JSON (.json)
• YAML (.yaml, .yml)
• XML (.xml)
• CSV (.csv)
• Mermaid (.mmd)

Paste Data Directly

1. Click anywhere in the text editor pane
2. Paste your data (Cmd/Ctrl + V)
3. The diagram updates automatically

Import from File Menu

1. Click File → Open in the top toolbar
2. Select your file
3. Your data is loaded into a new tab

Edit and Explore Diagrams

Once your data is visualized, you can interact with and modify your diagram:

Navigate the Canvas

• Pan: Click and drag the canvas background
• Zoom: Use mouse wheel or trackpad pinch
• Search: Press Cmd/Ctrl + F to find specific nodes
• Focus: Double-click any node to center it

Modify Data Visually

• Edit Node: Click on any node to view and edit its data in a modal
• Copy/Paste: Right-click nodes for cut, copy, paste operations
• Delete: Select a node and press Delete or right-click → Delete
• Expand/Collapse: Click the arrow icon on nodes with children

Edit in Text Editor

Changes in the text editor sync instantly with the diagram:

1. Modify your data in the left pane
2. The diagram updates in real-time
3. Validation errors appear in the bottom bar

Save to Cloud

Keep your work safe and accessible across devices by saving to the cloud:

First-Time Save

1. Click the Cloud button in the top toolbar or the save icon in the bottom bar
2. Sign in with GitHub or Google (if not already signed in)
3. Your document is automatically saved
4. A checkmark appears when saved successfully

Managing Saved Documents

1. Click Cloud to open your documents library
2. View all your saved diagrams
3. Click any document to open it
4. Use the search to find specific files

Collaboration Features

Share your diagrams with team members:

1. Click the Share button in the top toolbar
2. Set visibility to Public or Team
3. Copy the shareable link
4. Anyone with the link can view your diagram

Export as Image

Export your diagrams for presentations, documentation, or sharing:

Export Options

1. Click the menu icon (☰) in the top-left of the canvas or press Cmd/Ctrl + S
2. Select Export as image
3. Configure your export:
   • File Name: Name your export file
   • Format: PNG, JPEG, or SVG (SVG requires Pro plan)
   • Background: Choose a color or transparent background
   • Scale: 1x, 2x, or 3x (3x requires Pro plan)

Export Methods

• Download: Save the image to your computer
• Copy to Clipboard: Click "Clipboard" to copy the image directly

Supported Export Formats

• PNG: Best for general use, supports transparency
• JPEG: Smaller file size, no transparency support
• SVG: Vector format for scalable graphics (Pro plan)