If you’re new to draw.io and want to start creating professional flowcharts, network diagrams, or technical sketches, understanding the draw.io editor layout is the first step toward working efficiently. The draw.io apps, integrations, and online editor are among the leading solutions for drawing technical diagrams and web-based sketching, and once you understand how the interface is organized, you’ll be able to build diagrams far faster than clicking around aimlessly. This guide walks through every major component of the draw.io editor — from storage options and the toolbar to shape libraries and the format panel — so you can start diagramming with confidence.
Store Your Diagrams Anywhere You Want
One of the standout features of draw.io as a security-first diagramming tool is that it separates the diagramming functionality from data storage — meaning you decide where your files live. With the online editor, you can save diagrams to various cloud storage platforms, keep them in your browser, or store them locally on your device. If you’d rather work without an internet connection at all, draw.io also offers a standalone desktop app for fully offline diagramming.
Integrations With Popular Platforms
draw.io apps integrate with a wide range of storage and documentation platforms, including Atlassian Confluence Cloud and Jira Cloud, Google Workspace applications, GitHub, GitLab, Microsoft 365 apps, Notion, and more. This flexibility is one of the biggest reasons technical teams adopt draw.io — the diagram editor looks and behaves identically no matter which platform you’re using it through. That means a diagram you create inside Confluence can be opened later in the desktop app or another integration without losing formatting or data.
Understanding the Diagram Editor Layout
Like most professional diagramming software, the draw.io interface is context-sensitive. The tools you see in the toolbar and the panels surrounding the drawing canvas change depending on what type of element you’ve selected. If you select a connector, for instance, you won’t see shape-specific styling options, and vice versa.
Pro tip: Hover your mouse over any button, tool, or option in the editor to reveal a helpful tooltip explaining its function.
Since draw.io offers different editor themes, the exact position of the menu and toolbar may vary slightly. However, all core draw.io features remain available regardless of which theme you choose.
Navigating the Menu
The menu bar adapts based on your current selection — some entries may be greyed out or hidden. For example, you can’t edit a shape’s style properties while a connector is selected. Here’s a breakdown of each menu:
- File — Manage diagram files (create new, open, import/export, print) and access custom shape libraries.
- Edit — Select and modify shapes, connectors, and their styles.
- View — Toggle panels and helper tools like the scratchpad, layers, and ruler.
- Arrange — Group and organize elements, insert templates and images, and apply automatic layout features.
- Extras — Switch editor themes, enable math typesetting, toggle the start screen and autosave, and manage tags or custom configurations.
- Help — Access keyboard shortcuts, support resources, or download the desktop app.
A status message to the right of the menu shows whether you have unsaved edits or if the diagram has been autosaved — a useful detail for anyone working on longer technical documents.
The Toolbar: Your Quick-Access Command Center
The toolbar gives you fast access to enabling or disabling panels, zooming, undo/redo, adding shapes and connectors, and even generating diagrams or drawing freehand shapes. Each editor theme has its own toolbar configuration, so it’s worth hovering over each icon the first time you use a new theme.
Some toolbar tools only activate once the right element is selected. For example, the Delete tool stays greyed out until you’ve selected a shape, connector, or text block on the canvas.
Working With Shapes and Shape Libraries
Shapes in draw.io are organized into logical groups called shape libraries. Since there are hundreds of shapes available, not all libraries display at once — you expand or collapse each one from the left panel by clicking its name.
Shapes are arranged into logical groups called shape libraries in draw.io
To keep your workspace uncluttered, it’s good practice to enable only the shape libraries relevant to your current project:
- Click More Shapes at the bottom of the left panel.
- Browse the categorized shape libraries and check the boxes next to the ones you need.
- Click Apply to confirm your selection.
Once your libraries are set up, simply click or drag any shape onto the drawing canvas to start building your diagram.
The Scratchpad for Frequently Used Shapes
The scratchpad acts as your personal shape library, letting you store shapes or groups of shapes you use often. Drag one or more selected shapes from the canvas onto the scratchpad, and they’ll be saved for quick reuse — just click them again to drop another copy onto the canvas.
Add multiple shapes as one element on the scratchpad in draw.io
Finding Shapes Fast With Search
Rather than scrolling through dozens of libraries, type a shape name directly into the search field to get instant matches — this also pulls in matching clipart when you’re online.
Tip: If your first search doesn’t return the shape you need, try a related keyword instead.
The Drawing Canvas
This is where the actual diagram-building happens — placing, connecting, and styling shapes in the central workspace. A grid displays by default to help keep everything aligned and evenly spaced.
- Panning: Use scroll bars, or right-click/middle-click and drag on an empty area. The scroll wheel moves the canvas vertically.
- Zooming: Use the Zoom In/Out toolbar tools, or hold
Ctrl(Windows) /Cmd(macOS) while scrolling. Zooming doesn’t affect your diagram’s actual size.
The drawing canvas of draw.io
Tip: Enable rulers from the View menu for more precise placement.
Organizing Complex Diagrams With Multiple Pages
For larger technical projects, draw.io lets you split a diagram across multiple pages. Click the vertical ellipsis (⋮) underneath the canvas to access the page menu, click any page tab to switch views, or click the plus (+) icon to add a new page.
Mastering the Format Panel
The format panel on the right side of the editor holds all the options for styling shapes, connectors, text, and the overall diagram. What appears here is entirely context-sensitive — select a connector and you’ll see connector-specific options; select only text and you’ll see just text styling controls.
Style Tab
With one or more shapes selected, the Style tab lets you change fill and outline colors, edit style attributes, and copy/paste styles between elements. Selecting a connector instead reveals options for curved, straight, or right-angled lines, broken vs. solid strokes, line jumps, and arrowhead styles.
The Style tab in the format panel lets you change shape and connector styles in draw.ioIf you want hands-on practice applying these styles, working through a basic flowchart tutorial is a great next step.
Text Tab
The Text tab controls font, size, and styling of labels. You can adjust vertical and horizontal alignment, writing direction, font and background color/opacity, and spacing. Word Wrap and Formatted Text are enabled by default, allowing HTML-like styling within labels — including hyperlinks.
Style your labels in the Text tab in the format panel on the right in draw.io
Only the Text tab in the format panel is displayed when you edit the text in a label in draw.io
Tip: Double-click text to edit it directly and select individual words — at that point, only the Text tab appears since you’re no longer editing the shape itself.
Arrange Tab
Use the Arrange tab to reposition shapes and connectors, adjust stacking order (front/back), resize elements, or rotate them. You can also click Edit Data to manually adjust a shape’s metadata or Edit Link to attach a hyperlink.
Organise your shapes on the drawing canvas with the Arrange tab in the format panel in draw.io
Organise your connectors on the drawing canvas with the Arrange tab in the format panel in draw.io
Global Diagram Options
When nothing is selected, the format panel switches to show options that apply to the entire diagram and canvas. The Diagram tab covers print and canvas settings, while the Style tab lets you apply a global style to all shapes, text, and connectors at once.
The page and drawing canvas options available in draw.io
The style options let you globally change the shape, connector and text styles in draw.io
Ready to Build Your First Diagram
Understanding the draw.io editor layout — from where you can store your files, to the toolbar, shape libraries, and the format panel’s Style, Text, and Arrange tabs — gives you a solid foundation for creating clear, professional diagrams efficiently. Each panel is designed to surface exactly the options relevant to what you’ve selected, which cuts down on clutter and speeds up your workflow once you know where to look.
The diagram exported as a PNG image
With this interface knowledge in hand, the natural next step is putting it into practice: use the tools and default shape libraries covered above to draw your first basic flowchart. Whether you’re documenting a business process, mapping out a network architecture, or sketching a quick wireframe, draw.io’s flexible, security-first approach to diagramming makes it a solid choice for technical teams and individual users alike.