How to Show and Manage the Dimensions of a Shape in a Draw.io Figure

When creating technical diagrams, floor plans, or UI wireframes in the Draw.io web application (now officially known as diagrams.net), precision is key. While the tool is famous for its ease of use, many users struggle to find the setting that displays the exact width and height of a shape directly on the canvas.

Here are the three most effective ways to view and show dimensions in your Draw.io figures.

1. Using the "Arrange" Panel for Live Dimensions

The fastest way to see the current size of any object is through the sidebar properties. This is the standard workflow for most designers.

1. Open your diagram in the Draw.io web application.
2. Select the shape you wish to measure.
3. On the right-hand side of the screen, click on the "Arrange" tab in the format panel.
4. Look for the Size section. Here, you will see the Width and Height in pixels (pt) or your chosen unit of measurement.
5. Pro Tip: You can check the "Constrain Proportions" box to maintain the aspect ratio while resizing.

2. Enabling the "Dimensions" Property on the Canvas

If you want the dimensions to be permanently visible as a label on the shape itself, you can enable a specific metadata property.

• Select the shape on your canvas.
• Go to the top menu and select Extras > Edit Properties (or press Ctrl+Enter).
• Look for a property named "Dimensions". If it is not there, you can add a custom property, but a faster way is using the Measurement tool.
• Alternatively, right-click the shape, select Edit Data, and check if the template includes a size variable.

3. Using "Measurement" Shapes from the General Library

For architectural or engineering drawings where you need "dimension lines" (arrows showing the distance between two points), Draw.io has a dedicated set of tools.

1. In the left-hand sidebar, click on "More Shapes" at the bottom.
2. Ensure the "General" or "Mockup" libraries are enabled.
3. Look for the Measurement shapes (usually depicted as a horizontal line with arrows and a text box in the middle).
4. Drag this onto your canvas and snap the ends to the corners of the shape you are measuring.
5. Double-click the text box to manually enter the dimension (e.g., "100px" or "5m").

4. Enabling the Grid and Rulers for Visual Accuracy

If you don't need the numbers printed but need to ensure everything is aligned, use the global UI guides.

• Rulers: Go to View > Rulers (Ctrl+Shift+R) to see a scale at the top and left of the web application.
• Grid: Ensure View > Grid is checked. You can adjust the grid size in the "Diagram" tab on the right panel when no objects are selected.
• Units: Change from Points to Millimeters or Inches in the Diagram tab to match your project requirements.

5. Automated Labels using Placeholders (Advanced)

For power users, you can use "Placeholders" to automatically display the width and height as text.

• Select the shape and click Edit Data.
• Check "Placeholders".
• Double-click the shape to add text and type: %width% x %height%.
• The web application will dynamically replace these variables with the actual dimensions of the shape as you resize it.

Conclusion

Showing dimensions in the Draw.io web application can be done through the Arrange panel for quick checks, or via Measurement lines and Placeholders for professional documentation. By mastering these UI elements, you can transform a simple flowchart into a precise technical diagram. Whether you are scaling a server rack or a room layout, diagrams.net provides the tools necessary for pixel-perfect accuracy.