🗺️ Visionary Diagram Editor

100% local. No uploads. No account. Free.

User Manual

Overview

Visionary Diagram Editor is a canvas-based graph editor. The workspace is an infinite canvas on which you place nodes (shapes) and draw edges (connections) between them. The status bar at the bottom always shows the current zoom level, canvas coordinates under the cursor, and the total node/edge count of your diagram.

All diagram data is saved automatically to your browser's localStorage, so your work persists between sessions without any manual saving.

The Canvas

The main area is an infinite, pannable, zoomable canvas.

• Pan — click and drag on empty canvas space (or use the middle mouse button) to move around.
• Zoom — scroll the mouse wheel to zoom in and out. The current zoom level is shown in the status bar.
• ⊡ Fit — click the Fit button in the toolbar to zoom and center the view so all nodes are visible at once.

Creating Nodes

To add a node to the diagram:

• Double-click on an empty area of the canvas to create a new node at that position.
• The new node appears and may immediately enter edit mode so you can type a label.
• Press Enter or click elsewhere to confirm the label.

Connecting Nodes (Edges)

To draw an edge between two nodes:

• Hover over a source node until a connection handle appears on its border.
• Click and drag from the handle to the target node.
• Release on the target node to create the edge.

Edges can also have labels — double-click an edge to add or edit its label.

Selecting Elements

• Single select — click a node or edge to select it. The selected element is highlighted.
• Multi-select — hold Shift and click additional elements, or click and drag a selection rectangle over empty space to select all enclosed elements.
• Deselect — click on an empty area of the canvas.

Moving and Resizing Nodes

• Move — click and drag a selected node to reposition it. Multiple selected nodes move together.
• Resize — drag the resize handles that appear on the edges and corners of a selected node.

Editing Labels

• Double-click any node or edge to enter edit mode and change its label.
• Press Enter (or click outside) to confirm, Escape to cancel.

Deleting Elements

• Select one or more nodes or edges, then press Delete or Backspace.
• Deleting a node also removes all edges connected to it.

Undo / Redo

Every action (create, move, delete, edit) is recorded in the undo history.

• ↩ Undo — reverts the last action. Keyboard shortcut: Ctrl+Z (or Cmd+Z on Mac).
• ↪ Redo — reapplies the last undone action. Keyboard shortcut: Ctrl+Shift+Z.

Grid

The grid helps you align nodes precisely. Three display modes are available:

• Dots — shows a subtle dot grid on the canvas.
• Lines — shows a line grid on the canvas.
• None — hides the grid entirely.

Nodes snap to the grid when dragged, regardless of whether the grid is visible. Toggle the grid display from the toolbar without affecting snap behaviour.

Themes

Three visual themes are available from the toolbar:

• Dark — dark canvas background, light nodes and labels.
• Light — white canvas background with standard contrast.
• High Contrast — maximises contrast between elements for accessibility.

The theme preference is saved and restored on next launch.

Saving & Persistence

Your diagram is automatically saved to localStorage as you work. It will be there the next time you open the app in the same browser.

Keyboard Shortcuts Summary

• Ctrl+Z — Undo
• Ctrl+Shift+Z — Redo
• Delete / Backspace — Delete selected elements
• Escape — Cancel edit / deselect
• Enter — Confirm label edit
• Mouse wheel — Zoom in / out
• Click + drag (canvas) — Pan

About this tool