Getting started

The workspace, the first visit and your first drawing.

On this page

The workspace

SimpleDraw uses a docked layout, so panels sit beside the drawing area instead of covering it. On narrow screens the rails stack around the canvas, the tools wrap, Style starts collapsed and panel content scrolls.

AreaWhat it holds
Top barNew, Open, Save drawing, Templates, Mermaid, Link agent, Commands, the theme and the language button, and the saving badge
Left railThe drawing tools, Delete selected, and the Style panel (colours, width, appearance, text, arrange, connection points and the selection's size)
CentreThe drawing canvas, with page tabs underneath
Right railObjects, Beep.Skia libraries, Connectors, Frames, Library and Export image
Bottom barUndo and redo, copy and paste, zoom, Fit drawing, the grid and snapping, Pause for flowing lines, help (?) and the save status

The Beep.Skia libraries panel starts open; Objects, Connectors, Library and Export image are collapsible panels you open when needed.

The first visit

The first time SimpleDraw opens on a device it asks for the interface language (English or العربية; your browser's language is suggested) and keeps it. A three-card introduction follows in that language; Skip or Escape ends it at any point. Then the empty page shows four ways to start: draw a shape, start from a template, add a Mermaid flowchart or open a file. They leave once the drawing has an object and do not come back unless you choose Show the starting hints again in Help.

Later visits open straight to your drawing in your language. The language button changes it at any time, and Replay the introduction in Help shows the introduction again. A link opened on a first visit is followed once the introduction ends.

Your first drawing

  1. Choose the Rectangle tool (R) and drag on the canvas. After you draw, the tool returns to Select so the next drag moves what you drew. The lock beside the tools (or Q) keeps the tool for several shapes.
  2. Double-click the shape and type a label. Ctrl+Enter or Done commits; Escape cancels.
  3. With the shape selected press Ctrl+Arrow: the same kind of shape appears one step away, joined by an elbow arrow, and is selected, so pressing again continues the chain.
  4. Change colours and line width in Style. Style applies to the selection, or sets defaults for the next shape.
  5. Open Export image and download a PNG, SVG or PDF, or choose Save drawing to keep an editable .simpledraw.json file.
Tip: Ctrl+K lists every command with its shortcut. Type part of a name, in English or Arabic.

Where your work is kept

SimpleDraw keeps drawings on your device. Committed edits autosave after a short delay; wait for the saved status, because a pending or error status means your latest edits are not safely stored yet. Browser storage can be cleared or evicted, so keep native backups of work you care about: Save drawing downloads .simpledraw.json, and PNG/SVG do not reopen as editable objects (an Editable PNG does). See Files, saving and export.

Keep a backup before changing the address or path the app is served from, or clearing browser storage: autosave and libraries belong to one origin and path and do not move with them.

Browsers and requirements

  • A current browser. Link agent works in Chrome, Edge and Firefox; Safari can draw but cannot link, because it blocks local connections from secure pages. Saving to a chosen file needs a browser that can pick files (Chrome and Edge); elsewhere SimpleDraw downloads a copy.
  • Open the app over HTTPS (or loopback HTTP while developing). Opening an HTML file directly is not supported, because the offline cache and cross-tab saving need a secure context.
  • Offline use starts after a successful first load and the offline cache finishing its installation.