Render Mermaid diagrams locally

[darrenn-jackson]

author darrenn-jackson darrenn.jackson@gmail.com 1676392110 -0600 committer Darrenn Jackson darrenn.jackson@hpe.com 1676395010 -0600

Local browser rendering for Mermaid diagrams

While using this plugin for one of my docs, I frequently got HTTP 503 error codes during the build process from the Mermaid web service. This will likely happen to anyone else who uses this plugin. These changes cause the browser to download the Mermaid JS library and render the diagram during page load.

Signed-off-by: Darrenn Jackson darrenn.jackson@hpe.com

[raducoravu]

Thanks @darrenn-jackson I added your changes to a separate branch in the repository: https://github.com/oxygenxml/dita-ot-diagrams-plugin/blob/html-output-use-mermaid-js/com.oxygenxml.diagrams.svg/xsl/xhtmlSVG.xsl Maybe I can find some time to work on it if others are interested in it. Two problems I see with your changes:

• You import the Mermaid JS files for any referenced Mermaid diagram in the DITA topic. So if I refer to 3 diagrams in the topic, you import the Javsacript file 3 times in the HTML. Ideally the Javascript file would be imported only once at the end of the HTML body element.
• You create a div element meaning that diagrams can no longer be used inline in paragraphs, but probably this is a less used approach.

I will close the PR.

[darrenn-jackson]

@raducoravu I agree that those are problems with the changes. The Mermaid JS file should only be pulled in once as you say, but I think that the JS file <script> tag must appear before the first embedded Mermaid diagram description.

I changed the <span> in your original plugin with a <div> because I thought I had to in order to implement theming to match my company's color scheme (using an init directive). I just now tried to find the docs page that made me think that, but can't find one. So reverting back to a <span> probably makes sense.

[raducoravu]

@darrenn-jackson you probably found the sample here and worked from it: https://mermaid.js.org/config/usage.html#simple-full-example Indeed as they suggest using a "pre" element, you cannot surround a pre with a span, so they seem to recommend using a div like you did. About the script reference, notice that it's at the very end of the HTML document. Probably that "startOnLoad: true" parameter passed to it means that once the entire HTML document is loaded, it should locate all the "pre" elements and replace them with images. So it does not really matter where it's referenced.