Shape Libraries

Shapes are organized into collapsible groups in the left sidebar. Click the section header to expand or collapse each group.

Available Libraries

Adding Shapes

• Drag and drop: Drag a shape from the sidebar palette and drop it onto the canvas.
• Positioning: Shapes snap to the grid by default. Toggle snap with the grid-snap button in the toolbar.
• Text element: The Text shape creates a borderless text block. A text editor opens automatically when you drop it.
• Line element: The Line shape creates a straight line. Resize handles change its angle and length.

Organization Shapes

Org chart shapes have special text positioning:

• Org Card & Role: Text appears to the right of the person icon.
• Executive, Person, Team: Text appears below the person icon.
• Department: Text is centered in the body area.
• The fill color on Org Card, Executive, Department, and Team fills only the header band. Change the fill color in Properties to customize the header.

Creating Connectors

1. Hover over a shape to reveal its blue anchor points (top, bottom, left, right).
2. Click and drag from an anchor point.
3. Release on another shape's anchor point to complete the connection.

Connector Types

Select a type from the Connectors section in the sidebar before drawing, or change an existing connector's type in the Properties panel.

Connector Properties

• Label: Add text to the midpoint of the connector (e.g., "Yes" / "No" on decision branches).
• Color & Width: Customize the line appearance.
• Style: Solid, Dashed, or Dotted lines (also selectable from the Line Style sidebar section).
• Both Arrows: Toggle checkbox to add/remove the second arrowhead.

Connectors automatically re-route when you move connected shapes.

Selecting

• Click a shape or connector to select it.
• Shift+Click to add/remove items from the selection.
• Marquee select: Click on empty canvas and drag a rectangle to select all shapes within it.
• Select All: Ctrl+A
• Deselect: Press Escape or click empty canvas.

Moving & Resizing

• Move: Click and drag a selected shape. Multiple selected shapes move together.
• Nudge: Arrow keys move selected shapes by one grid unit.
• Resize: Drag the small square handles on a selected shape's edges and corners.

Clipboard & Duplication

• Copy: Ctrl+C
• Paste: Ctrl+V (pastes with a slight offset)
• Cut: Ctrl+X
• Duplicate: Ctrl+D (copy + paste in one step)
• Delete: Delete or Backspace

Text Editing

• Double-click any shape to open the inline text editor.
• Press Enter to confirm, Escape to cancel.
• Hold Shift+Enter for multi-line text.
• Text automatically wraps within the shape boundaries.

Alignment & Ordering

• Alignment tools (toolbar): Align Left, Center, Right, Top, Middle, Bottom. Aligns all selected shapes to the first selected shape.
• Bring to Front / Send to Back: Change the drawing order (available in Properties panel and right-click context menu).
• Lock/Unlock: Lock a shape to prevent accidental moves or edits. A lock icon appears on locked shapes.

Undo & Redo

• Undo: Ctrl+Z (up to 50 levels)
• Redo: Ctrl+Y

Right-Click Context Menu

Right-click on the canvas or a shape for quick access to: Copy, Paste, Duplicate, Delete, Bring to Front, Send to Back, Lock/Unlock, Select All.

Zooming

• Mouse wheel: Scroll to zoom in/out (zooms toward cursor position).
• Toolbar buttons: + and - buttons, with zoom percentage displayed between them.
• Ctrl++ / Ctrl+- to zoom from keyboard.
• Zoom range: 10% to 400%.

Panning

• Space + Click & drag: Hold Space bar, then click and drag to pan the canvas.
• Middle mouse button: Click and drag with the middle mouse button.

View Controls

• Fit to Screen (Ctrl+0): Automatically zoom and pan to show all shapes.
• Center Drawing: Centers the diagram in the viewport without changing zoom level.

Grid

• Toggle Grid: Show/hide the background grid (button in toolbar).
• Snap to Grid: Toggle whether shapes snap to grid positions when moved or placed.
• Grid size: 20px with major lines every 100px.
• The grid always stays white regardless of theme mode.

Minimap

The minimap in the bottom-right corner shows an overview of your entire diagram with a blue rectangle indicating the current viewport.

Properties Panel

Select a shape or connector to see its properties in the right panel. Properties are organized into groups:

Shape Properties

Connector Properties

Dark Mode

Click the moon icon in the toolbar to toggle between light and dark themes. The canvas and grid always remain white for readability. The application starts in dark mode by default.

File Operations

Auto-Save

Your work is automatically saved to the browser's local storage every 5 seconds. When you reopen the app, your last session is restored and centered on screen.

Export

When a page size is selected (8.5x11 or 11x8.5), exports use the page dimensions. Otherwise, exports auto-size to fit your content with padding.

Quick-Start Templates

8 professionally designed templates for common use cases:

• Basic Flowchart, Customer Onboarding, Software Development Cycle, Decision Tree, Bug Triage, Network Diagram, Org Chart, Process Map

Page Size

Select a page size from the dropdown in the toolbar:

• No Border: Infinite canvas with no page boundaries.
• 8.5 x 11 Portrait: Standard US Letter portrait (816 x 1056 px).
• 11 x 8.5 Landscape: Standard US Letter landscape (1056 x 816 px).

Selecting a page size draws a bordered page on the canvas with a shadow. The view auto-zooms to fit the page.

Title Block

Click the Title Block button in the toolbar to open the title block editor. The title block appears in the bottom-right corner of the page and contains:

• Title: Drawing title
• Author: Creator name
• Date: Date of creation
• Revision: Version number
• Project Info: Project description

The title block is included in PNG and PDF exports when a page size is selected.

File Operations

Edit

Navigation

Shapes

Other