WP Manifestindependent plugin directory
manifest / editor / mermaid-blocks

Mermaid Blocks WP Registry grade D+. High-severity findings · 2 findingsWP RegistryHigh-severity findings · 2 findingsOpen the reportD+

Mermaid Blocks allows you to add and render diagrams using MermaidJS directly in the WordPress editor.

★ 12stars
28release downloads
≈10active sites
1.1.0latest · 1 year ago

Install

Download mermaid-blocks.zip From the 1.1.0 release on GitHub, Dec 15, 2024

Upload it under Plugins → Add New Plugin → Upload Plugin, then activate.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/land0r/mermaid-blocks/releases/download/1.1.0/mermaid-blocks.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

Mermaid Blocks allows you to add and render diagrams using MermaidJS directly in the WordPress editor.

Description

Mermaid Blocks is a Gutenberg plugin that integrates MermaidJS diagrams into your WordPress posts and pages. It supports popular diagram types such as flowcharts, sequence diagrams, Gantt charts, class diagrams, and more.

This makes it easy to include text-based diagrams using MermaidJS syntax in the Gutenberg editor without additional tools or complex setups.

Playground Demo

Features:

  • Add MermaidJS diagrams via a dedicated Gutenberg block.
  • Supported diagram types: Flowcharts, Sequence Diagrams, Gantt Charts, Class Diagrams.
  • Real-time preview of MermaidJS diagrams in the editor.
  • Simple and intuitive integration with the block editor.

Installation

  1. Upload the plugin to the /wp-content/plugins/mermaid-blocks directory, or install it through the WordPress plugin screen.
  2. Activate the plugin through the 'Plugins' menu.
  3. Add the Mermaid Diagram block in the Gutenberg editor.
  4. Write MermaidJS code and preview your diagram instantly.

Frequently Asked Questions

What types of diagrams are supported?

The plugin supports popular MermaidJS diagrams: Flowcharts, Sequence Diagrams, Gantt Charts, and Class Diagrams.

Can I edit MermaidJS code?

Yes, you can edit MermaidJS code directly in the block editor using plain text.

Is real-time rendering supported?

Yes, your diagrams are rendered in real-time as you edit the code.

Does it work on all themes?

Yes, it is compatible with most modern WordPress themes.

Screenshots

  1. Adding a diagram block – Inserting a Mermaid Diagram block in Gutenberg editor.
  2. Example: Flowchart – A rendered flowchart in the Gutenberg editor.
  3. Example: Sequence Diagram – MermaidJS sequence diagram rendered live.
  4. Frontend View – A Mermaid diagram displayed on the published site.

Changelog

1.0.0

  • Initial stable release.
  • Add MermaidJS block with support for flowcharts, sequence diagrams, Gantt charts, and class diagrams.
  • Real-time rendering of diagrams in the Gutenberg editor.

1.1.0

  • Instructions in the editor.
  • ObsidianMD markdown to Mermaid Blocks transformation.

Future Plans

  • Add support for state diagrams, mindmaps, and other MermaidJS types.
  • Provide an option to export diagrams as SVG or PNG.
  • Include pre-designed templates for faster diagram creation.

Releases

2 releases. Each count is every asset in that release; expand a row for the breakdown.

Tag
Published
Assets
Downloads
1.1.0 latest
Dec 15, 2024 1 year ago
mermaid-blocks.zip
21
Dec 15, 2024 1 year ago
mermaid-blocks.zip
7

Active-site estimate ≈10 comes from the median of recent superseded releases. Method.

D+ grade

Security

Mermaid Blocks 1.1.0 · audited by WP Registry

High-severity findings.

1 high 1 medium
Audited release
1.1.0
Findings
2
Worst severity
high
Content hash
7a0b932925cb854d41f4e5b6…

Findings

  • high Stored XSS via bundled Mermaid 11.4.1 sequence-diagram KaTeX labels (CVE-2025-54881)

    xss_stored

    The plugin ships MermaidJS 11.4.1 (assets/mermaid.js, assets/mermaid.min.js; version pin in mermaid-blocks.php) and, on every page that contains the block, build/view.js calls mermaid.initialize({startOnLoad:false}) then mermaid.run({querySelector:'.wp-block-mermaid-blocks-diagram'}). mermaid.run reads the <pre> innerHTML, entity-decodes it, and renders it. In 11.4.1, sequence-diagram actor/message labels that contain $$...$$ match hasKatex() and are passed to calculateMathMLDimensions(), which assigns the full unsanitized string to a temporary div via innerHTML and inserts that div into document.body (assets/mermaid.js). That path is independent of securityLevel (default strict) and of the editor-only htmlLabels:false flag. Gutenberg save() puts `code` as text children of <pre>, so React stores < as < and kses does not strip the onerror attribute; mermaid then entity-decodes it back. A Contributor or Author without unfiltered_html can therefore store a sequence diagram that executes JavaScript for anyone who opens the post in the editor (admin review) or views the published page. Public PoC (GHSA-7rqq-prvp-x9jh): participant A as Alice<img src="x" onerror="document.write(`xss on ${document.domain}`)">$$\\text{Alice}$$. Patched upstream in mermaid 11.10.0 (this plugin still pins 11.4.1).

    assets/mermaid.js:21716-21728

    Recommendation

    Replace assets/mermaid.js and assets/mermaid.min.js with mermaid >= 11.15.0 (11.10.0 fixes CVE-2025-54881; 11.15.0 also fixes the CSS/HTML injection advisories). Update the $mermaid_version pin. On initialize(), set securityLevel: 'sandbox' (or at least keep strict and add fontFamily, themeCSS, altFontFamily, themeVariables to the secure[] list) in both build/view.js and the editor bootstrap in build/index.js. Do not rely on htmlLabels:false alone.

  • medium Front-end mermaid.initialize omits sandbox/secure keys, allowing CSS and HTML injection from diagram source

    missing_escaping

    build/view.js initializes Mermaid with only {startOnLoad:false}. Mermaid 11.4.1 defaults securityLevel to strict and secure[] to [secure, securityLevel, startOnLoad, maxTextSize, suppressErrorRendering, maxEdges] — fontFamily, themeCSS, altFontFamily, and themeVariables remain diagram-overridable via %%{init:...}%%. GHSA-87f9-hvmw-gh4p / CVE-2026-41159: a flowchart such as %%{init: {"fontFamily": "x;a{b} :not(&){background:green !important} c{d}"}}%% flowchart LR / A --> B injects CSS that escapes #mermaid-* scoping via stylis :not(&) and can restyle the whole page or exfiltrate attributes. CVE-2026-41149: stateDiagram-v2 classDef values can break out of the SVG <style> and inject overlay HTML (script tags are stripped, so this is defacement/phishing rather than JS XSS). Both are reachable by Contributor/Author-controlled block `code` on published posts. The editor bootstrap sets htmlLabels:false but the public view script does not, and neither path sets securityLevel sandbox. Same library pin as finding 1; separate because the observable is page-wide CSS/HTML injection, not script execution.

    build/view.js:1

    Recommendation

    Upgrade Mermaid to >= 11.15.0 and call mermaid.initialize({startOnLoad:false, securityLevel:'sandbox', htmlLabels:false, flowchart:{htmlLabels:false}, secure:['secure','securityLevel','startOnLoad','maxTextSize','suppressErrorRendering','maxEdges','fontFamily','themeCSS','altFontFamily','themeVariables']}) in both view.js and the editor. Treat diagram source as untrusted even for Author-role users.

WP Registry hashes the installable build and reports on that exact bytes-for-bytes copy. Embargoed findings are withheld until they are disclosed, so a clean verdict means nothing public is outstanding. WP Manifest does not audit code itself.