Use a custom shape library from the web
draw.io makes it easy to collect your most used shapes, images, custom shapes and diagram fragments in your own convenient custom shape library. Many custom libraries are available online as open source for you to use in diagrams, infographics and user documentation.
When you store the custom library .xml
file on a website, anyone who has access to that website can use your shapes to draw their diagrams.
Load a custom library from the web
- Click on the
...
in the toolbar and select Open Library from > URL. (File > Open Library from > URL in the draw.io menu). - Enter the URL of the custom library
.xml
file and click Open.
The shape library will appear in the shapes panel on the left. If is it a particularly large library, containing detailed shapes, or if it is stored on a slow web server, it may take a while to load into the shapes panel.
Previously opened custom libraries from the web will remain open in the editor until you close them.
Load a library as a URL parameter
Links that include your custom library as a URL parameter are easier to share with new users who may be unfamiliar with the menu in our editor.
-
Edit the URL of our online diagram editor and add the
clibs
parameter and the address of the custom library with URL encoded characters. For example, this custom library is hosted in our GitHub repository.https://app.diagrams.net/?clibs=Uhttps%3A%2F%2Fjgraph.github.io%2Fdrawio-libs%2Flibs%2Ftemplates.xml
-
To only open that particular library and hide the default shape library, add the
libs=0
parameter:https://app.diagrams.net/?libs=0&clibs=Uhttps%3A%2F%2Fjgraph.github.io%2Fdrawio-libs%2Flibs%2Ftemplates.xml
You can also load custom shape libraries into draw.io in Confluence Cloud. Administrators can set these libraries to be available by default to users in their Confluence instance.
Publicly available custom libraries
draw.io-libs custom library collection
Our repository on Github contains a selection of general libraries and vector shapes, including UN-OCHA icons, technical diagram templates, OSA icons, Font Awesome shapes for accurate website mockups, and many more.
Follow any link from the draw.io-libs
repository to open that custom library in the draw.io editor.
Important: Make sure you click on Raw in Github to get the link to the custom library file contents, rather than the GitHub wrapper.
DevSecOps
For modelling security and operations in development pipelines, GitHub users djschleen and aquasecurity have created some custom libraries that work well together: pipeline shapes with stages, bends and forks in various colours; and vendor and product logos for software and service components for cloud security stages.
Open these two public custom libraries in the draw.io editor
The pipeline shapes can snap together, and can also be used to draw neat transport line and timeline diagrams.
Puzzle wireframe kit
Create mockups of apps and websites with wireframe components, avatars, form elements, icons and more, with the custom shape libraries and wireframe kit
compiled by Puzzle.
Puzzle also provides several libraries in their corporate colours to help their users create infographics following their brand guidelines.
Threat modelling
Michael Henrikson’s threat modelling shape library has been integrated into draw.io. It was originally available on GitHub.
Infrastructure diagrams
Exoscale has provided three custom libraries to draw architecture and infrastructure diagrams and made them available on GitHub.
Open these libraries
Note: When using publicly available custom shape libraries, make sure you check any license or usage restrictions.
More public custom libraries on GitHub
Many more have published a wide range of public custom libraries that you can use in draw.io on GitHub. Here is a small selection.
-
Puppetlabs - logos, icons and illustrations. Open
-
Azure libraries - an Azure icon collection, organised by category Open
-
LibRagnar2.xml - dataflow diagram shapes. Open
-
Ubiquiti - detailed SVG icons for Ubiquiti network diagrams. Open
-
IBCS shapes - for IBCS-compliant charts and tables in diagrams. Open
-
HashiCorp logos - static and animated logos from HashiConf in 2020. Open
-
AREI library - AREI-compliant symbols for electricians and DIY renovators in Belgium. Open
Make your own shapes and libraries
Use the following information to create your own shapes, styles and custom libraries.
-
Create a new custom shape library, add shapes, and export it as an
.xml
file to share it with others. -
Create and edit your own custom shapes by describing their geometry and style. You can create complex custom shapes that include embedded links and images.
-
Style your custom shape after adding it to the drawing canvas and add the styled shape to your custom library.
-
Customise the connection points on any shape on the drawing canvas with our visual editor to make sure connectors attach to logical positions. Add this modified shape to your custom library.