usefulweb.appDependable little tools for people and AI agents. Sketchboard
Theme: Auto

Theme

Diagrams, sketches and plans

Sketchboard

Draw diagrams, flowcharts, mind maps and floor plans on an endless board.

Launch Sketchboard → Tutorials

Sketchboard is a drawing board for ideas: boxes, arrows that stay glued to their shapes, sticky notes, freehand pen and over a thousand props, in clean lines or a hand-drawn look. Libraries for flowcharts, UML and ER, networks, floor plans with walls, dimensions and a real-world scale, and mind maps with automatic layout. Import draw.io and Excalidraw files, export PNG, SVG and PDF, present frames as slides and share boards with your team.

Free · runs in your browser · no sign-up · Version 1.0.0

Sketchboard with a sign-up flowchart: terminators, decisions and a selected database step joined by right-angled arrows, the flowchart library on the left and its style settings on the right

Screenshots

Features

  • Endless board

    Pan and zoom freely, with a grid, snapping and smart guides that line shapes up with their neighbours.

  • Shapes for every diagram

    Basic shapes from rectangles to clouds and cylinders, plus libraries for flowcharts, UML and ER, networks, floor plans and mind maps.

  • Arrows that stay attached

    Straight, curved or right-angled connectors glue to a shape’s sides and route around other shapes when you move things. Over a dozen arrowheads, including crow’s feet.

  • Clean or hand-drawn

    Switch the whole board between crisp lines and a sketchy, hand-drawn look with hatched fills. Exports look the same.

  • Text and sticky notes

    Labels inside shapes, free text with four fonts and coloured sticky notes for quick ideas.

  • Freehand pen

    Draw with the mouse, a pen or a finger. Strokes are smoothed so they stay clean at any zoom.

  • Arrange and style

    Fill, line, dash, opacity, fonts, align and distribute, layers, groups, z-order, rotation, locking, copy and paste, undo and redo.

  • Floor plans to scale

    Walls, rooms that show their area, doors, windows and furniture, and dimension lines in real units at a scale such as 1:50.

  • Over a thousand props

    Search a library of transparent pictures by name or tag, browse themes, and drag them onto the board or press Enter.

  • Mind maps with auto layout

    Add child and sibling topics with the keyboard; Sketchboard balances the map around the central topic. Flowcharts get a layered layout.

  • draw.io, Excalidraw and Mermaid

    Open draw.io files (also compressed ones) and Excalidraw drawings, or type a Mermaid flowchart and get a laid-out diagram.

  • PNG, SVG, PDF and links

    Export images and vector files, true-scale PDFs for plans, the board file, or a share link that carries a small board inside it.

  • Present with frames

    Every frame becomes a slide. Present full screen and move through the slides with the arrow keys.

  • Fully usable by keyboard

    The Outline lists every element with its text, position, size and connections, and lets you add shapes and connectors without a mouse.

  • Work together

    Save a board to a shared workspace: changes of several people merge element by element, viewers get a read-only board.

  • API and MCP tools

    Convert draw.io to SVG, turn Mermaid into diagrams and lay out graphs from scripts or AI agents with the same engine.

Templates

Start from a ready-made project and change it to fit.

Built-in tools

Sketchboard uses these tools. Each one also has its own page and works on its own, in the browser, through the JSON API and through MCP.

For AI agents

Sketchboard runs on a deterministic engine. The same functions are available as tools with a JSON API and MCP, so scripts and AI agents get exactly the results the app shows.

  • Sketchboard draw.io to SVG – Convert a draw.io (diagrams.net) or Excalidraw file into a clean SVG and an editable board.
    Tool page · POST https://sketchboard.usefulweb.app/api/v1/tools/sketchboard-drawio-to-svg/calculate · MCP sketchboard_drawio_to_svg
  • Sketchboard Mermaid to Diagram – Turn a Mermaid flowchart into a laid-out, editable diagram with an SVG export.
    Tool page · POST https://sketchboard.usefulweb.app/api/v1/tools/sketchboard-mermaid-to-diagram/calculate · MCP sketchboard_mermaid_to_diagram
  • Sketchboard Auto Layout – Tidy up a diagram automatically: layered flowchart layout or a balanced mind map.
    Tool page · POST https://sketchboard.usefulweb.app/api/v1/tools/sketchboard-auto-layout/calculate · MCP sketchboard_auto_layout

Build a project through the API, then open it in the app with a link to https://sketchboard.usefulweb.app/app#project=<base64url JSON>.

Import & export

Import

  • Sketchboard board (.sketchboard.json)
  • draw.io / diagrams.net file (.drawio, .xml; plain or compressed pages)
  • Excalidraw drawing (.excalidraw)
  • Mermaid flowchart text
  • Share link (#board=)

Export

  • Sketchboard board (.sketchboard.json)
  • PNG image (1×–3×)
  • SVG vector image (props embedded)
  • PDF (true scale, A4/A3/Letter or one page per frame)
  • Share link (#board=)

Keyboard shortcuts

Keyboard shortcuts in Sketchboard
KeysAction
VSelect tool (H pans, R rectangle, O ellipse, D diamond, A arrow, L line, T text, S sticky note, P pen, W wall, Q room, M dimension, F frame)
Arrow keysMove the selection (Shift: by one grid step)
EnterEdit the text of the selected element
DeleteDelete the selection
Ctrl + DDuplicate
Ctrl + GGroup (Ctrl+Shift+G ungroups)
Ctrl + EnterMind map: add a child topic
Ctrl + ZUndo (Ctrl+Shift+Z redo)
Ctrl + Alt + OOpen the Outline with every element
?All keyboard shortcuts (single-key shortcuts can be switched off there)

Frequently asked questions

Where are my boards stored?

In this browser’s storage on this device. Save a board file to keep a copy or move it, back it up with Bundlekeep, or save it to a shared workspace when you are signed in.

Can I open my draw.io or Excalidraw files?

Yes. Choose File → Import and pick the file. Shapes, connectors, labels and colours come over; draw.io stencils Sketchboard does not have are drawn as rectangles, and Excalidraw images stay out. Each import tells you what it mapped.

How do I draw to scale?

Open the board settings (click on an empty part of the board) and set the scale, for example 1 : 50, and the unit. Dimension lines and room areas then show real sizes, and a PDF in true scale measures right when printed at 100 %.

How do several people work on one board?

Sign in, choose File → Save to workspace and invite people. Everyone sees changes live. When two people change the same board at the same time, Sketchboard merges their changes element by element; if both changed the same detail of one element, the later save wins and both are told.

Can I use Sketchboard without a mouse?

Yes. The Outline tab lists every element with its text, position, size and connections. You can edit all of them there, add shapes and connect them with dialogs, and every change is announced to screen readers.

Where do the props come from?

They are original pictures made for usefulweb’s Sketchboard and ship with the app, so they work offline and appear in exports.

Limitations

What Sketchboard does not do (yet):

  • Live editing merges whole elements and their fields; two people typing into the same label at the same moment do not merge character by character.
  • draw.io stencils beyond the common flowchart, UML and basic shapes are drawn as rectangles; images inside draw.io and Excalidraw files are not imported.
  • Only the flowchart part of Mermaid is understood (no sequence, class or Gantt diagrams).
  • Text sizes are estimated, so very long labels can wrap slightly differently in the PDF than on screen; rotated props are drawn upright in PDFs.
  • Share links carry the whole board, so they get long for big boards; use a file or a workspace instead.
  • Groups are one level deep; grouping groups makes one bigger group.

Tutorials

Learn Sketchboard step by step.

  1. Your first board in five minutesDraw shapes, join them with arrows that stay attached, change colours and lines, and keep the board in your browser — the basics of Sketchboard.Beginner 6 min
  2. Flowcharts from text and automatic layoutType a flowchart as Mermaid text, let Sketchboard lay it out with arrows routed around the boxes, and tidy up any diagram with one command.Beginner 6 min
  3. Mind maps with the keyboard, and the OutlineGrow a mind map with two shortcuts, keep it balanced automatically, and use the Outline to find, edit and connect every element without a mouse.Beginner 5 min
  4. Floor plans to scaleDraw walls and rooms, see room areas in square metres, add doors, windows and furniture, measure with dimension lines and print a plan that measures right.Intermediate 7 min
  5. Import draw.io and Excalidraw, export, shareOpen draw.io and Excalidraw files, export PNG, SVG and PDF, send a drawing to another usefulweb app, and share a board as a link.Intermediate 6 min
  6. Frames, presentations and working togetherTurn frames into slides and present them full screen, use the hand-drawn look, and share a board in a workspace where everyone's changes merge.Intermediate 6 min

Ready to try it?

Launch Sketchboard →

Other apps