CanaryBlue Diagrams for Mermaid

No. Mermaid 12.2.0 is bundled in the plugin and rendered locally in the visitor's browser.

The block includes Default, Neutral, Dark and Forest.

Mermaid 12 needs a browser that understands ES2024. In practice that means Safari 17.4 or later, and a current version of Chrome, Edge or Firefox. On an older browser the diagram is not drawn and the saved Mermaid source stays readable on the page, exactly as it does when JavaScript is unavailable.

Mermaid 12 draws diagrams with a different layout engine and a different visual style than Mermaid 11. Your diagrams have not been edited and their source is unchanged, but flowcharts, state diagrams and block diagrams are laid out and spaced differently. The theme you chose on each block is still the theme being used.

The editor reports the rendering error. On the front end, the saved Mermaid source remains available as a readable fallback. The diagram looks right in the editor, but the published page shows the code instead This is almost always a caching or performance plugin that minifies or combines JavaScript. Doing so serves a copy of this plugin's script from that plugin's own cache folder, and the files Mermaid needs to draw each diagram type are then looked for in that folder, where they are not. The block falls back to showing the diagram source, which is the code on the page. In your caching or performance plugin, exclude canaryblue-diagrams-for-mermaid from JavaScript minification and combining, then clear its cache. In WP-Optimize this is under Minify > JavaScript. If your site runs more than one such plugin, exclude it in each. The editor is unaffected because those plugins do not usually minify editor scripts, which is why the preview looks correct while the page does not. If the diagram has emoji in its labels, and the page sometimes draws it correctly, see the next entry instead. A diagram with emoji in its labels shows the code instead, and only sometimes Update to 1.4.0 or later, which fixes this. Before 1.4.0, WordPress's own emoji support could rewrite the emoji inside a diagram while it was still being drawn. That broke the diagram and left its code on the page. It was intermittent in a way that made it hard to recognise. The first view of a page often drew the diagram correctly and a refresh then showed the code, because what happened depended on whether WordPress's emoji files were already in the browser's cache. If you cannot update yet, taking the emoji out of the diagram's labels avoids it. Writing them as Mermaid character codes such as #128100; does not, because those become the same characters before the diagram is drawn. My diagram draws correctly, but the emoji in it are missing Update to 1.4.0 or later. Before 1.4.0, WordPress's emoji support could replace the emoji in a diagram's saved source with images before the plugin read that source. The diagram was then drawn without them. It looked perfectly normal and reported no error, so the only sign was that something you wrote was not there. This has the same cause as the entry above and the same fix. Your diagrams do not need editing; they are drawn from the source you already saved.

Use the Accessible label setting in the block sidebar to provide a short description that is applied to the rendered SVG.

Post in the support forum at https://wordpress.org/support/plugin/canaryblue-diagrams-for-mermaid. That is the support route for the free plugin, and answers there help the next person with the same question. Plugin documentation is at https://canaryblue.org/docs/public/diagrams/. CanaryBlue Diagrams Pro customers can also use https://canaryblue.org/contact/ or email support@canaryblue.org. Use those routes for anything that should not be discussed in public, such as a site address, a licence key, or anyone else's data.

The plugin package ships its own human-readable source in the src/ directory, alongside the package.json that pins the build toolchain. The canonical repository, including build configuration, tests and release workflows, is at https://forge.canaryblue.org/CanaryBlue-Public/Diagrams-Free. The source is licensed under GPLv2 or later.

Do not report a suspected vulnerability in public, including in the WordPress.org support forum and in any public issue tracker. Email support@canaryblue.org or use https://canaryblue.org/contact/ with the subject "Security report: CanaryBlue Diagrams for Mermaid".