See shape metadata with the properties plugin

The properties plugin allows you to add extra information or instructions in the metadata of shapes and connectors. Instead of seeing this metadata only when hovering over a shape in your diagram, select the shape to display these properties persistently in the top left, both in the editor and the lightbox.

You will also more clearly see which shape is selected as it has a bright green border.

The properties plugin lets you display additional information via the shape metadata

Open this example in the diagrams.net lightbox

More information about diagrams.net plugins

Load the properties plugin

Add properties to shapes

  1. Right-click on a shape to which you want to add a new property, then select Edit Data from the context menu.
    Right click on a shape, then select Edit Data to add a shape property
  2. Enter the name of the new property in the ID box, then click Add Property.
    Add a custom property to the shape's metadata
  3. Your property name will appear on the left. Add the extra information in the field next to it, then click Apply.
    Add the extra information or instructions into the property text

You can add more than one property, providing the property name is unique.

You can add multiple properties to a shape's metadata

Shape properties can be used similar to variables. See how to use properties as placeholders

Permanently load the plugin

If you want to always use the properties plugin, add it to the plugins list so it will be loaded each time you create or edit a diagram.

  1. From the menu, select Extras > Plugins.
    Open the plugins list
  2. Click Add.
    Add a new plugin
  3. Paste the path and filename of the plugin /plugins/props.js into the URL field, then click Add
    Add the properties plugin
  4. Click Apply.
    Add the properties plugin

Reload your browser tab to load the plugin into the diagram editor.

Share a diagram using the properties plugin

By default, diagrams published to URLs do not load plugins.

To allow someone to explore your diagram, when you publish a diagram to a URL (File > Publish Link), add the &p=props URL parameter to the link before you share it (as highlighted in blue in the screenshot below).

Share a link to your diagram and enable the properties plugin

Use the properties plugin in Confluence

As an administrator, you can customise the draw.io apps for Confluence so that they load plugins by default.

Confluence Server: Download the properties plugin file from Github, attach it to a page, and load it into the draw.io app configuration in your instance’s administration.

See how to add a plugin to Confluence Server

Confluence Cloud: As this is one of the approved plugins for Confluence Cloud, you can edit the JSON configuration code to load the properties plugin by default.

See how to load plugins by default in draw.io for Confluence Cloud