A diagram editor with AI assistance, live preview, and export tools.

Editor

Write diagram syntax in the editor pane. The diagram updates live in the preview. Use File > Templates to start from a preset.

Preview

Scroll to zoom, drag to pan. Use the zoom controls or press Z to toggle between zoom and pan modes. Press Fit to auto-fit the diagram.

Scroll Zones

Hover near the edges of the preview to reveal edge scroll zones that automatically pan the diagram. Toggle Scroll Zones in the View menu to enable or disable this feature. Enabled by default.

Inspect Mode

Click the link icon in the editor header (next to the line count) or press I to toggle Inspect Mode. When active, clicking a node in the preview jumps to its source line in the editor. Moving your cursor to a line in the editor centers and highlights the corresponding element in the preview.

Edge Highlight

Click the edge icon in the editor header or press E to toggle Edge Highlight mode. When active, hover over edges or edge labels to see detailed connection info and a temporary red highlight. Click an edge or label to pin the red highlight persistently (info is hover-only). Click again to remove the highlight. Use View > Clear Selected Edges to remove all pinned highlights at once. Edge labels are centered on their lines and have enlarged hit areas for easier interaction.

AI Chat

Open with AI Chat or Cmd /. Ask the AI to analyze, improve, or generate diagrams. Use Load Repo to give the AI context from a codebase. Requires a Claude API key (set in Settings).

Notes

Enable Note Mode from the View menu (or press N). Click anywhere on the preview to add sticky notes. Drag to reposition, click to edit.

Export

Export diagrams as PNG, SVG, or PDF — with or without notes. Choose export scale (2x-8x) for higher resolution. Use Cmd Shift C to copy as image.

Projects

Save multiple diagrams as projects. Each project stores its diagram, chat history, notes, and repos. Use Share to generate a shareable URL.

Keyboard Shortcuts