CanaryBlue Diagrams For Mermaid Wordpress Plugin - Rating, Reviews, Demo & Download
Plugin 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
A Mermaid diagram in the block editor, with the preview updating as you type.
Adding the Mermaid Diagram block from the inserter.
Four built-in themes – Default, Neutral, Dark and Forest.
An accessible label describes the diagram for screen-reader users.
The published page, rendered in the visitor’s browser with no external requests.
When the syntax is wrong, the editor says so and the diagram source stays readable.
