7 posts tagged with "shapes"

When you change from light to dark mode in draw.io, the colours automatically switch intensity so that your diagram and its labels are easy to read. You can set now specific colours for shapes, connectors, text and the diagram page background for both light and dark modes via the updated colour palette.

Adaptive colours are important when part of your team prefers to work in dark mode, and the rest prefers light mode.

Colour style - use a specific dark and light colour​

1. Select one or more shapes, connectors, text labels, or the diagram background, then click on a colour block to open the colour palette, for example, the Fill colour of a shape.
   
2. Click Advanced to see the dark mode colour settings in the palette.
   
3. Enter a colour value in the Light mode field (sun). The dark mode value will update automatically to its inverse if you are using the Automatic adaptive colour setting.
4. To use a specific dark mode colour instead, enter a different colour value in the Dark mode field (moon). This colour is now User-defined.
   
5. Click Apply to save the colour style to your selected shapes, connectors, text or diagram page background.

You'll notice that the colour block now has two triangles, in both dark and light mode.

Tip: To use the same colour in dark and light modes, enter the same value in both fields.

Adaptive colour settings​

Each page in a multi-page diagram has its own adaptive colour setting.

With nothing selected in your diagram page, click on the diagram Style tab. Change the Adaptive Colors setting. Alternatively, select Extras > Adaptive Colors from the menu.

• Automatic: Changes the intensity to enhance the contrast of all coloured elements in a diagram. This is set by default.
• Simple: Improves the contrast of only the black and white elements, and retains all other colours. Thus the same palette can be used in dark and light modes.
• None: Disables adaptive colours in dark mode completely. Diagrams will appear as they would in light mode even if you enable dark mode in the draw.io editor.

Set defaultAdaptiveColors in the draw.io configuration to simple or none when you want your diagram colours to stay the same in light and dark modes.

Step by step: Configure default adaptive colours

Sharing diagrams with adaptive colours​

The adaptive colour settings are saved in the diagram file. When you share your diagram file, a URL link with the diagram or HTML code with the diagram embedded, when it is reopened in the editor, the diagram will display with the adaptive colour settings it was saved with.

Related​

Diagrams pose a particular challenge when automatically adjusting colours for readability in dark mode.

If you want to reset a diagram to automatically adapt to dark mode, you can remove all the user-defined dark-mode colours.

See how to set custom dark-mode colours in the style and colour palettes with the light-dark function for each color definition.

Learn more about how adaptive colours work when you export to an SVG image.

As new features are added to draw.io and the menu is refined, new keyboard shortcuts are also built into the editor. Here are some of the new and useful shortcuts for diagramming in draw.io.

Move selected shapes and connectors​

First, select the shape you want to move, then hold Shift+Alt+drag and drag the cursor to reposition them. You can move shapes, connectors, or multiple selected shapes and connectors this way.

This shortcut will always move the selected elements, even if they are not currently under the cursor when you drag it.

Note: When you move a connector this way, it will de-attach itself from the source and target shapes, unless they are moved with the connector.

Increase/decrease font size​

Select a shape or connector or label, and press Ctrl+Shift +/- (NumPad) to increase or decrease the text size.

This only works with the + and - keys on the number pad.

Alternatively, change the font size in the Text tab of the format panel.

Note: This keyboard shortcut will always change the text size of the entire label, even if you have selected only some text inside a label.

Increase/decrease shape size​

Select a shape, and press Ctrl+Shift+arrow key to increase or decrease the right or lower edge of the shape. This increases or decreases the Height or Width of the shape (in the Arrange tab of the format panel).

Clear all extra waypoints on a connector​

Waypoints are used in connectors to change its path. Sometimes you may want to remove all of them quickly.

Select a connector and press Alt+Shift+R to reset the waypoints back to the default path.

More keyboard shortcuts in draw.io​

There are many other mouse + keyboard shortcut combinations in draw.io to help you diagram faster, as well as many keyboard shortcuts described in previous posts.

Next time you go through the draw.io menu, or right-click and open the context menu, check and see if there is a keyboard shortcut next to the command you want to use.

Here's a one-page reference sheet that you can print out containing the most common and useful keyboard shortcuts in draw.io.

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.

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.
   

The Azure shape library will load in the left panel, with its shapes separated 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.

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.

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.

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.
  

• 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.
  

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.

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.

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.
   
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.
   

Export and embed your Azure diagram​

Select File > Export as from the menu.

• Image formats: Select one of PNG, SVG, or JPEG.
• PDF: You can also crop the PDF export to the diagram size.

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

• Confluence Cloud
• Jira Cloud
• Google Docs
• Microsoft Word, Excel and Powerpoint
• Google Sites
• GitHub markdown pages
• Notion

You can create network diagrams from scratch in draw.io using shapes that match the platform you are using - AWS, GCP, Veeam, Azure, Cisco, IBM and many more. Both the draw.io AWS19 and GCP Icon shape libraries for network and cloud architectures have been updated recently.

Open the updated network shape libraries​

Both the Amazon Web Service and Google Cloud Platform shape libraries have been updated recently. Enable the shape libraries that you need to use in draw.io.

1. Click on More Shapes in the left-hand panel.
2. In the Networking section, click on the checkboxes next to the libraries you want to enable, then click Apply.
   

If you want to see the shape names even when you aren't hovering over a shape in the shape libraries, click on the Labels checkbox in the shape library selection dialog.

Hover over any shape in the shape libraries on the left of the drawing canvas to see a preview and its name.

Drag the shape library panel edge towards the drawing canvas to expand the panel and see more shapes.

Updated AWS19 network shapes​

Enabling the AWS19 shape library will give you a large number of sub-libraries in the left panel, sorted into logical categories. Expand the categories that you need by clicking on the sub-library's title or the arrow next to it.

As you can see below, the AWS19 shape library for modelling cloud service architectures on Amazon's platform is large and varied.

Create a new diagram with the AWS19 shape library already enabled

Updated GCP Icons​

The large Google Cloud Platform shape library containers older labels and icons, whereas the updated GCP Icons are sorted into their own shape library. Click More Shapes and enable the GCP Icons library to see updated sub-libraries shown below.

Create a new diagram with the GCP Icons shape library already enabled

Related​

Some cloud visualisation platforms can output diagrams in the .drawio format, including Cloudcraft and Cloudockit.

Embed the exported diagram in your system documentation or display it in your wiki with one of our draw.io integrations.

Network diagram templates

draw.io includes many templates for common cloud infrastructures on several platforms. Select Arrange > Insert > Template from the menu.

• Learn about infrastructure diagrams
• Use the Veeam shape library for your network diagram
• Draw an abstract C4 model to define a network architecture
• Model your physical rack layouts in draw.io

The double click behaviour in draw.io has been updated in version 13.4.2 to be more convenient. Now, when you double click on the blank drawing canvas, you can quickly add a shape or text from the selector to your diagram.

You can choose from a range of common shapes from the General shape library using this method.

Tip: These shapes will use the style you have set to be the default style.

Set a new default style for shapes and connectors​

The shapes will use the default style. You can easily set a new default style.

1. Add a shape or a connector and style it as you wish.
2. Select the shape, then in the Style tab of the format panel on the right, click on Set as Default Style.

Note: You need to set new default styles for shapes and connectors individually.

Keyboard shortcut: Ctrl+Shift+D on Windows, or Cmd+Shift+D on macOS

Clear the default style​

If you no longer want to add shapes in your custom default style, you can reset draw.io to use the original default style.

1. Make sure nothing is selected.
2. In the Style tab of the format panel on the right, click on Clear Default Style.

Keyboard shortcut: Ctrl+Shift+R or Cmd+Shift+R

See more shortcuts for working quickly with styles in draw.io

A more relaxed and informal style for shapes, fills and lines is often used in infographics, teaching materials, maps and reports so that the diagrams are little less sterile and boring. The rough style adds a hand drawn shading options, rough outlines and connectors, and handwritten text labels.

We spent a couple of hours integrating rough.js to update our existing, and fairly limited, comic style, and the result is pretty useful.

Note: This rough style is available in version 13.3.1 onwards.

Apply the rough style​

1. Select one or more shapes and connectors that you want to roughen.
2. In the format panel on the right, click Sketch to apply the rough style to your selected shapes, labels and connectors.

Use the comic style​

The rough sketch style appears more like a handdrawn diagram. Use the comic style for a more subtle effect.

1. Select the shapes and connectors you want to apply the comic style to.
2. In the Style tab of the format panel, click on Properties.
3. At the bottom, change the Sketch Style dropdown to Comic.

Change properties to customise the sketch style​

There are many other properties you can change to customise the sketch style. Note that not all of these properties are applicable to the style you have chosen, but may apply to a different style.

Click on a shape or connector, then expand the Properties section in the Style tab of the format panel on the right. The most common properties are as follows.

• Jiggle - how roughly or randomly the borders, connectors and the fill colours are drawn.
• Fill Weight - set the width of the 'pen' used to draw the fill colour in a shape.
• Hachure Gap - set the distance between the sketched fill lines.
• Hachure Angle - set the direction of the sketched fill lines. Alternatively, change the angle with the Direction shape property.
• Disable Multi Stroke - use only one pass of the 'pen' in the sketched border of a shape or a connector.
• Disable Multi Stroke Fill - use only one pass of the 'pen' in the sketched fill colour in a shape.
• Sketch Style - choose between the rough and comic sketch styles.

Change the style of the entire diagram​

You can set a new global style using one of the presets instead of selecting shapes and connectors and applying styles individually.

1. Make sure nothing in the diagram is selected, then click on the Style tab in the format panel on the right.
2. Select the style settings you want to use. Use the preset styles to change the colours of the shapes, their borders and text, connectors and the drawing canvas. Use the checkboxes to quickly change other style settings:
   • Sketch applies the rough style.
   • Rounded rounds the corners of the shapes.
   • Curved changes the connector style to curved.

Note: You will only see the style options that are applicable to the selected shape(s).

Use the rough=1 URL parameter​

Alternatively, add rough=1 as a URL parameter so the whole diagram has that style. For example, when using the free draw.io online diagram editor:

https://app.diagrams.net/?lightbox=1&rough=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fjgraph%2Fdrawio-diagrams%2Fmaster%2Fblog%2Fgitflow-examples.drawio

See a description of all of the supported URL parameters.

The rough style can make flowcharts a little less intimidating in training and onboarding materials.

Tables have been overhauled in draw.io to be much more flexible and robust than the old HTML tables you previously used. With the new tables, you can choose from various layouts, drag to resize rows and columns, move rows by dragging them, and build cross-functional flowcharts within a table and its cells.

Tip: The entity shape used in UML entity relationship diagrams has also been updated to take advantage of the updated table features.

Add a table to a diagram​

Use the table tool in the toolbar to add a table to your diagram as you would in Microsoft Word or Google Docs.

1. With nothing selected in your diagram, click on the Table tool in the toolbar.
   
2. Hover over the squares until the number of rows and columns you want are highlighted, then click to insert a table on the drawing canvas. You can add more rows and columns later.

Add a table title when you insert a table​

1. Click on the Table tool in the toolbar.
2. Enable the Title checkbox, then .
3. Hover over the squares until the number of rows and columns you want are highlighted, then click to insert a table on the drawing canvas.
   

This automatically adds a title row that spans all of the columns.

Shortcut: Hold down Shift as you drag to select the size of the table. This will add a title row even if you haven't enable the Title checkbox.

Add text to table cells​

Click once to select the table, then click again on a cell to select it. Enter your text just like you would a shape label.

Add a cross-functional flowchart (table)​

Cross-functional flowcharts use categories to group steps in a business process, for example, how steps are assigned to different functional groups (such as departments), or stages of approval. Each category is represented by a vertical or horizontal swimlane. As standard flow charts are unable to show this information, many businesses prefer to use cross-functional flowcharts.

Create a table with horizontal and vertical swimlanes, where you can add process steps into the cells of the table, and join them with connectors to show the process flow.

1. With nothing selected in your diagram, click on the Table tool in the toolbar.
2. Select the Container checkbox, or hold down the Ctrl/Cmd key while you select a table with the number of rows and columns you need. Click to add the table with cross-functional swimlanes to the drawing canvas.
   
3. Select the table, click on a title cell, then enter the title text. If you are entering one of the row titles, as you enter the text will be centred - it will move into position when you finish adding the text.

As the cells in a cross-functional table function as container shapes, you can add shapes to them. Build your flowchart by placing the steps in their cells and then joining them with connectors.

Add columns and rows​

1. Select a cell inside of a table.
2. Select the Arrange tab in the format panel on the right.
3. Use the table tools to add a column or row before or after your selected cell or row. If you have selected the entire table, this will add a row or column at before the beginning or at the end of the table.

Use a keyboard shortcut to copy a table row​

1. Click on a cell in your table, then click on it again to select the row.
2. Hold down either Ctrl or Cmd, grab and drag a copy of the row to a new position in the table, or press Enter.

Move rows in a table​

You can drag rows to new positions in the updated tables, either by selecting and grabbing the row itself, or using the reposition icon that looks like two horizontal lines on the right border of each row.

• Select the row - click to select a cell, then click again to select the row - then drag it to a new position.
• Alternatively, select the table (not a cell or a row/column), then grab and drag the row's reposition icon.
  

Note: The reposition icons on the right double as connection points. If you try to drag the reposition icons without first selecting the table, you'll attach a fixed connector at that point.

Resize rows and columns in a table shape​

• Grab and drag the row or column borders to resize the row or column.

Make sure you don't grab the reposition icon on the right border of a row - this will move a row, rather than resize the column.

You can also resize the table keeping all of its cells relative to each other - this is behaviour is enabled by default.

• Select the table, then drag the round handle at the side of the table instead of the final column or row border.
• Drag the orange diamond in the middle of the table below the table title row.

If you don't want to resize the other cells, change the table properties.

1. Select the table (not a cell or a row/column).
2. In the format panel on the right, expand the Properties section.
3. Ensure the checkboxes for Resize last row and Resize last column are selected.
   

Resize all swimlane titles​

When you resize a cell in a cross-functional table, you will resize only that particular column's or row's title cell. You can resize all row or column titles at once so they are consistent.

• Hold down Shift as you resize one of the column or row titles.

Delete rows or columns​

1. Select a cell inside of a table.
2. Select the Arrange tab in the format panel on the right.
3. Use the table tools to delete the selected column or row.

Use the keyboard to delete a row​

1. Click on a cell in the table, then click on it again to select the row.
2. Press the Delete key, or right click and select Delete from the context menu.

Merge and unmerge cells​

Merge adjacent cells and unmerge merged table cells via the Arrange tab in the format panel, or using the Table tool in the Sketch whiteboard-like editor theme.

• Merge is only available when you have selected multiple adjacent table cells.
• Unmerge is only available when you have selected a merged cell in a table.
  

HTML tables are still available​

The HTML table shapes are still available in the Misc shape library (part of the General shape library). Hover over the shapes to see their names.