How to add custom shapes to draw.io

Your corporate logos and icons in draw.io

In draw.io, you can easily add custom shapes to the canvas, making it the perfect tool for creating diagrams with your corporate logos, employee headshots, custom icons, and more.

In this blogpost, we’ll look at three different ways you can add and store custom shapes in draw.io for Confluence and Jira.

Use Admin-managed libraries

If you are using draw.io for Confluence Cloud, your Admins can share custom shapes and libraries with individual users, specific teams, or across your entire organization. This is the best way to ensure everyone has access to the latest approved brand assets.

1. Add custom shapes directly to the canvas

The quickest way to add a one-off custom shape is to put it directly onto the canvas. If you have custom images or .xml shape files on your device, you can:

• Drag and drop: Simply drag an image from your computer and drop it anywhere on the canvas.

• Import from Device: Head to File > Import from > Device and select the relevant files.

• Import via URL: If you found a great shape library online (like an .xml file hosted on GitHub), you can import this directly without downloading it to your device. Go to File > Open Library from > URL. Paste the link to the XML file, and draw.io will load those shapes directly into your sidebar.

Import shapes from your device, or directly from a URL

2. Add shapes to your personal Scratchpad

If you have a specific icon or group of shapes you use frequently, you can add them to the Scratchpad, essentially a personalized shape library. You can add individual shapes, groups of shapes, and even entire diagrams, making the Scratchpad an ideal place to store shapes and diagrams you use again and again.

Note: If you don’t see the Scratchpad in your draw.io editor, head to View in the top menu and click on Scratchpad.

To add shapes from your canvas to your Scratchpad:

• Left-click to select a shape, or use Ctrl / Cmd + left-click to select multiple elements like shapes, connectors, etc. To group shapes before adding them to the Scratchpad, right-click on the selected shapes and click Group.

• Click the plus (+) icon on the Scratchpad in the left side menu to add them.

For more information on editing the Scratchpad, including renaming and deleting elements, importing elements, and exporting the Scratchpad, see, What is the draw.io Scratchpad?

3. Create custom shapes using the text editor

If you want greater control over how a shape behaves (like how it scales or where connectors attach), you can describe shapes using XML.

The basic draw.io stencils (shapes) use XML to define geometry and style. You can view and edit this by selecting a shape and clicking Arrange > Insert > Shape. This opens the Edit Shape dialog where you can edit the code directly.

For more information, see, Create custom shapes in draw.io using the text editor, and for advanced shapes, see, Create and edit complex custom shapes

Pro tip: Export custom shapes, logos, and images as a shape library

It’s easy to add shapes as and when you need them. However, if you have a collection of shapes, logos, and images you want to use frequently or share with your team, creating a custom shape library in Confluence Cloud is the best way to go about it.

For step-by-step instructions on how to do this, see, Create custom shape libraries in draw.io for Confluence Cloud

Want to dive deeper into the world of draw.io? Access our linktr.ee page to follow us on social media and learn how others use draw.io, as well as pick up some helpful tips and tricks.