How to Align Shapes in draw.io (Neat Diagrams Fast)
Wobbly shapes make a diagram look careless, even when the content is right. Learn how to line up a row and a column of shapes in seconds in the free draw.io web app with Arrange, Align, using the steps of an online shop order.
Step by step
Neat in seconds
- Align shapes. Wobbly shapes make a diagram look careless, even when the content is right, and stakeholders notice. draw.io can line everything up in 2 clicks. Here is the tidy result we will build.
- Blank diagram. Start a blank diagram in draw.io.
A messy row
- A messy row. First, make a messy row on purpose. Drag an Ellipse from the General shapes onto the page and label it Order received. Add a Rectangle a bit lower, labelled Check stock. Then add a Diamond a bit higher, labelled In stock? draw.io snaps each shape to the grid as you drop it, but that does not line them up. Different shape sizes and small slips make the row wobble.
Align a row
- Align middle. Select all 3 shapes: click Order received, hold Ctrl and click the other 2. Then open Arrange, Align and choose Middle. Their middles now sit on one line.
Align a column
- A messy column. Columns wobble too. Drop 3 Rectangles down the right side of the page. The first one is Pick items. Put Pack order below it, a little to the right. Then put Ship order below that, a little to the left.
- Align center. Select the 3 steps, then choose Arrange, Align, Center. They now stack in a straight column, lined up on the first shape you clicked.
- The tidy page. Click an empty part of the page to clear the selection. You now have a straight row and a straight column.
Recap
- The rules. Select the shapes, then open Arrange, Align. Use Middle for a row and Center for a column. Do it before you connect anything, so your connector lines come out straight too.
Common mistakes
- Choosing Center for a row. Center lines shapes up on one vertical line, so a row collapses into a pile of overlapping shapes. Use Middle for a row and Center for a column.
- Using Top for shapes of different sizes. An Ellipse, a Rectangle and a Diamond have different heights, so lining up their tops still looks uneven. Middle lines up their centres, which looks straight.
- Aligning after drawing the connectors. Lines that were drawn between wobbly shapes can keep bends after the shapes move. Align the shapes first, then connect them.
- Only one shape selected. Align needs at least 2 shapes to line up against each other. Hold Ctrl and click each shape so they are all selected before you open Arrange.
When a business analyst uses this
Before you share an as-is process map for a workshop or sign-off, select each row of steps and use Arrange, Align, Middle. A tidy map keeps stakeholders talking about the process, not about why the boxes look crooked.
Questions people ask
How do I align shapes in draw.io?
Select the shapes by clicking the first and holding Ctrl while you click the others. Then open Arrange, Align and choose Middle for a row or Center for a column.
What is the difference between Middle and Center in draw.io?
Middle lines up the middles of shapes on one horizontal line, which straightens a row. Center lines up their centres on one vertical line, which straightens a column.
Should I align shapes before or after connecting them?
Before. If you align the shapes first, the connector lines you draw between them come out straight.
