User Guide

AI Sketch-to-Diagram

Upload a photo of a hand-drawn sketch → AI converts it into an editable diagram in 3 steps:

1. Vision Parse (backend) — Gemini extracts structure (nodes, edges, layout hints) into a Sketch Intermediate Representation (SIR)
2. JSON Generation (backend) — Gemini converts SIR into React Flow JSON with coordinates and styling
3. Validate & Layout (browser) — deterministic post-processor fixes overlaps, validates schema, infers handles

Canvas Editor

Styling (Properties Panel — right sidebar)

• Label text, font size, bold, italic, text alignment
• Background color, border color, border width, border style
• Layer ordering (bring to front / send to back / forward / backward)

Grouping

Grouped nodes move together when dragged.

Auto-Grouping (AI-generated diagrams)

When the AI generates a diagram with containers (e.g., a dashed box labelled "AKS" containing service nodes), the container and its children are automatically grouped. Dragging the container moves all contained nodes together. You can ungroup them via Ctrl/Cmd + Shift + G if you need to rearrange individually.

Undo / Redo

50-level history stack. Snapshots are taken before: adds, connects, deletes, drags, grouping, and styling changes.

Using Sketch2Diagram in Confluence

Macro Preview (on the page)

When you insert /Sketch2Diagram on a Confluence page, you see a macro preview — a read-only view of your diagram embedded directly in the page (450px tall). The preview has:

• A thin header bar with the diagram name and node count
• Maximize (⛶) button — opens a full-screen read-only view with zoom/pan controls
• Edit (✏️) button — opens the full editor in a modal (only visible when the page is in edit mode)

If no diagram exists yet, a "Create diagram" button is shown instead.

Editor Modal

Clicking Edit opens a full-screen modal with the complete editor (sidebars, toolbar, AI upload, etc.). The modal cannot be closed by clicking outside or pressing Escape — this prevents accidental data loss.

At the top of the modal:

• Cancel — closes without saving. If you have unsaved changes, a confirmation dialog asks whether to discard them.
• Done — saves the diagram and closes the modal. The macro preview refreshes to show the updated diagram.

Saving

Diagrams are not auto-saved. Saves happen only in two cases:

1. Clicking "Done" in the editor modal — saves all current changes
2. After AI conversion — the diagram is saved immediately after a successful sketch-to-diagram conversion (to avoid losing expensive AI output)

If you click "Cancel" with unsaved changes, a confirmation dialog lets you choose to Keep Editing or Discard & Close.

Each Confluence macro instance stores its own diagram independently (keyed by macro context ID).

Sketch Reference Panel

After uploading a sketch, a Sketch button appears in the header toolbar (between Load Example and Upload Sketch). Click it to toggle a dropdown panel showing the original image so you can compare it side by side with the generated diagram.

• Zoom In / Out (🔍+/🔍−) — zoom the sketch image in 10% increments (50%–300%)
• Rotate (↻) — rotates the image 90° each click to match your sketch orientation
• Expand / Shrink — toggles between a compact view and a larger resizable panel
• Resize — in expanded mode, drag the bottom-left corner handle to resize the panel
• The image is temporary — it does not survive page reload and is not saved

Export

PNG and JPG download buttons in the header toolbar. Exports the diagram at 2× resolution with white background, tightly cropped to content.

Example Diagrams

Dropdown in the header to load built-in examples: system architecture, process flowchart, org chart, activity diagram, swimlane chart.

Available Shape Types (19)

rectangle · rounded · startEnd · ellipse · circle · diamond · parallelogram · cylinder · cloud · document · actor · text · arrow · arrowLeft · line · dotted · container · swimlanePool · swimlaneLane

All Keyboard Shortcuts