DrawMotive Docs

Appearance

Create Your First Diagram ​

This guide walks you through creating a diagram in DrawMotive, from opening the editor to sharing your work.

Step 1: Open the Editor ​

Navigate to the DrawMotive web app in your browser. The editor loads as a Progressive Web App (PWA), so it works in any modern browser. On first load, the application downloads and caches itself for offline use.

Step 2: The Canvas ​

The editor opens with an empty canvas showing a grid background. The canvas uses a center-origin coordinate system — panning, zooming, and scrolling all work as you'd expect:

  • Pan — Click and drag with the middle mouse button, or hold Space and drag
  • Zoom — Scroll the mouse wheel, or pinch on a trackpad
  • Reset view — Double-click the zoom controls to reset to the default viewport

Step 3: Draw Shapes ​

Select a tool from the toolbar to start drawing:

  1. Line — Click to set the start point, then click again for the end point
  2. Rectangle — Click and drag to define the bounding box
  3. Circle — Click to set the center, then drag to set the radius
  4. Text — Click to place a text box, then start typing

Objects appear on the canvas immediately as you draw. Each shape has grip handles — small squares on corners and edges — that you can drag to resize or reshape.

Step 4: Select and Edit ​

  • Select — Click on any shape to select it. A bounding box with grip handles appears.
  • Multi-select — Click and drag an empty area to draw a selection rectangle, or hold Shift and click additional shapes.
  • Move — Drag a selected shape to reposition it.
  • Delete — Select a shape and press the Delete key.
  • Undo/Redo — Use Ctrl+Z to undo and Ctrl+Y (or Ctrl+Shift+Z) to redo.

Step 5: Add Constraints ​

Constraints let you maintain geometric relationships between shapes. Select two lines, then apply a constraint:

  • Parallel — Both lines maintain the same angle
  • Perpendicular — Lines stay at 90 degrees to each other
  • Horizontal/Vertical — Lock a line to a specific axis
  • Fixed length — A line keeps a specific length as you move its endpoints

When you drag a constrained shape, the solver automatically adjusts connected shapes to satisfy all constraints.

Step 6: Collaborate ​

Share the diagram link with your team. When multiple people open the same diagram:

  • Edits appear in real time for all connected users
  • Conflicts are resolved automatically using last-write-wins semantics
  • If you go offline, your edits queue locally and sync when you reconnect

Step 7: Export ​

Export your diagram in the format you need:

  • PNG — Raster image for presentations and documents
  • SVG — Vector format for high-quality scaling
  • PDF — Print-ready format with precise dimensions

Next Steps ​

Copyright © 2026 DrawMotive.