Use a custom shape library from the web

draw.io 24 Feb 2023

Share:

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.
Open the gesture icons custom shape library in draw.io from the drawio-libs Github repository

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

  1. Click on the ... in the toolbar and select Open Library from > URL. (File > Open Library from > URL in the draw.io menu).
    Open a custom shape library stored on the web in draw.io
  2. Enter the URL of the custom library .xml file and click Open.
    Open a custom shape library stored on the web in draw.io

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.
Open the Font Awesome custom shape library in draw.io from the drawio-libs Github repository

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.
Click on Raw to see the custom library file contents and use this URL to open the library in draw.io

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 the pipeline and cloud security custom shape libraries from GitHub to draw devops and cloud security pipeline diagrams

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 wireframe kit custom libraries loaded from GitHub in draw.io

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.
Data flow diagram for threat modelling

Infrastructure diagrams

Exoscale has provided three custom libraries to draw architecture and infrastructure diagrams and made them available on GitHub.
Exoscale has provided custom libraries on GitHub for infrastructure diagrams in draw.io
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.

Make your own shapes and libraries

Use the following information to create your own shapes, styles and custom libraries.

Follow us on GitHub, Twitter, Facebook.

Share: