Can I add custom shapes to draw.io?

Question

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?

Answer 1

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.

Answer 2

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.

You can change the style from right side panel.

Answer 3

You can create a shape in standard SVG format, and go to File > Import ... and choose the SVG file. For example:

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
      <line x1="12" y1="0" x2="24" y2= "12" stroke="blue" stroke-width="1"/>
      <line x1="24" y1="12" x2="12" y2="24" stroke="blue" stroke-width="1"/>
      <line x1="12" y1="24" x2="0" y2="12" stroke="blue" stroke-width="1"/>
      <line x1="0" y1="12" x2="12" y2="0" stroke="blue" stroke-width="1"/>
    </g>
</svg >

Will give you a diamond shape.