How to override MacroBrowser postPreview function?

Hi all, I am currently modifying the Mermaid Macro Plugin on Confluence Server such that users can input the diagram code directly in the macro browser dialog. I’ve accomplished this part but now the preview does not show the diagram.

I know I need to override the “postPreview” function but I can’t seem to find any examples on how. Would really appreciate any help. Thanks!

Hi @ChongJingHong ,

This depends on the current macro implementation details. I had a brief look at mermaid-js and your open source plugin code. It is currently implemented as a rich-text macro, whereby it is taking the macro body that the user enters, doing some slight cleanup/escaping and then rendering the html. Then on the front-end mermaid-js uses that initial html to render the diagram.

Therefore I believe that to support rendering from the markup provide in a macro parameter, you will need to modify to handle the data coming from the parameter. The parameter content will be available as a string in the execute method. You will want to invoke renderDynamic with the parameter value instead of the body, and you may need to do some additional formatting to ensure that the final html is in the format that mermaid-js expects.


Hi Alex, thanks for your reply.

I’ve done what you wrote above and the preview still shows the string instead of the diagram.

	public String execute(Map<String, String> parameters, String body, ConversionContext context)
			throws MacroExecutionException {


String code = null;
		if (parameters != null){
			code = parameters.get("Code");
if (ConversionContextOutputType.PDF.value().equals(outputType)
				|| ConversionContextOutputType.WORD.value().equals(outputType)
				|| ConversionContextOutputType.FEED.value().equals(outputType)
				|| ConversionContextOutputType.EMAIL.value().equals(outputType)) {
			return renderImage(code);
		} else {
			return renderDynamic(code, theme, width);

This is the string that is returned at the end of the renderDynamic(code, theme, width) function:

[INFO] [talledLocalContainer] <div class=“mermaid” style=“overflow-x: auto; width: 100%”>
[INFO] [talledLocalContainer] %%{init: {‘theme’:‘default’}}%%
[INFO] [talledLocalContainer] sequenceDiagram
[INFO] [talledLocalContainer] Alice->>+John: Hello John, how are you?
[INFO] [talledLocalContainer] Alice->>+John: John, can you hear me?
[INFO] [talledLocalContainer] John–>>-Alice: Hi Alice, I can hear you!
[INFO] [talledLocalContainer] John–>>-Alice: I feel great!
[INFO] [talledLocalContainer] </div>

which is the same as when I try to render the diagram from the body.

Hey @ChongJingHong ,
If it is just showing the string directly and not a parsing error that might indicate that the mermaid javascript code is not running. You could try adding a breakpoint in your browser dev tools to the mermaid-plugin.js code and verify that it is running and not hitting any errors.

Could you also copy the exact html that is contained within the macro preview and share it?

Although when I test on the master branch with your sequence diagram code I am seeing a mermaid parsing error. Could you try with a very simple diagram such as:

Alice->>John: Hello John, how are you?

If the macro execute method is returning the exact same thing for both the old version and new version, then I can’t see what would be the problem unless the javascript resources have somehow broken.
If you’d like you can push the branch to the repository and I can take a look as well.


Hi @aknight,

You are right that mermaid-plugin.js is not executing. But I’m not sure why.

Here’s the html you asked for:

<div id="macro-browser-preview" class="macro-preview">
    <iframe src="/confluence/s/q86or5/8703/NOCACHE/_/blank.html" frameborder="0" name="macro-browser-preview-frame" id="macro-preview-iframe">
            <html class="js-focus-visible" data-js-focus-visible="">
                    <title>Preview Macro</title>
                     ... <!-- meta tags here -->
               <body id="com-atlassian-confluence" class="content-preview vsc-initialized" data-aui-version="9.2.0">
                   <div id="main">
                       <div id="content" class="page edit">
                           <div class="wiki-content">
                               <div class="mermaid" style="overflow-x: auto; width: 100%">
                                    %%{init: {'theme':'default'}}%%
                                        Alice->>+John: Hello John, how are you?

I don’t have permission to create a branch on the original repository but here’s my github repo with my code.

Hi @ChongJingHong ,
I had a look at your version of the repo and confirmed that the mermaid js resources are no longer being loaded. This is because of the change to comment out the web resource context and change it to the editor context:

<!-- <context>mermaid-plugin</context> -->

The way that the javascript resources are being loaded is with the following call in the


Given that the macro preview is in a iframe it has a separate context to the editor. Also by changing it to the editor context you are limiting the macro from being able to display on the view page/blog. You should definitely revert that change and go back to requiring the context everywhere that the macro is rendered.

Just as an FYI, an alternative to loading via context is to load the web resource directly


Screenshot below showing that the macro works after reverting back to loading the mermaid resources. The parameter is stored as a string in the macro xml and thus the macro also displays once the page is published.


Hey @aknight, it works. Thank you so much! :grinning: