Diagram Maker

Draw flowcharts and diagrams with shapes, arrows, and text, then export as an image.

Draw flowcharts, sketches and simple diagrams with rectangles, ellipses, lines, arrows, freehand pen strokes and text, then download the result as a PNG image or an SVG file. Arrows can be attached to shapes so they follow when you move them. Your drawing is saved automatically in your browser.

How it works

The drawing area is a fixed 1200 × 750 canvas with a white background. Every shape is stored as simple geometry (position, size, colours), which is why it can be exported as a crisp SVG or as a PNG image.

Zooming and panning only change how you look at the canvas — they never change the drawing or the export. Exports always cover the whole 1200 × 750 canvas.

A line or arrow can be “connected” to a shape by dragging one of its ends onto that shape. From then on the end is attached to the shape: move or resize the shape and the line follows. Dragging the connector itself far away from a shape it was attached to detaches it again.

Every change is undoable (up to 50 steps). The drawing and its undo history are saved in this browser as you work, so they are still there if you reload the page.

How to use it

Pick a tool in the toolbar — Rectangle, Ellipse, Line, Arrow or Pen — and drag on the canvas to draw. For text, choose Text and click where the text should go.
Choose Select (the arrow icon) to click, move, resize and restyle shapes.
Double-click any shape to type a label inside it. To connect two shapes, draw an arrow and drag each end onto a shape.
Change colours and line width from the Style (palette) button. With a shape selected, the change applies to that shape.
Click PNG or SVG in the toolbar to download the diagram.

Options & controls

Tools (toolbar, left)

Hover a button to see its name. The button for the current tool is highlighted.

Select: Click a shape to select it, drag it to move it, or drag on empty canvas to draw a selection rectangle around several shapes.
Rectangle: Drag from one corner to the opposite corner. Rectangles can have a fill and an outline.
Ellipse: Drag to define its bounding box. Hold the same drag distance in both directions for a circle. Can have a fill and an outline.
Line: Drag from start to end. Lines have no fill.
Arrow: Like a line, with an arrowhead at the end you drag to.
Pen: Freehand drawing: press and drag to draw a free-form stroke, and release to finish.
Text: Click on the canvas to drop a text box reading “Text”; it opens for editing straight away and the tool switches back to Select.

History and deleting

Undo / Redo: Step back and forward through your changes (up to 50 steps). Greyed out when there is nothing to undo or redo.
Clear diagram (eraser): Removes everything after a confirmation (“Clear the entire diagram? You can undo this with Ctrl+Z.”). Greyed out when the canvas is empty.
Delete (trash can): Appears in red while something is selected. Deletes the selected shape or shapes. The Delete or Backspace key does the same.

Zoom (toolbar)

Zoom out / Zoom in: Each click changes the zoom by about 20%, centred on the middle of the view. The range is 10% to 500%.
Zoom percentage: Shows the current zoom. Click it to reset to 100% and re-centre.
Fit: Zooms and pans so that all your shapes fit in view.
Scroll and pan: Ctrl (or ⌘) + mouse wheel zooms at the pointer. A plain wheel or trackpad scroll pans the view. Hold Space and drag to pan. On a touch screen, pinch with two fingers to zoom and pan.

Style (palette button)

Opens a small panel. With one or more shapes selected, changes apply to them (and can be undone). With nothing selected, they set the style for the next shapes you draw.

Stroke: Colour of outlines, lines, arrows, pen strokes and text. Default: slate grey. For rectangles and ellipses a None button removes the outline.
Fill: Inside colour. Shown only for rectangles and ellipses. Default: light grey. The None button makes the shape see-through.
Width: A slider from 1 to 12 for line thickness; the number beside it shows the value. Default: 2.

Editing shapes

Move: With Select, drag a shape. To move several at once, select them first (by Shift-clicking or with the selection rectangle) and drag any of them.
Resize a rectangle, ellipse or text box: Select it and drag the small square handle at its bottom-right corner.
Reshape a line or arrow: Select it and drag the round handle at either end. Drop an end onto a shape to attach it (the target shape gets a highlight while you hover), or onto empty canvas to leave it free.
Label: Double-click any shape to type text in it (centred in rectangles and ellipses, and in the middle of lines, arrows and pen strokes). Press Enter (or click elsewhere) to save, or Escape to cancel and keep the old text. Text is drawn on a single line at a fixed size of 20.
Select several: Shift-click adds or removes a shape from the selection. Drag a selection rectangle on empty canvas to select every shape it touches; hold Shift while starting it to add to the current selection. With several selected, shapes show a dashed outline and cannot be resized, but can be moved, deleted, restyled, copied and duplicated.

Keyboard shortcuts

Click the canvas first so it has keyboard focus. Use Ctrl on Windows and Linux, ⌘ on a Mac.

Ctrl+Z / Ctrl+Shift+Z (or Ctrl+Y): Undo / redo.
Ctrl+A: Select everything.
Ctrl+C, Ctrl+V: Copy the selection and paste it, slightly offset. This uses the tool's own clipboard, not your system clipboard, so it only works within the page and is forgotten on reload.
Ctrl+D: Duplicate the selection in one step.
Delete or Backspace: Delete the selection.
Arrow keys: Nudge the selection by 1 unit; hold Shift to nudge by 10.
Space + drag: Pan the canvas.

Export

PNG: Downloads diagram.png, 1200 × 750 pixels, on a white background. The button briefly says “Downloaded!”.
SVG: Downloads diagram.svg, a vector file you can scale to any size or edit in a vector-graphics program.

Fullscreen

Fullscreen (toolbar): Expands the canvas to fill the whole screen, adjusting its shape to your display. A compact floating toolbar has the same tools, undo/redo, zoom, style, and PNG and SVG export.
Collapse / Expand toolbar: Tucks the floating toolbar out of the way, leaving small buttons to expand it and to exit.
Exit fullscreen: The button at the top right of the screen, or the Escape key.

Tips & guidelines

Build a flowchart by drawing shapes first, labelling them, and then adding arrows between them by dragging arrow ends onto the shapes. Move a box later and the arrows will follow.
Use Ctrl+D to duplicate a finished box instead of redrawing and restyling it.
Zoom in for precise placement, and use Fit to check that the whole diagram is inside the canvas before exporting.
Keep labels short. Text does not wrap and a line break does not show, so long labels can spill out of their shape.
Choose a stroke of dark colours on the white canvas — exports have a white background, and a very light stroke will be hard to see.
Export as SVG for something you will scale or edit, and PNG for slides and documents.

Limits

The exported area is the fixed 1200 × 750 canvas. Anything you place outside it (by panning far away) is cut off in the export.
There is no rotation, grouping, alignment or snap-to-grid, no way to bring a shape forward or send it back (newer shapes are drawn on top), no font-size control, and no image import.
Only rectangles, ellipses, lines, arrows, pen strokes and text are available — there is no diamond or other flowchart shape.
The drawing is stored in your browser, which has limited space. Very long freehand drawings use more of it, and the drawing cannot be moved to another device except by exporting an image.

Saved in your browser

Yes — the shapes and the undo history are saved automatically in this browser's local storage as you work, and restored when you reopen the page. They never leave your device. Clear diagram empties the drawing (you can undo it right away, and the history is also saved); clearing this site's data in your browser removes everything.

← All documentation