{"id":360376,"date":"2026-09-20T21:23:19","date_gmt":"2026-09-20T21:23:19","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/canaryblue-diagrams-for-mermaid\/"},"modified":"2026-09-20T21:23:08","modified_gmt":"2026-09-20T21:23:08","slug":"canaryblue-diagrams-for-mermaid","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/canaryblue-diagrams-for-mermaid\/","author":23556133,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.2.0","stable_tag":"1.2.0","tested":"7.1.2","requires":"6.6","requires_php":"8.1","requires_plugins":null,"header_name":"CanaryBlue Diagrams for Mermaid","header_author":"CanaryBlue","header_description":"Add Mermaid diagrams with a live preview using a Gutenberg block.","assets_banners_color":"ffffff","last_updated":"2026-09-20 21:23:08","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/canaryblue.org\/docs\/public\/diagrams\/","header_author_uri":"https:\/\/canaryblue.org\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":74,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.2.0":{"tag":"1.2.0","author":"canaryblue","date":"2026-09-20 21:23:08","revision":3704623}},"upgrade_notice":{"1.2.0":"<p>This release requires PHP 8.1 or later; sites below that will not be offered it. Support for the free plugin moves to the WordPress.org forum. No change to blocks, saved content, APIs or rendering.<\/p>","1.1.2":"<p>Corrects the documentation address declared by the plugin and ships the plugin&#039;s own source alongside the built assets. No change to blocks, saved content, APIs or rendering.<\/p>","1.1.1":"<p>Submission-readiness update: resolves WordPress Plugin Check warnings without changing blocks, saved content, APIs or rendering. The complete bundled Mermaid 11.16.1 licence remains included in THIRD-PARTY-NOTICES.txt.<\/p>","1.1.0":"<p>This release changes the plugin folder and main-file identity; existing blocks and diagrams remain compatible. After confirming 1.1.0 is active, deactivate and remove any manually installed pre-1.1.0 Mermaid for WordPress copy. WordPress may initially show both plugins.<\/p>","1.0.2":"<p>Corrects circular mindmap label vertical alignment in both the Gutenberg preview and published pages.<\/p>","1.0.1":"<p>Corrects text alignment in circular mindmap nodes while preserving existing diagrams and Mermaid rendering settings.<\/p>","1.0.0":"<p>Production-ready release with synchronized metadata, definitive documentation and support links, and explicit bundled-library attribution. Existing Mermaid Diagram blocks are retained unchanged.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3704623,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3704623,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256},"icon.svg":{"filename":"icon.svg","revision":3704623,"resolution":false,"location":"assets","locale":false}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3704623,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3704623,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":{"canaryblue\/mermaid-diagram":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"canaryblue\/mermaid-diagram","version":"1.2.0","title":"Mermaid Diagram","category":"media","icon":"chart-area","description":"Create a Mermaid diagram with a live editor preview.","keywords":["diagram","flowchart","mermaid"],"textdomain":"canaryblue-diagrams-for-mermaid","attributes":{"diagram":{"type":"string","default":"flowchart TD\n    A[Start] --> B{Decision}\n    B -->|Yes| C[Continue]\n    B -->|No| D[Stop]"},"theme":{"type":"string","default":"default","enum":["default","neutral","dark","forest"]},"accessibleLabel":{"type":"string","default":"Mermaid diagram"}},"supports":{"align":["wide","full"],"anchor":true,"html":false,"spacing":{"margin":true,"padding":true}},"editorScript":"file:.\/index.js","viewScript":"file:.\/view.js","style":"file:.\/style-index.css","editorStyle":"file:.\/index.css"}},"tagged_versions":["1.2.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3704623,"resolution":"1","location":"assets","locale":"","width":813,"height":936},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3704623,"resolution":"2","location":"assets","locale":"","width":365,"height":356},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3704623,"resolution":"3","location":"assets","locale":"","width":1175,"height":827},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3704623,"resolution":"4","location":"assets","locale":"","width":1176,"height":863},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3704623,"resolution":"5","location":"assets","locale":"","width":773,"height":486},"screenshot-6.png":{"filename":"screenshot-6.png","revision":3704623,"resolution":"6","location":"assets","locale":"","width":780,"height":556}},"screenshots":{"1":"A Mermaid diagram in the block editor, with the preview updating as you type.","2":"Adding the Mermaid Diagram block from the inserter.","3":"Four built-in themes - Default, Neutral, Dark and Forest.","4":"An accessible label describes the diagram for screen-reader users.","5":"The published page, rendered in the visitor's browser with no external requests.","6":"When the syntax is wrong, the editor says so and the diagram source stays readable."}},"plugin_section":[],"plugin_tags":[1220,15399,15402,148076,166215],"plugin_category":[],"plugin_contributors":[281747],"plugin_business_model":[],"class_list":["post-360376","plugin","type-plugin","status-publish","hentry","plugin_tags-block","plugin_tags-diagram","plugin_tags-flowchart","plugin_tags-gutenberg","plugin_tags-mermaid","plugin_contributors-canaryblue","plugin_committers-canaryblue"],"banners":{"banner":"https:\/\/ps.w.org\/canaryblue-diagrams-for-mermaid\/assets\/banner-772x250.png?rev=3704623","banner_2x":"https:\/\/ps.w.org\/canaryblue-diagrams-for-mermaid\/assets\/banner-1544x500.png?rev=3704623","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":"https:\/\/ps.w.org\/canaryblue-diagrams-for-mermaid\/assets\/icon.svg?rev=3704623","icon":"https:\/\/ps.w.org\/canaryblue-diagrams-for-mermaid\/assets\/icon.svg?rev=3704623","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/canaryblue-diagrams-for-mermaid\/assets\/screenshot-1.png?rev=3704623","caption":"A Mermaid diagram in the block editor, with the preview updating as you type."},{"src":"https:\/\/ps.w.org\/canaryblue-diagrams-for-mermaid\/assets\/screenshot-2.png?rev=3704623","caption":"Adding the Mermaid Diagram block from the inserter."},{"src":"https:\/\/ps.w.org\/canaryblue-diagrams-for-mermaid\/assets\/screenshot-3.png?rev=3704623","caption":"Four built-in themes - Default, Neutral, Dark and Forest."},{"src":"https:\/\/ps.w.org\/canaryblue-diagrams-for-mermaid\/assets\/screenshot-4.png?rev=3704623","caption":"An accessible label describes the diagram for screen-reader users."},{"src":"https:\/\/ps.w.org\/canaryblue-diagrams-for-mermaid\/assets\/screenshot-5.png?rev=3704623","caption":"The published page, rendered in the visitor's browser with no external requests."},{"src":"https:\/\/ps.w.org\/canaryblue-diagrams-for-mermaid\/assets\/screenshot-6.png?rev=3704623","caption":"When the syntax is wrong, the editor says so and the diagram source stays readable."}],"raw_content":"<!--section=description-->\n<p>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.<\/p>\n\n<p>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.<\/p>\n\n<p>Features:<\/p>\n\n<ul>\n<li>Live Mermaid preview in the block editor.<\/li>\n<li>Matching front-end rendering from the saved Mermaid source.<\/li>\n<li>Default, Neutral, Dark and Forest themes.<\/li>\n<li>An editable accessible label for screen readers.<\/li>\n<li>Wide and full alignment plus WordPress spacing controls.<\/li>\n<li>Readable source fallback if JavaScript is unavailable or rendering fails.<\/li>\n<li>Mermaid 11.16.1 bundled locally with strict security mode.<\/li>\n<li>A capability-gated Mermaid administration page with version, documentation and support details.<\/li>\n<\/ul>\n\n<p>Documentation: https:\/\/canaryblue.org\/docs\/public\/diagrams\/<\/p>\n\n<p>Support: https:\/\/wordpress.org\/support\/plugin\/canaryblue-diagrams-for-mermaid<\/p>\n\n<p>Source code: https:\/\/forge.canaryblue.org\/CanaryBlue-Public\/Diagrams-Free<\/p>\n\n<p>Mermaid syntax reference: https:\/\/mermaid.js.org\/intro\/syntax-reference.html<\/p>\n\n<p>The Free edition is supported through the WordPress.org forum and does not include a service-level agreement.<\/p>\n\n<h3>Development<\/h3>\n\n<p>This plugin uses a modern JavaScript build pipeline (Webpack + npm, through @wordpress\/scripts) to generate the compiled assets found in the <code>build\/<\/code> directory.<\/p>\n\n<p>To comply with the WordPress.org requirement for human-readable code, the uncompiled source is included in this package:<\/p>\n\n<ul>\n<li><code>src\/<\/code> \u2014 the readable ES modules, block metadata and stylesheets used to generate the production bundles in <code>build\/<\/code>.<\/li>\n<li><code>package.json<\/code> \u2014 the pinned build toolchain (@wordpress\/scripts 32.6.0) and the pinned Mermaid version.<\/li>\n<\/ul>\n\n<p>Building from source, from the directory containing <code>package.json<\/code>:\n  npm install\n  npm run build<\/p>\n\n<p>The complete repository, including build configuration, tests, contribution guidance and release workflows, is publicly available at:<\/p>\n\n<p>https:\/\/forge.canaryblue.org\/CanaryBlue-Public\/Diagrams-Free<\/p>\n\n<p>The only third-party library in the compiled output is Mermaid 11.16.1, which is MIT licensed. Its notice is in <code>THIRD-PARTY-NOTICES.txt<\/code> and its own unminified source is published by the Mermaid project at:<\/p>\n\n<p>https:\/\/github.com\/mermaid-js\/mermaid<\/p>\n\n<p>The exact bundled version is tagged there as <code>mermaid@11.16.1<\/code>:<\/p>\n\n<p>https:\/\/github.com\/mermaid-js\/mermaid\/releases\/tag\/mermaid%4011.16.1<\/p>\n\n<h3>Third-Party Services<\/h3>\n\n<p>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.<\/p>\n\n<!--section=installation-->\n<h4>From your WordPress dashboard<\/h4>\n\n<ol>\n<li>Go to Plugins &gt; Add New Plugin and search for \"CanaryBlue Diagrams\".<\/li>\n<li>Choose Install Now, then Activate.<\/li>\n<\/ol>\n\n<h4>Creating your first diagram<\/h4>\n\n<ol>\n<li>In the block editor, add the Mermaid Diagram block.<\/li>\n<li>Enter Mermaid syntax. The preview renders as you type.<\/li>\n<li>Choose a theme, and set an accessible label, in the block sidebar.<\/li>\n<\/ol>\n\n<h4>Installing manually<\/h4>\n\n<p>If your site cannot install from the Plugin Directory \u2014 behind a firewall, or where plugin installation is managed centrally \u2014 download the ZIP from https:\/\/wordpress.org\/plugins\/canaryblue-diagrams-for-mermaid\/ and use Plugins &gt; Add New Plugin &gt; Upload Plugin.<\/p>\n\n<h4>Where to find everything else<\/h4>\n\n<p>Open CanaryBlue Diagrams in the WordPress admin menu for documentation, support and version information.<\/p>\n\n<p>Full installation guide: https:\/\/canaryblue.org\/docs\/public\/diagrams\/<\/p>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20the%20plugin%20load%20mermaid%20from%20a%20cdn%3F\"><h3>Does the plugin load Mermaid from a CDN?<\/h3><\/dt>\n<dd><p>No. Mermaid 11.16.1 is bundled in the plugin and rendered locally in the visitor's browser.<\/p><\/dd>\n<dt id=\"which%20mermaid%20themes%20are%20available%3F\"><h3>Which Mermaid themes are available?<\/h3><\/dt>\n<dd><p>The block includes Default, Neutral, Dark and Forest.<\/p><\/dd>\n<dt id=\"what%20happens%20when%20mermaid%20syntax%20is%20invalid%3F\"><h3>What happens when Mermaid syntax is invalid?<\/h3><\/dt>\n<dd><p>The editor reports the rendering error. On the front end, the saved Mermaid source remains available as a readable fallback.<\/p><\/dd>\n<dt id=\"how%20do%20i%20make%20a%20diagram%20accessible%3F\"><h3>How do I make a diagram accessible?<\/h3><\/dt>\n<dd><p>Use the Accessible label setting in the block sidebar to provide a short description that is applied to the rendered SVG.<\/p><\/dd>\n<dt id=\"where%20can%20i%20get%20help%3F\"><h3>Where can I get help?<\/h3><\/dt>\n<dd><p>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.<\/p>\n\n<p>Plugin documentation is at https:\/\/canaryblue.org\/docs\/public\/diagrams\/.<\/p>\n\n<p>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.<\/p><\/dd>\n<dt id=\"where%20is%20the%20source%20code%3F\"><h3>Where is the source code?<\/h3><\/dt>\n<dd><p>The plugin package ships its own human-readable source in the <code>src\/<\/code> directory, alongside the <code>package.json<\/code> 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.<\/p><\/dd>\n<dt id=\"how%20do%20i%20report%20a%20security%20issue%3F\"><h3>How do I report a security issue?<\/h3><\/dt>\n<dd><p>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\".<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.2.0<\/h4>\n\n<ul>\n<li>Raise the minimum supported PHP version from 7.4 to 8.1. Sites running PHP below 8.1 will not be offered this update.<\/li>\n<li>First release published through the WordPress.org Plugin Directory.<\/li>\n<li>Route free support to the WordPress.org support forum, and say plainly which routes are for Pro customers and which are not.<\/li>\n<li>Rewrite the Installation section for installation from the Plugin Directory, and add a manual route for sites that cannot install from it.<\/li>\n<li>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.<\/li>\n<li>Describe the Pro edition as it actually ships today, rather than as it stood several releases ago.<\/li>\n<li>Add screenshots and their captions for the Plugin Directory listing.<\/li>\n<li>Include the admin menu icon and the CanaryBlue logo in the production package; the menu icon had never been packaged.<\/li>\n<li>No change to blocks, saved content, block attributes, PHP APIs or browser rendering.<\/li>\n<\/ul>\n\n<h4>1.1.2<\/h4>\n\n<ul>\n<li>Correct the documentation address declared in the plugin header, the readme and the About page; the previous address returned a 404.<\/li>\n<li>Include the plugin's human-readable source and its build manifest in the distributed package, alongside the generated assets.<\/li>\n<li>Name the bundled Mermaid 11.16.1 upstream source and its exact release tag in the readme and the third-party notices.<\/li>\n<li>Update the canonical source repository address after its rename to CanaryBlue-Public\/Diagrams-Free.<\/li>\n<li>No change to blocks, saved content, block attributes, PHP APIs or browser rendering.<\/li>\n<\/ul>\n\n<h4>1.1.1<\/h4>\n\n<ul>\n<li>Resolve WordPress Plugin Check warnings ahead of the first WordPress.org submission.<\/li>\n<li>Package the complete Mermaid 11.16.1 legal attribution as <code>THIRD-PARTY-NOTICES.txt<\/code> instead of an unexpected root Markdown file.<\/li>\n<li>Shorten the 1.1.0 Upgrade Notice to remain within WordPress.org's 300-character limit.<\/li>\n<li>Invoke the prefixed administration menu action with a statically visible hook name while preserving its public name and arguments.<\/li>\n<\/ul>\n\n<h4>1.1.0<\/h4>\n\n<ul>\n<li>Rename the plugin to CanaryBlue Diagrams for Mermaid before its first WordPress.org submission.<\/li>\n<li>Adopt the canonical <code>canaryblue-diagrams-for-mermaid<\/code> slug, folder, archive, main-file and text-domain identity.<\/li>\n<li>Preserve existing Mermaid Diagram blocks, saved markup, block attributes, PHP APIs and browser rendering APIs.<\/li>\n<li>Add explicit notice that the plugin is developed independently by CanaryBlue and is not affiliated with or endorsed by the Mermaid project.<\/li>\n<\/ul>\n\n<h4>1.0.2<\/h4>\n\n<ul>\n<li>Correct circular mindmap label vertical alignment by neutralizing Mermaid's label offset.<\/li>\n<li>Apply the correction in both the Gutenberg preview and published-page rendering API paths.<\/li>\n<\/ul>\n\n<h4>1.0.1<\/h4>\n\n<ul>\n<li>Correct centre alignment of native SVG labels in circular mindmap nodes.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>First production-ready release.<\/li>\n<li>Synchronize plugin, package, block and WordPress readme version metadata.<\/li>\n<li>Publish definitive plugin and author links, support contacts and documentation links.<\/li>\n<li>Include explicit Mermaid 11.16.1 MIT license attribution in the production package.<\/li>\n<li>Strengthen release metadata and canonical archive validation.<\/li>\n<\/ul>\n\n<h4>0.1.2<\/h4>\n\n<ul>\n<li>Add CanaryBlue branding, definitive documentation and support links to the About page.<\/li>\n<li>Display the installed plugin version and bundled Mermaid version.<\/li>\n<li>Verify the CanaryBlue logo and Mermaid version in production archives.<\/li>\n<\/ul>\n\n<h4>0.1.1<\/h4>\n\n<ul>\n<li>Add the capability-gated Mermaid admin menu and About page.<\/li>\n<li>Correct the production archive so it has one installable mermaid-for-wordpress root directory.<\/li>\n<\/ul>\n\n<h4>0.1.0<\/h4>\n\n<ul>\n<li>Initial Gutenberg block with live preview, four themes, accessible labels and resilient source fallback.<\/li>\n<\/ul>","raw_excerpt":"Create Mermaid diagrams in Gutenberg with a live preview, four themes and local front-end rendering.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/360376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=360376"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/canaryblue"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=360376"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=360376"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=360376"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=360376"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=360376"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=360376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}