Usually, it's faster and easier to decorate elements, connections, and loops according to the data in their fields—for example, creating a decoration rule that selects all elements with the element type "Organization", and color-codes them based on their tags.
But, if you haven't added field data, or you just want to tweak the style of one single item on the map, direct decorations is the perfect tool.
To use them, simply hover over an element, connection, or loop, and the direct decorations toolbar will appear:
If you'd rather have the toolbar appear when you click on an item instead of hover, add the following in the Advanced Editor:
@controls {
toolbar: click;
}
If the toolbar is a distraction and you prefer to use rule-based decorations, you can disable the toolbar altogether:
@controls {
toolbar: false;
}
The table below lists all of the icons you'll find in the direct decorations toolbar for elements, connections, and loops, and what action each icon exposes to you.
| Icon | Action | Elements | Connections | Loops |
|---|---|---|---|---|
| Edit label and type | ||||
| Edit font color, font size, font style, and font alignment | ||||
| Edit color | ||||
| Edit size | ||||
| Add an image | ||||
| Delete item | ||||
| More options | ||||
| Add a border | ||||
| Add a bullseye | ||||
| Add a shadow | ||||
| Change connection direction | ||||
| Add delay markings | ||||
| Reset direct decorations | ||||
| Visit these docs! |
There are just a few additional things you should know about direct decorations:
Direct decorations always override decorations in your Views.
This includes all the code in your Advanced Editor. For example, if you direct decorate an element to color it blue, and then you use the view to color it red, it will still be blue.
Direct decorations, just like element position and connection curvature, are stored separately for each map in the project.
If you want to change the direct decoration for an item, you can duplicate the map and make your changes in the new copy.
When you're editing the map, the direct decorations toolbar will hide popovers.
However, anyone who has view-only access to the map or is viewing a presentation or a shared/embedded map will still see your popovers (the direct decorations toolbar is hidden for them, since they can't make edits to your map).
If you're building popovers and just want to see how they look before you publish, you can either follow the instructions above to turn off the direct decorations toolbar, or click the ellipsis icon in the bottom right corner and select "Switch to preview mode".