Description
CanaryBlue Diagrams for Mermaid adds a Mermaid Diagram block to the WordPress editor. Enter Mermaid syntax, see a debounced live preview, choose a theme, and publish an accessible SVG diagram without depending on an external CDN.
Mermaid is an independent open-source project. CanaryBlue Diagrams for Mermaid is developed by CanaryBlue and is not affiliated with or endorsed by the Mermaid project.
Features:
- Live Mermaid preview in the block editor.
- Matching front-end rendering from the saved Mermaid source.
- Default, Neutral, Dark and Forest themes.
- An editable accessible label for screen readers.
- Wide and full alignment plus WordPress spacing controls.
- Readable source fallback if JavaScript is unavailable or rendering fails.
- Mermaid 11.16.1 bundled locally with strict security mode.
- A capability-gated Mermaid administration page with version, documentation and support details.
Documentation: https://canaryblue.org/docs/public/diagrams/
Support: https://wordpress.org/support/plugin/canaryblue-diagrams-for-mermaid
Source code: https://forge.canaryblue.org/CanaryBlue-Public/Diagrams-Free
Mermaid syntax reference: https://mermaid.js.org/intro/syntax-reference.html
The Free edition is supported through the WordPress.org forum and does not include a service-level agreement.
Development
This plugin uses a modern JavaScript build pipeline (Webpack + npm, through @wordpress/scripts) to generate the compiled assets found in the build/ directory.
To comply with the WordPress.org requirement for human-readable code, the uncompiled source is included in this package:
src/— the readable ES modules, block metadata and stylesheets used to generate the production bundles inbuild/.package.json— the pinned build toolchain (@wordpress/scripts 32.6.0) and the pinned Mermaid version.
Building from source, from the directory containing package.json:
npm install
npm run build
The complete repository, including build configuration, tests, contribution guidance and release workflows, is publicly available at:
https://forge.canaryblue.org/CanaryBlue-Public/Diagrams-Free
The only third-party library in the compiled output is Mermaid 11.16.1, which is MIT licensed. Its notice is in THIRD-PARTY-NOTICES.txt and its own unminified source is published by the Mermaid project at:
https://github.com/mermaid-js/mermaid
The exact bundled version is tagged there as mermaid@11.16.1:
https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.1
Third-Party Services
The plugin does not contact a third-party service to render diagrams. Mermaid 11.16.1 is bundled locally and is licensed under the MIT License. See THIRD-PARTY-NOTICES.txt in the plugin package.
Screenshots
Blocks
This plugin provides 1 block.
- Mermaid Diagram Create a Mermaid diagram with a live editor preview.
Installation
From your WordPress dashboard
- Go to Plugins > Add New Plugin and search for “CanaryBlue Diagrams”.
- Choose Install Now, then Activate.
Creating your first diagram
- In the block editor, add the Mermaid Diagram block.
- Enter Mermaid syntax. The preview renders as you type.
- Choose a theme, and set an accessible label, in the block sidebar.
Installing manually
If your site cannot install from the Plugin Directory — behind a firewall, or where plugin installation is managed centrally — download the ZIP from https://wordpress.org/plugins/canaryblue-diagrams-for-mermaid/ and use Plugins > Add New Plugin > Upload Plugin.
Where to find everything else
Open CanaryBlue Diagrams in the WordPress admin menu for documentation, support and version information.
Full installation guide: https://canaryblue.org/docs/public/diagrams/
FAQ
-
Does the plugin load Mermaid from a CDN?
-
No. Mermaid 11.16.1 is bundled in the plugin and rendered locally in the visitor’s browser.
-
Which Mermaid themes are available?
-
The block includes Default, Neutral, Dark and Forest.
-
What happens when Mermaid syntax is invalid?
-
The editor reports the rendering error. On the front end, the saved Mermaid source remains available as a readable fallback.
-
How do I make a diagram accessible?
-
Use the Accessible label setting in the block sidebar to provide a short description that is applied to the rendered SVG.
-
Where can I get help?
-
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.
-
Where is the source code?
-
The plugin package ships its own human-readable source in the
src/directory, alongside thepackage.jsonthat 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. -
How do I report a security issue?
-
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”.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“CanaryBlue Diagrams for Mermaid” is open source software. The following people have contributed to this plugin.
Contributors
Translate “CanaryBlue Diagrams for Mermaid” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.2.0
- Raise the minimum supported PHP version from 7.4 to 8.1. Sites running PHP below 8.1 will not be offered this update.
- First release published through the WordPress.org Plugin Directory.
- Route free support to the WordPress.org support forum, and say plainly which routes are for Pro customers and which are not.
- Rewrite the Installation section for installation from the Plugin Directory, and add a manual route for sites that cannot install from it.
- Replace ten deep documentation links on the About page with the documentation index, so the page stops going stale every time a guide is renamed.
- Describe the Pro edition as it actually ships today, rather than as it stood several releases ago.
- Add screenshots and their captions for the Plugin Directory listing.
- Include the admin menu icon and the CanaryBlue logo in the production package; the menu icon had never been packaged.
- No change to blocks, saved content, block attributes, PHP APIs or browser rendering.
1.1.2
- Correct the documentation address declared in the plugin header, the readme and the About page; the previous address returned a 404.
- Include the plugin’s human-readable source and its build manifest in the distributed package, alongside the generated assets.
- Name the bundled Mermaid 11.16.1 upstream source and its exact release tag in the readme and the third-party notices.
- Update the canonical source repository address after its rename to CanaryBlue-Public/Diagrams-Free.
- No change to blocks, saved content, block attributes, PHP APIs or browser rendering.
1.1.1
- Resolve WordPress Plugin Check warnings ahead of the first WordPress.org submission.
- Package the complete Mermaid 11.16.1 legal attribution as
THIRD-PARTY-NOTICES.txtinstead of an unexpected root Markdown file. - Shorten the 1.1.0 Upgrade Notice to remain within WordPress.org’s 300-character limit.
- Invoke the prefixed administration menu action with a statically visible hook name while preserving its public name and arguments.
1.1.0
- Rename the plugin to CanaryBlue Diagrams for Mermaid before its first WordPress.org submission.
- Adopt the canonical
canaryblue-diagrams-for-mermaidslug, folder, archive, main-file and text-domain identity. - Preserve existing Mermaid Diagram blocks, saved markup, block attributes, PHP APIs and browser rendering APIs.
- Add explicit notice that the plugin is developed independently by CanaryBlue and is not affiliated with or endorsed by the Mermaid project.
1.0.2
- Correct circular mindmap label vertical alignment by neutralizing Mermaid’s label offset.
- Apply the correction in both the Gutenberg preview and published-page rendering API paths.
1.0.1
- Correct centre alignment of native SVG labels in circular mindmap nodes.
1.0.0
- First production-ready release.
- Synchronize plugin, package, block and WordPress readme version metadata.
- Publish definitive plugin and author links, support contacts and documentation links.
- Include explicit Mermaid 11.16.1 MIT license attribution in the production package.
- Strengthen release metadata and canonical archive validation.
0.1.2
- Add CanaryBlue branding, definitive documentation and support links to the About page.
- Display the installed plugin version and bundled Mermaid version.
- Verify the CanaryBlue logo and Mermaid version in production archives.
0.1.1
- Add the capability-gated Mermaid admin menu and About page.
- Correct the production archive so it has one installable mermaid-for-wordpress root directory.
0.1.0
- Initial Gutenberg block with live preview, four themes, accessible labels and resilient source fallback.