Visualize Your Confluence Page Tree with Ease

Our app provides a simple and effective way to create a diagram or process map of your Confluence page tree hierarchy. By placing our macro on a page, you can quickly generate a visual representation of your page tree.

Our macro can be used with all content types, including comments, blogs, and space home pages, making it a versatile tool for all your Confluence needs.

Side note: As blogs and comments do not have a hierarchy, the macro can be configured to display external page tree hierarchy

Open

Page Tree Visualization diagram

Usage

To insert the Page Tree Visualization macro into your Confluence pages, you can use the macro browser. This can be accessed by selecting Insert more content > Other macros from the main toolbar or by typing an opening curly bracket "{" and selecting the Open macro browser option from the tooltip.

If you prefer a faster method, you can also search for the macro by typing a few letters of its name after the curly bracket.

Open

Using macro browser

After inserting the macro, a configuration dialog will be automatically shown. Here you will be able to customize many aspects of your diagram's appearance, which will be discussed in the following sections.

To preview your changes, press the Preview button. To save your changes, press the Save button and save your Confluence page. To discard all changes, click the Cancel button.

How to Select Pages Displayed in Page Tree Visualization Macro

Automatic

Macro automatically visualize subpages of the page where it is placed. Maximum subpages depth is 3.

Manual

You can manually pick pages to be visualized in the macro. Open macro configuration window and use "Pages" field to select which pages should be visualized. Start typing title of the page to see all options. 

After page is selected it can be also unlinked by pressing the rubbish bin button next to it's name.

Tip: When selecting multiple pages of the same name, their subpages will be merged in the diagram. Titles of merged pages are not clickable.

Exclude subpages from the visualization

If you don't want to display certain subpages in the process map you can achieve it by placing "exclude" or "exclude-children" label to these pages.

(Labels functionality can be found in the edit mode of the page)

• "exclude" - the page will be excluded from the process map

• "exclude-children" - only subpages of the page will be excluded from the process map

Customizing the Layout

By default, children will be displayed in rows. To display them in a column, you can add a “children-vertical” label to their parent page.

Horizontal layout:

Vertical layout:

Order of Visualized Pages

The order of cells in the diagram follows the order of the pages in the confluence page tree.

Display Options

The left side of the macro configuration window contains all available options for customization, while the right side displays a preview of your changes. Please note that in order to see any changes in the preview window, you need to click the Preview button:

Predefined color themes

Predefined color theme enable you to add Page tree visualization macro easily as there is no need to define colors for each page level. Color themes ensure consistency in the use throughout your Confluence Space.

You can create your own space-specific color themes directly within the Space tools administration page. For detailed guidance on creating color templates, please refer to the Space tools administration section for more information.

Predefined color themes preview:

Color customization

On the top of predefined color themes, you can customize the colors used in your diagram by Use Custom Theme checkbox and selecting colors in the color picker fields below.

Please refer to the following image to see which settings affect which parts of the diagram.

Custom colors configuration:

Chevrons

You can choose to display the third level of subpages without chevrons by using a checkbox in the macro configuration window.

With chevrons (default option):

Without chevrons:

Labels

You may add labels to the left and right sides of the diagram by filling in the Start Label (left) and Goal Label (right) fields in the macro configuration dialog.

Additional features

Linked pages

The "Linked pages" feature allows you to visualize pages that contain a link to a particular cell in the diagram. These pages will become visible after clicking on the button that appears next to cell's title.

In the "Linked pages" field, you can select which pages to search for links to cells in the diagram.

Linked pages configuration:

After following the above steps, the page that is being linked to will display a circular button in the diagram. Clicking the button will display a pop-up with all the pages that link to said page. You can customize the color of the button by selecting a color in the Linked pages button field (with Use Custom Theme checked further below in configuration).

Linked pages pop-up:

Pages which you no longer want to check for links to the pages in a diagram can be removed by clicking the rubbish bin button next to their name.

Toolbar

Hovering your mouse pointer above a diagram will reveal a toolbar below it. The toolbar contains several useful functions.

Visible toolbar below diagram:

• Fullscreen - clicking the full-screen button will display your diagram in full-screen mode. To exit, press the Esc key or click within the body of the diagram.

• Print - clicking the print button will bring up the browser print dialog, enabling you to print the diagram.

• Toolbar lock - toggling the toolbar lock will cause toolbars of all diagrams to be revealed until it's disabled.

Space Tools Administration

On this page, Space administrator can adjust setting for Page Tree Visualization macro. There are two options availible: Set default theme for space and Create custom color theme. 

Set default theme for space

With this configuration, you can set the default color theme for newly added macros. This chosen theme will also be applied when the selected macro theme becomes unavailable, such as when it's deleted. You have the flexibility to select from four predefined themes or from your personalized ones. This setting is unique to each individual space.

Create custom color theme

The second option enables you to craft and modify your personalized color themes. Please note that these custom themes are unique to each individual space. Therefore, if you wish to apply a custom theme across multiple spaces, you'll need to create it separately in each one.

*In current version it is required to fill color field in HEX color format (ex. #FFF or #FFFFFF).

Integration with other datasources 

Communardo metadata plugin integration

You can manually define the cells of your diagram by using the Communardo metadata plugin.

First you need to define Metadata fields for your space, which will function similarly to pages within your diagram. To do this, press the Space tools button at the bottom of the space overview sidebar and select the Metadata option.

On the next screen, in the Metadata fields tab, press the Add metadata field button. The Title field will eventually become the cell title in your diagram. If the title matches the title of a page in your space, the page will be linked to in the diagram. Otherwise, clicking the link will search Confluence for the title text.

To allow the cell to have children, keep the Type of the metadata field set to Multi Select and add all desired children titles to it by using the input and button below. The order in which the children are listed here will also be used in your diagram. If the children you add as options to a metadata field will not have children themselves, you will not need to create them as metadata fields.

After creating your metadata fields, you need to add them to a Metadata set. Click the Metadata sets tab and press the Add metadata set button. Give your new set a descriptive Title and add your metadata fields to it by selecting them in the Metadata field select input and clicking the Add metadata field button.

Now you are ready to actually use your metadata to generate a diagram. Create a page and insert a Page Tree Visualization - Metadata macro into it. Expand the metadata sidebar, press the Configure sets button and select the metadata set you have created in the previous step. Your metadata fields will appear in the sidebar. Add all the options you wish to display as children of each metadata field into their respective input boxes. You may also add a metadata field as a child of another metadata field—this will cause it to become nested inside the cell of that field and not be displayed at the top level of the diagram. When you are done, save the page.