Draw Azure architecture diagrams with updated shapes

draw.io 01 Dec 2022

Share:

The Azure shape library in draw.io has been updated. You can draw Azure architecture diagrams for your cloud infrastructure from scratch, or import .vsdx files or exported diagrams from automated infrastructure documentation apps like Cloudockit.
Azure architecture diagrams are easy to draw with the hundreds of Azure shapes in draw.io

Open this Azure architecture example in the online draw.io editor

Draw Azure diagrams in logical blocks

You will likely never draw a single Azure diagram that contains all levels of detail. You can either start with the overview diagram and work from this top level down to the details, or bottom up starting with the logical blocks in your architecture.

  • Azure architecture overview diagram: Includes design principles and the broad choices of specific services in your subscriptions.

  • High-level Azure diagrams: Includes Azure services and their configuration, resource groups, virtual networks, and environments. Performance, regional service provision, availability zones, monitoring, backup and recovery services are included at this level of detail.

  • Low-level diagrams: These are less common, and usually document the specific details needed to implement the design and the continuous integration/continuous deployment pipelines.

Enable the Azure shape library

  1. Go to our online editor or open one of the draw.io integrations or our desktop app.
  2. Click on More Shapes at the bottom of the left panel.
  3. In the Networking section, click on the checkbox to enable the Azure shape library, and click Apply.
    Select the Azure shape library in the Networking section to use these shapes

The Azure shape library will load in the left panel, with its shapes separated into categories.
The Azure shape library is well organised into categories

Tip: You can also search for Azure using the Search Shapes text box to see a list of all Azure shapes not sorted in categories.
Search for 'azure' to see all the shapes without them being sorted into categories

Use the scratchpad

Many Azure architectures repeat sub-sections of the architecture for backup or redundancy purposes. Instead of placing copies, you can put that sub-section into the scratchpad.

  1. Select all the shapes on the drawing canvas that you want to repeat.
  2. Drag these onto the scratchpad in the left panel.

Click on the sub-section shape in the scratchpad to add it to the drawing canvas, or drag another copy from the scratchpad into position.
Use the scratchpad to quickly copy common subsections of your Azure architecture diagram

See how to use the scratchpad in draw.io

Use rectangles to indicate regions

Use rectangles from the General shape library to indicate a region. Once you’ve placed and resized a region shape, send it to the back on the Arrange tab of the format panel so that it is placed behind the Azure architecture’s shapes.
Move region shapes to the back via the Arrange tab of the format panel, behind the other shapes in your Azure diagram

Next, update the rectangle style to separate regions in the Style tab of the format panel on the right.

  • Dashed outline - Change the Line of the region to Dashed using the dropdown list, and ensure the Fill checkbox is not selected to remove the background.
    Change the Style of basic rectangles in the format panel to indicate different regions in your Azure architecture

  • Coloured background - Click on the colour block to the right of the Fill checkbox and select a new colour from the palette. Ensure the Line checkbox is not selected or set the colour to match the fill colour.
    Change the Style of basic rectangles in the format panel to indicate different regions in your Azure architecture

Tip: Group all of the shapes contained within the region with the region rectangle so you can more easily move them together.

Draw connectors

Hover over any shape in the diagram to drag a connector from one of the four connection arrows, then drop it on another shape (or group of shapes) to connect the two.

Floating connectors: Floating connectors move around the perimeter of the shape intelligently as you reposition it on the drawing canvas. Drop the connector on the target shape when the outline is blue.
Use floating connectors to make it easier to move the Azure shapes around on the drawing canvas

Fixed connectors: Fixed connectors remain connected to a particular point on the target shape when you reposition it. Drop the connector on a connection point (a little cross) or when the outline of the shape is green.
Use fixed connectors to ensure a connector stays attached to that particular point when move the Azure shape around on the drawing canvas

Learn more about working with connectors in draw.io

Azure architecture templates

Several Azure diagram templates are available in the template library.

  1. Click Arrange > Insert > Template to open the template library.
  2. Expand the Cloud section and select Azure to see the Azure diagram templates.
    Start with a template for your Azure architecture diagram in draw.io
  3. Click on a magnifying glass in the top right of any template to see a preview.
  4. Select a template and click Insert to add it to the drawing canvas.
    Start with a template for your Azure architecture diagram in draw.io

Export and embed your Azure diagram

Select File > Export as from the menu.

Tip: Make sure you select the Include a copy of my diagram in the Image export options dialog to allow those you share it with to edit it.

Embed diagrams in the following documentation platforms

Follow us on GitHub, Twitter, Facebook.

Share: