How to make a diagram online

Deciding the shape of the diagram first

A diagram is a route through an idea, and the route has to be decided before any block is drawn. Write down the start, the end and the two or three things that happen in between. If the route does not fit in a sentence, the diagram is trying to do two jobs at once.

The shape follows from the route. A left-to-right flow suits a process with a beginning. A stack of boxes suits a list of equal things. A ring of boxes suits a loop that keeps going. Picking one of those shapes first saves the fiddling of rearranging a finished page.

Keep the block count low enough to read at a glance. Ten blocks is comfortable, twenty is a poster, and forty is a wall nobody scans. The system diagram guide applies the same thinking to services and subsystems.

• Write the start, the end and the middle
• Choose a flow, a list or a loop before drawing
• Ten blocks is a readable diagram
• One diagram, one job

Sketching the blocks in the right order

Draw the blocks with the Shape tool (U) and keep them plain while you work: a rectangle, a hexagon, an ellipse, whatever carries the meaning. Style comes later, and a page of unstyled blocks is much faster to rearrange than a page of finished ones.

Work in a sensible order: the entry point, then the path, then the exits. That way you know how many blocks you have before you start, and a block drawn twice can be deleted with one keystroke rather than left in a corner confusing the count.

Text belongs inside the shape when the shape carries a name, because the label then moves with the block. Free-standing text is for things that are not in a box, such as a title above the diagram or a note beside a branch.

• U draws the blocks
• Style the page after the layout settles
• Entry point first, exits last
• Labels inside shapes, titles outside

LABELING each block so it reads at a distance

A block label has one job: name the thing in the block in as few words as possible. Write the noun first, since that is what a reader scans for. Input validation, not Validate the input, and Order service, not The service that handles orders.

Text elements carry ten font choices and a size slider, so a diagram can be typed plainly or set with a little character. Inter is the safe default, and a display face such as Bangers or Press Start 2P is a decision rather than a default.

Check the labels by stepping back from the page. Zoom out until the words blur and the structure should still be readable as shapes, which is how a reader meets the diagram first. If the shapes alone tell the story, the labels are doing their job.

• Noun first, then the qualifier
• Ten fonts, with a size slider
• Inter for plain labels
• Zoom out and check the shapes alone

Grouping parts by toggling them in the layers panel

The layers panel on the right lists every element in the document with a count in its header, and each row can be shown, hidden, selected or deleted. That makes it the place where a diagram gets organized rather than a place where you hunt for one lost box.

Use show and hide to isolate a subsystem while you work on it, then unhide everything before the export. A hidden element leaves the drawing and the exported file, so a half-finished branch can sit in the page without confusing a reader.

Deleting from the panel is as permanent as deleting an element, so undo is the safety net: 20 versions of the document are kept and Ctrl/Cmd+Z steps back. The shortcut list has the rest of the recovery keys.

• Every element has a row in the panel
• A count of the elements sits in the header
• Hide a branch while you work on it
• Delete from the panel, undo from the keyboard

Note: The panel lists flat elements rather than groups. The canvas has no group object, so a subsystem is a set of rows you hide together instead of one row you can collapse.

Fitting the whole diagram back into view

The command to reach for is Fit content to view in Quick actions (Ctrl/Cmd+K), which frames every visible element and the mind map in the pane. Run it before you judge the diagram, because something that looks broken at 40 percent zoom is often just cropped.

Zoom runs from 0.1x to 5x, so you can pull right back to see the page and then push in to check a label. Panning happens with the Pan tool (H), the mouse wheel, a middle-mouse drag or two fingers on a touch screen.

The last check at that distance is the one that matters: can a stranger say what the diagram is about in one sentence? If they can, the diagram is finished. If they cannot, the problem is usually the block count or the labels, not the styling.

• Fit content to view frames the whole page
• Zoom from 0.1x to 5x
• H, the wheel, middle mouse or two fingers pan
• Can a stranger describe it in one sentence

Choosing an export format for where it goes next

A diagram headed for a slide deck wants a PNG at a size that matches the slide, and a diagram headed for a document wants a vector SVG. The export menu offers Export as PNG, Export as JPG, Export as Vector (SVG) and Print current view, and the choice comes down to what happens to the file next.

SVG is the format that survives being edited. Text stays as text, shapes stay as shapes, and the file scales to a projector screen without blurring, which is why a diagram that will be revised is worth exporting as a vector rather than as a picture of a diagram.

Print current view opens your browser's print dialog, which is the route to a paper copy and to a PDF produced by the browser. The export guide compares the four options, and the shape guide covers the styling controls these blocks are built from.

• PNG for slides and chat
• Vector SVG for anything edited later
• JPG when the file size matters
• Print current view for paper and browser PDFs

A checklist you can reuse

• The start, the end and the middle of the route are written down
• The blocks are laid out before any styling is applied
• Every label starts with the noun it names
• The block count is low enough to scan
• Hidden elements were restored before the export
• The whole page was checked with a fit to the view
• The export format matches where the diagram is going

Common mistakes to avoid

• Styling before the layout. Colored, filled blocks look finished, which makes them expensive to move. Keep the page plain until the route is right, then style it.
• Too many blocks. A diagram with forty boxes cannot be scanned, so a reader takes the first three and ignores the rest. Split it into two diagrams.
• Labels that are sentences. A long label shrinks to nothing when the page is scaled down. Name the thing in two or three words and put the detail in a note.
• Exporting with parts hidden. Hidden elements are left out of the exported file, which is how a missing box sneaks into a finished diagram. Unhide everything, then export.
• Exporting a cropped view. The export follows the viewport, so a diagram that spills past the window arrives with its edges missing. Fit the content to the view first.

Frequently asked questions

How many shapes should one diagram have?

Ten is a comfortable number, because a reader can hold that many blocks in mind at once. Twenty works if the diagram is arranged in two clear groups, and beyond that you are usually looking at two diagrams that have not been separated yet. The count in the layers panel header is a quick way to see where you have landed.

Can I hide part of a diagram while I work on the rest?

Yes, and it is one of the most useful habits in the app. The layers panel on the right has a show and hide control on every element, so you can park a branch you are not ready to finish and see the working part clearly. Remember to unhide before exporting, because hidden elements are left out of the file.

Why did part of my diagram disappear from the export?

Two things cause it. The first is a hidden element, which is left out of the exported file by design. The second is the viewport: the export captures what the pane can see, so anything scrolled off screen is missing. Fit content to view before exporting and check the layers panel for anything still hidden.

Will Canvasola rewire the arrows if I move a box?

No. The canvas has no connector objects, so an arrow is a shape you place yourself and it stays where you put it when the box moves. A diagram that changes shape often needs its connectors adjusted by hand, and the hand drawn flowchart guide covers the practical way to work with that.

This guide is part of the canvas and sketching collection. For the wider product tour, read the complete Canvasola guide, and keep the keyboard shortcut cheat sheet open while you work.