CanaryBlue Diagrams for Mermaid

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 in build/.
• 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 [email protected]:

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.