CanaryBlue Diagrams for Mermaid
| 开发者 | canaryblue |
|---|---|
| 更新时间 | 2026年10月20日 06:03 |
| PHP版本: | 8.1 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
- 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 12.2.0 bundled locally with strict security mode.
- A capability-gated Mermaid administration page with version, documentation and support details.
安装:
- Go to Plugins > Add New Plugin and search for "CanaryBlue Diagrams".
- Choose Install Now, then Activate.
- 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.
屏幕截图:
常见问题:
Does the plugin load Mermaid from a CDN?
No. Mermaid 12.2.0 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.
Which browsers can draw the diagrams?
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.
My published diagrams look different after updating to 1.3.0. Why?
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.
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.
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.
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 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.
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".
更新日志:
- Update the bundled Mermaid from 11.16.1 to 12.2.0, and adopt Mermaid 12's own rendering defaults.
- Diagrams already published are not edited and their saved source is unchanged, but Mermaid 12 draws them differently. Flowcharts and state diagrams are routed and spaced differently; block diagrams are wider. Mindmap, sequence, class, entity-relationship, Gantt, pie, journey, quadrant, requirement, timeline, xychart, packet, git graph and architecture diagrams are substantially unchanged.
- Default, Neutral, Dark and Forest continue to work, and the theme chosen on each block is still the theme used.
- Raise the minimum browser to one supporting ES2024: Safari 17.4 or later, and a current version of Chrome, Edge or Firefox. This is a Mermaid 12 requirement, not a choice made here.
- The plugin package grows from about 1.1 MB to about 1.6 MB, because Mermaid 12 bundles the ELK layout engine it now uses. Mermaid is still bundled locally and no diagram is rendered through a CDN.
- Remove the correction that centred labels inside circular mindmap nodes. Mermaid 11 placed those labels incorrectly and the plugin moved them back; Mermaid 12 places them correctly, so continuing to move them pushed long labels out of their own node and made them unreadable.
- Add readme entries covering the appearance change and the browser requirement.
- No change to blocks, saved content, block attributes or PHP APIs.
- Fix diagrams appearing as their own code on published pages where a caching or performance plugin minifies or combines JavaScript. The plugin now states where its own files are, instead of working it out from wherever its script happens to be served, so moving that script no longer stops diagrams being drawn.
- Say what to do when a diagram cannot be drawn because part of the plugin did not load, rather than reporting an internal file name.
- Add a Frequently Asked Questions entry for the same symptom.
- No change to blocks, saved content, block attributes, PHP APIs or browser rendering.
- 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.
- 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.
- 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.
- 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.
- 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.
- Correct centre alignment of native SVG labels in circular mindmap nodes.
- 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.
- 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.
- Add the capability-gated Mermaid admin menu and About page.
- Correct the production archive so it has one installable mermaid-for-wordpress root directory.
- Initial Gutenberg block with live preview, four themes, accessible labels and resilient source fallback.