Design Studio

Blank canvas

Your architecture starts here

Add a component, then use Select or Connect. Touch: drag empty space to pan; use two fingers to pan or pinch to zoom. Desktop: use Pan, or hold Space and drag from any tool.

100%

Download

Export diagram as PNG

Exports the full diagram at 2× resolution with 32 logical pixels (64 output pixels) of padding.

Background

Design Library

Name this design

Choose a name to save this design to your local library.

Design Library

Delete saved design?

Share a snapshot

Create a share link

Quick reference

Studio controls

Library & files

Save
Create or update a design in this browser’s Design Library
Export JSON
Download the complete design as portable JSON
Import JSON
Open portable JSON; unsaved work is confirmed before replacement
Export PNG
Download only the rendered diagram as an image

Mouse, trackpad & pen

Add
Click a component
Place
Drag a component to the canvas
Move
Drag an object; selected objects move together
Resize
Drag a handle on a sole selected object
Edit label
Double-click an object or arrow; click away to commit
Select
Click an object or arrow; Shift-click to toggle
Marquee
Drag empty canvas
Clear
Click empty canvas
Pan tool
Drag anywhere with the primary button
Temporary pan
Space + drag or middle-drag
Connect tool
Click a source, then a target; or drag a source to a target
Eraser
Choose Eraser, then press an object or arrow to delete it
Clear canvas
Choose Clear to remove the entire diagram
Zoom
Wheel or trackpad
Fit
Use Fit in View in the header

Keyboard

Enter / Space
Add focused component
Space + drag
Pan canvas
Enter
Commit a label edit
Shift + Enter
Add an object label line
Escape
Cancel a label edit
A
Start connecting from the single selected object
Missed click
The current connection attempt stays active
Escape
Cancel the current tool or gesture; return to Select
Ctrl/Cmd + D
Duplicate selected objects with an offset
Delete / Backspace
Delete selected items
Ctrl/Cmd + Z
Undo
Ctrl/Cmd + Shift + Z / Ctrl + Y
Redo

Touch

Add
Drag a component from the drawer to the canvas
Tools
On phones, use the left rail for Select, Connect, Eraser, or Clear
Eraser
Activate Eraser, then tap an object or arrow to delete it
Clear
Tap Clear to remove the entire diagram without selecting items
Select
Tap an object or arrow; tap empty canvas to clear
Multi-select
Press and hold an object or arrow
Move & resize
Drag an object or its visible resize handle
Navigate
Drag empty space to pan; use two fingers to pan or pinch to zoom
Connect tool
Drag from a source object to its target