Redmine

When a page contains a Mermaid code block, its source is displayed until Mermaid.js is loaded and the diagram is rendered.

The attached patch hides Mermaid code blocks until the diagrams are rendered.

• Add the mermaid-available class to the html element with JavaScript when Mermaid.js is installed, and hide Mermaid code blocks while the class is present. If JavaScript is disabled, the source stays visible.
• Use visibility: hidden instead of display: none so that the space of the code block is kept and the content below moves less when the diagram appears.
• Show the source again if Mermaid.js fails to load or the diagram has a syntax error.