Display or hide diagram elements using the tags plugin

The tags plugin allows you to display and hide elements of your diagram based on metadata, or tags. This can be useful for exploring complex diagrams, for example to indicate which code segments run on which system, or which department is responsible for which steps in a flow chart.

Learn more about plugins

Load the tags plugin

Using tags on shapes in a diagram

Tags are a space-separated list of words stored in the tags property of a shape’s properties, or metadata. Select a shape, then click Edit > Edit Data to see a shape’s properties (or right-click and select Edit Data or press Ctrl+M).

Tags can be added or deleted via the shape's properties

See what tags have been applied

When you hover over a shape, the tag will appear as a tooltip.

Hover over a shape to see its tags

Alternatively, you can look at shape’s properties. Select a shape, then press Ctrl+M.

Show and hide shapes based on their tags

If you know the names of the tags, you can use the Tags dialog to hide shapes based on their tags or show hidden shapes.

  1. Click Extras > Tags.
  2. Type the name of the tag, and click Hide or Show.

Use the Tags dialog to show and hide shapes with tags

Add a tag to a shapes

There are a number of ways to add tags to shapes. You can add the tags property to the shape metadata manually, but it may be easier to use the Hidden Tags dialog.

  1. Click Extras > Hidden Tags. Select a shape or multiple shapes.
  2. If you want to apply an existing tag, click on the existing tag name.
  3. To add a new tag, type its name into the text field, and press Enter.
    Add a tag via the Hidden Tags dialog

Remove a tag from a shape

You can edit the shape’s data and delete the tag name from the tags property manually, or you can use the Hidden Tags dialog to remove it.

  1. Click Extras > Hidden Tags.
  2. Select a shape or multiple shapes, and click on one of the blue tag names in the dialog. This removes the tag from the shape. For example, to remove the manage tag from the orange shapes, first select them, click on manage in the dialog.
    Remove a tag via the Hidden Tags dialog

Permanently load the tags plugin

If you want to use tags in your diagrams regularly, add the tags plugin to the plugins list to load it 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 /plugins/tags.js into the URL field, then click Add, then click Apply.

Load the tags plugin on Confluence Server

Administrators can add the tags plugin to draw.io in Confluence Server via the draw.io configuration.

  1. Download the tags plugin from GitHub and attach it to a page in your instance.
  2. As an administrator, go to the draw.io Configuration section, in the left-hand menu of your Confluence Settings. Click on the Configuration tab.
  3. Add the plugins option to the JSON code in the UI configuration. Use the relative URL to the attachment you saved in step 1. For example: "plugins": [ "/download/attachments/55279729/tags.js" ]
    Add the tags plugin to draw.io in Confluence Server
  4. Click Save Changes.

Load the tags plugin on Confluence Cloud

To ensure security, you are limited to the official plugins in draw.io for Confluence Cloud. Instead of attaching the JavaScript file to a page, an administrator can add the plugin ID, tags, to the JSON configuration code.

  1. Go to the draw.io Configuration tab in the draw.io Configuration section of your Confluence Cloud settings.
  2. As an administrator, add { "plugins": ["tags"] } to the JSON code.
    Add the tags plugin to draw.io in Confluence Cloud
  3. Click Save.

Learn more about loading plugins in Confluence Cloud