DiagramDesk diagram editor

How the DiagramDesk editor works

DiagramDesk is a diagram editor that runs entirely in your browser. You place shapes on a canvas, join them with connectors that route themselves, and export the result as an image or a PDF. There is no account to create and nothing to install, and the drawing is never uploaded: the page draws it, and the page keeps it.

Your first diagram in five steps

1. Start from your diagrams, where you can pick one of 21 templates, from a flowchart to an ER diagram, or a blank canvas.
2. Drag a shape in from the panel on the left, or double-click anywhere on the canvas to add one there.
3. Double-click a shape, or select it and press Enter, and type its label.
4. Pull one of a shape's dots onto another shape to connect them. Let go on empty space instead, and the next shape appears there, already connected.
5. When it looks right, open Export and choose a format.

Styling and arranging

Select a shape and the panel on the right shows what you can change: the fill colour from a row of swatches, the line colour and width, the corners, the opacity, the rotation, and the size and colour of the text. Select a connector and the same panel sets its colour, width and route: elbow, straight or curved. With two or more shapes selected it lines them up, by their edges or their middles, and with three or more it spaces them evenly across or down. Shapes also snap to each other as you drag; hold Shift to drag freely.

Tidying, themes and the check

With nothing selected, the panel on the right offers three things for the whole diagram. Tidy up lays it out afresh in ranks along its connectors, the way it already runs or the way you choose; with two or more shapes selected it tidies just those. A theme recolours everything at once, and shapes that were different colours stay different. Check the diagram points out what the guides on this site warn about, such as a decision with an unlabelled way out, a step that leads nowhere or a data store nothing reads, and Show finds each one on the canvas. It is advice, not a mark: a diagram can break a rule on purpose. Undo puts back anything Tidy up or a theme changed. Select a shape and the panel also says what that shape means.

Where your diagrams are kept

Every change is saved as you work, in this browser's own storage on this device. The list on your diagrams shows them all, and a diagram you delete goes to the trash first, so a slip can be undone. That storage has limits worth knowing. It belongs to this browser on this device, so a diagram made here will not appear on your phone or in another browser. Most browsers allow a site only a few megabytes of it, and a large image placed on the canvas uses it up fastest. And clearing this site's data in your browser settings deletes your diagrams with it. For anything you would mind losing, use Back up everything, in the File menu or on the start page, now and then: it saves one file holding every diagram, which Restore a backup reads back here or in another browser. The start page says when you last made one.

Sharing a link

Share makes a link with the whole diagram packed inside it, so there is nothing to upload and no account to invite anyone to. Whoever opens the link sees the diagram, read-only, and can edit a copy of their own, which is saved in their browser rather than yours. The same dialog gives the code to embed the diagram in a web page. A link holds the diagram as it was when you made it, so share again after changing it. A diagram with a large image placed on it is too big for a link; send the DiagramDesk file instead.

Importing Mermaid code

Import takes Mermaid code for a flowchart, a sequence diagram, a class diagram or an ER diagram, lays it out, and opens it as a new diagram of ordinary shapes. Anything in the code it cannot use is listed, line by line, rather than dropped without a word. Export can write a diagram back as Mermaid. The Mermaid page says exactly what is read. The same dialog draws an org chart from a list: an indented outline, or a CSV with each person's name and whom they report to.

On a phone or tablet

Drag a shape with one finger to move it, or drag bare canvas to move around. Pinch with two fingers to zoom. Double-tap a shape to type its label, and press and hold on a shape, a connector or bare canvas for a menu of what can be done there: edit, duplicate, delete, bring to front, or add a shape. Handles and connection dots grow to finger size once you touch the screen.

Working offline

The editor can keep a copy of its own files on this device, so that it and your diagrams open without a connection. Nothing is kept until you ask: use the switch below, or the same one in the Diagrams list and on the start page. Browsers that can install web apps also offer to install DiagramDesk, and it then opens in a window of its own; installing it keeps the copy too, in browsers that tell the page it was installed. The copy holds no diagram and nothing about you, the Remove button deletes it, and the cookies and storage page lists it.

What you can export

Export shows a preview of exactly what you will get. A PNG image, from one to four times the size on screen, with the diagram's own background, white, or none at all so it sits on any colour. An SVG, which stays sharp at any size and opens in other drawing tools. A vector PDF, with text you can select, on a page the size of the diagram or on A4 or US Letter. A DiagramDesk file, to keep or to reopen later, or Mermaid code for a Markdown file. Any of the pictures can hold the whole diagram or just what you have selected, and a PNG can go straight to the clipboard to paste into a document or a chat.

The shortcuts worth learning first

Ctrl or ⌘ with Z undoes and with Shift and Z redoes; with C, X and V it copies, cuts and pastes, and with D it duplicates. Scroll to zoom around the pointer, and hold Space and drag, or drag with the right mouse button, to move around. Ctrl or ⌘ with 1 fits the whole diagram on screen. The arrow keys nudge a shape by a pixel, or by ten with Shift held. Press ? in the editor for the full list, including how to work through a diagram with the keyboard alone.

Questions

Does it cost anything, or need an account?

No. The editor is free to use, and there is no sign-up of any kind.

Can other people edit a diagram with me?

Not at the same time. The editor works on one device, for one person. To share a diagram, use Share: it makes a link that carries the diagram inside it, which the other person can open, view and edit a copy of. You can also export an image, or send the DiagramDesk file.

How do I move a diagram to another computer?

Export it as a DiagramDesk file, then open that file in the editor on the other computer. Nothing syncs on its own.

What happens if I clear my browser data?

The diagrams stored in this browser go with it. Anything you exported, and any DiagramDesk file you kept, is unaffected.

Can I put a picture in a diagram?

Yes. Images can be placed on the canvas, and they are stored with the diagram in the browser, which is why a large one takes up so much of the space available.

Does anything I draw leave my device?

Not unless you send it. The drawing, saving and exporting all happen in the page itself, and nothing is uploaded. A share link carries the diagram inside the link, in the part after the # sign that browsers never send to a server, so it goes only where you send it. The privacy page sets out what the site does and does not collect.