Custom graphics

New in version 12.1.0.

Users with Enterprise or Enterprise Plus licenses can upload custom graphics for use in customer journey maps, value chains, and BPMN 2.0 diagrams. Uploaded files must be in .SVG format and individually no larger than 20 KB.

The following elements can be customized:

Customer journey maps

  • Persona
  • Touchpoint
  • Moment of truth
  • Customer
  • Decoration

Value chains

  • Process
  • Collapsed process

BPMN 2.0 diagrams

  • IT System
  • Additional Participant

Custom graphics are tied to the workspace to which they are uploaded–if you have multiple workspaces and want to use custom graphics in each, you must upload them separately to each workspace.

Hint

Custom graphic files do not count towards the file limit for a workspace.

To upload custom graphics, do the following:

  1. Create or save the image you want to use as an .SVG file.

  2. In Process Manager, navigate to the Setup button in the toolbar. Select Define notations/attributes from the drop-down menu. The Define notations/attributes dialog will open.

  3. In the Modeling language section, select either customer journey map, value chain, or BPMN 2.0 diagram.

    ../../_images/notation.png
  4. In the Diagram element types section, select the element type you want to set the custom graphic for. Note that not all elements are able to be customized.

    ../../_images/element.png
  5. In the Custom attributes section, click the Custom Graphics tab. Click the Add button. The Upload Custom Graphic dialog will open, with details about the upload requirements for .SVGs.

    ../../_images/customgraphic.png
  6. Click Choose File and select the file you want to upload. The Name field will by default be filled with the file name. A preview of the image will be displayed below. Edit the name if you want, and then click Add.

    ../../_images/customsvg2.png
  7. Process Manager will perform a validation while your file uploads, to make sure it fits all requirements (see “Validation criteria” section below).

  • If the validation is successful, your custom graphic will be displayed in a list in the Custom Graphics tab.
  • If the validation fails, a dialog will be displayed, showing you the original image and what the image will look like after being scrubbed. If the scrubbed image is fine, click Add scrubbed image.
  • If the validation fails, it may also be that the uploaded .SVG does not meet our requirements.
  1. Your custom graphic will be displayed in a list in the Custom Graphics tab, where you can now set and use it for modeling.

Validation criteria

.SVG is a flexible, powerful file format. However, this flexibility makes it vulnerable to security exploits. To prevent possible security problems, Process Manager will check each .SVG file you try to upload and scrub anything potentially malicious from the file. It will then show you a preview dialog, so you can see the differences between the original and scrubbed file. If the scrubbed file is acceptable to you, you can then continue with the upload.

../../_images/scrubbed.png

The requirements for .SVG files are:

  • The root element of the .SVG must contain the required attributes either width and height or viewBox. The width and height attributes must be absolute size.
  • The attributes of the .SVG file must not contain JavaScript in attributes
  • The elements and attributes of the .SVG file must not contain URLs
  • The .SVG file must not exceed the size limit of 20 KB
  • The .SVG file must not exceed the supported complexity of 2000 anchor points

Here is the list of allowed tags and attributes for .SVG files:

Tags: “svg”, “style”, “g”, “path”, “ellipse”, “circle”, “polygon”, “rect”, “line”, “polyline”, “defs”, “clipPath”, “mask”, “use”, “radialGradient”, “linearGradient”, “stop”

Attributes: “version”, “xmlns”, “xmlns:svg”,”xmlns:xlink”, “xlink:href”, “xlink:type”, “xlink:actuate”, “xlink:show”, “viewBox”, “zoomAndPan”, “xml:space”, “contentStyleType”, “contentScriptType”, “preserveAspectRatio”, “id”, “class”, “name”, “style”, “transform”, “d”, “points”, “x”, “x1”, “x2”, “y”, “y1”, “y2”, “cx”, “cy”, “r”, “rx”, “ry”, “width”, “height”, “fill”, “fill-opacity”, “fill-rule”, “opacity”, “offset”, “stroke”, “stroke-width”, “stroke-opacity”, “stroke-dasharray”, “stroke-miterlimit”, “stroke-dashoffset”, “stroke-linecap”, “stroke-linejoin”, “type”,”clip-path”, “mask”

Modeling with custom graphics

Once uploaded, custom graphics can be used in customer journey maps, value chains, and BPMN 2.0 diagrams.

To use custom graphics in a model:

  1. Open your existing customer journey map, value chain, or BPMN diagram, or create a new one from scratch, in the Editor.
  2. Select an element you have defined a custom graphic for.
  3. In the Attributes panel, click the arrow next to the Image field.
../../_images/attribute.png
  1. Select your custom graphic from the drop-down menu.
../../_images/customcvg_editor.png
  1. Your element will now change from the default graphic to the custom graphic you defined.

Models with custom graphics can be imported, exported and published to Collaboration Hub the same as standard models.