Skip to main content

         This documentation site is for previous versions. Visit our new documentation site for current releases.      


Updated on January 21, 2021

Add diagrams to show a process flow, to identify the main UI elements of an application, or to illustrate complex concepts. When you create or update diagrams for your topics and articles, keep in mind the following considerations for Pega-compliant figures and art.

You can request new diagrams or have existing diagrams modified by contacting the Creative Services team. For more information, see Art requests from Creative Services.


When possible, callout text that is rendered as actual text outside of the diagram image is preferable, as any text entry is easier to translate and maintain than images.

  • For unordered callouts, which present the diagram elements in no particular order, use UI labels as the target of the callout. If there are no UI labels to which you can point, describe the targets of the callouts. In both cases, you then provide an explanation in a list below the diagram. In DITA, use a definition list (dl). In Drupal, use a list with no bullets, to resemble the appearance of a definition list.
  • For sequenced callouts, which present the diagram elements in a specific order, use capital letters and not numbers for the callouts. Write affirmative sentences and add an introductory sentence as we do for all figures. For more information on changing numbered bullet points to letters, see Changing bullet point styles in the Drupal editor.
    • Use the Steps tool in Snagit to add the letters. Ensure that you use our Pega yellow color (#FEB53A).
    • Do not change the default circle size.
    • In DITA, add the explanations of the lettered callouts in a two-column table, with the letter in the left column and the callout text in the right column.
    • In Drupal, add the explanations of the letters using an ordered list, with the list bullets corresponding to the callout letters.


Do not add borders to diagrams.

For example:
Sample diagram showing a process
Sample diagram showing elements of a process
Sample diagram showing how a feature works

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us