The quickest way to learn livediagram is to build something. This walkthrough takes you from a blank canvas to a small connected diagram. You do not need to sign in, the canvas always works as a guest.
Create a new diagram
Open a new diagram. This is livediagram's entry point: the welcome flow where you can start from a blank canvas or pick a template and a theme.
Choose Blank to follow along from scratch, or pick a template if you would rather start from a ready-made layout. On your very first diagram the editor offers Show me around, the welcome tour of the essentials; take it or dismiss it, and rerun it any time from Settings → Editor. Either way you land on the editor ready to go.
In a hurry? Just Draw skips the welcome flow entirely and drops you straight onto an empty canvas: click the Just Draw button on the wizard's step row (or the one on the livediagram homepage), or open /new?blank=1 directly.
Give the diagram a name. Click the title in the header at the top of the editor and type. Renaming is instant and saved for you. Names cap at 60 characters — typing simply stops there, which is plenty for a title and short enough to stay readable in a tab bar or a list row.
Add your first shapes
Find the Palette panel (the floating panel labelled PALETTE, in the top-right of the canvas
by default). The Shapes tab is open by default.
Tap a shape tile to drop it onto the canvas at its default size, or drag on the canvas to draw it at the size you want. Try a Square or a Stadium (the pill shape) to start.
Double-click the shape to add a label, then type. Press Enter or click away to commit the text. A selected empty shape also shows an Add text button in its toolbar, and simply typing while a shape is selected starts a label too.
Drop a second shape nearby the same way. If a shape is selected when you add the next one, the new shape inherits its size, handy for chaining similarly-sized nodes.
For the full set of shapes, devices, and icons you can drop, see the Palette guides.
Connect them with arrows
Hover a shape and look for the quick-connect + affordances around it. Drag from one to another shape to draw an arrow that stays pinned to both.
Prefer to draw freely? Pick the Arrow tool from the Palette's Draw category and drag between two points.
Select an arrow and right-click it to change its style: straight, curved, or angled, plus line thickness, dashes, and arrowhead shape. Double-click an arrow to give it a label.
Keep going
You now have a connected diagram. From here you can:
- Move and multi-select. Drag to reposition; drag on empty canvas to marquee-select several elements at once.
- Recolour everything with a theme.
- Share it live. Hand a colleague a link and they join the same canvas. See Sharing your diagram.
Made a mistake? Undo and redo live in the Tab Activity panel in the bottom-left corner (they stay on its collapsed strip even when the panel is folded away), and the common keyboard shortcuts are in Keyboard essentials.
Was this article helpful?