Can I add custom shapes to draw.io?

by Andrew   Last Updated January 14, 2018 09:03 AM

I like the wide variety of shapes available (General, Arrows, Electric, etc.) but I need some more electrical symbols. Can I add custom shapes somehow?

Tags : draw.io


Answers 2


Under File->New Library you will get a dialog that allows you to drag images and SVGs into it. You can also add images/SVGs using the filesystem picker and by URL (the buttons at the bottom of the dialog).

Once you’ve added your custom shapes, give the library a filename and press save. This will save the library as a library file in your selected storage and add the library to the sections on the left-hand side. Using the icons above the library you can edit it again, or remove it from your sidebar. The shapes in that library will then behave as any other library.

Custom libraries persist in your sidebar on a per-browser basis, if you want to add them to another browser use File->Open Library to add again. When refreshing the library will remain in place, only specifically removing it from the sidebar using the cross icon will remove it.

There's a slightly old video on custom shapes using Google Drive on YouTube.

David
David
September 06, 2013 16:22 PM

You can create your own shapes. For this go to Extras > Create shape. It requires some XML formatted shape detail as we see in SVG but different. You can check their official documents to understand different components.

Example

<shape aspect="variable" h="24" name="share2" strokewidth="inherit" w="24">
  <connections/>
  <foreground>
    <strokewidth width="0.5"/>
    <path>
      <move x="12" y="0"/>
      <line x="24" y="12"/>
      <line x="12" y="24"/>
      <line x="0" y="12"/>
      <close/>
      <close/>
      <move x="10" y="16"/>
      <line x="10" y="12"/>
      <line x="15" y="12"/>
      <line x="15" y="14"/>
      <line x="18" y="11"/>
      <line x="15" y="8"/>
      <line x="15" y="10"/>
      <line x="8" y="10"/>
      <line x="8" y="16"/>
      <close/>
    </path>
    <fillstroke/>
  </foreground>
</shape>

Above code can be used to create the following shape.

enter image description here

You can change the style from right side panel.

Amit Gupta
Amit Gupta
January 14, 2018 08:43 AM

Related Questions



How to arrange nodes in "horizontal tree layout"?

Updated April 04, 2015 15:01 PM

How can I present a image-box in draw.io?

Updated April 05, 2015 18:01 PM

Collapsable/hidden text boxes in draw.io

Updated April 17, 2015 20:01 PM