mermaid diagrams support

[munhitsu]

mermaid is a standard github way to embed diagrams

it would be amazing if e.g. confluence page were to render diagrams properly

I can see 2 options:

1. using confluence mermaid plugin, but somehow making the page to pick it up
2. rendering svg/png serverside and embedding them in a confluence page

do you have a particular view, in case someone would want to sponsor the work?

[Deastrom]

I would also like to see this, but for my repos I decided to use the mermaid-cli and run some transformations instead.

mkdir -p confluence-build
find . -type f -iname "*.md" \
| awk -F"/" '{
    mmdcIn=$0;
    mmdcOut="confluence-build/"$0; 
    system("mkdir -p \"$(dirname \"" mmdcOut "\")\""); 
    system("mmdc --scale 3 -e png -t default -i " mmdcIn " -o " mmdcOut) 
}'
# Themes: Allowed choices are default, forest, dark, neutral.
cp -r -f confluence-build/* .
rm -rf confluence-build

after that it was business as usual with the md2cf tool.

[Bass-03]

For confluence you would need to install a mermaid plugin, then just add the mermaid markdown inside of a macro for that plugin.

what @Deastrom did looks optimal, something harder to do would be to have md2cf find the mermaid code block, pass it to the mermaid-cli and then replace the block with the image.

[munhitsu]

I just had a quick look at the confluence API. Mermaid plugin is used as an embedded macro within the content storage xml.

<ac:structured-macro ac:name="mermaid-cloud" ac:schema-version="1" data-layout="default" ac:local-id="xxxxxx" ac:macro-id="yyyyyy">
<ac:parameter ac:name="filename">test</ac:parameter>
<ac:parameter ac:name="revision">2</ac:parameter>
</ac:structured-macro>

Content of the diagram is held in 2 hidden attachments. Text file and png respectively. It seems that only filename is used to link macro with the attachment.

Most likely png is generated on every user triggered mermaid object edit.

There is literally no documentation on the plugin itself.

I was hoping for a content block unique renderer, but it is way more fiddly.

So either way we need to render svg/png on upload.

It's a shame as mermaidjs is designed for in browser rendering.

[Bass-03]

@munhitsu there are also multiple mermaid plugins.

In this particular plugin, can you add the mermaid "code" as text to it?

[munhitsu]

@Deastrom I've ended up with in place markdown overwrite:

find . -type f -iname "*.md" -exec mmdc -i {} -o {} \;

[Deastrom]

@Deastrom I've ended up with in place markdown overwrite:

find . -type f -iname "*.md" -exec mmdc -i {} -o {} \;

I was having issues with the input and output sharing a name. Just assumed the mmdc tool didn't like it. Glad this is working simply.