Title: SolveBeam Diagrams with Mermaid
Author: SolveBeam
Published: <strong>October 11, 2026</strong>
Last modified: October 11, 2026

---

Search plugins

![](https://ps.w.org/solvebeam-diagrams-with-mermaid/assets/icon.svg?rev=3739911)

# SolveBeam Diagrams with Mermaid

 By [SolveBeam](https://profiles.wordpress.org/solvebeam/)

[Download](https://downloads.wordpress.org/plugin/solvebeam-diagrams-with-mermaid.1.0.0.zip)

 * [Details](https://wordpress.org/plugins/solvebeam-diagrams-with-mermaid/#description)
 * [Reviews](https://wordpress.org/plugins/solvebeam-diagrams-with-mermaid/#reviews)
 *  [Installation](https://wordpress.org/plugins/solvebeam-diagrams-with-mermaid/#installation)
 * [Development](https://wordpress.org/plugins/solvebeam-diagrams-with-mermaid/#developers)

 [Support](https://wordpress.org/support/plugin/solvebeam-diagrams-with-mermaid/)

## Description

[SolveBeam](https://www.solvebeam.com/) · [GitHub](https://github.com/solvebeam/solvebeam-diagrams-with-mermaid-for-wordpress)

SolveBeam Diagrams with Mermaid adds a block for creating diagrams and visualizations
with
 [Mermaid](https://mermaid.js.org/). Enter Mermaid syntax in the block editor
and the diagram is rendered in the editor and on the front end.

Mermaid is rendered locally in the browser. This plugin does not require an
 external
account or service to render diagrams.

### Source Code

This plugin ships compiled (minified) JavaScript and CSS in the `blocks/`
 folder.
The human-readable source code of everything in that folder is publicly available:

 * Plugin source code (block editor and front-end scripts, styles and build
    configuration):
   [https://github.com/solvebeam/solvebeam-diagrams-with-mermaid-for-wordpress](https://github.com/solvebeam/solvebeam-diagrams-with-mermaid-for-wordpress).
   The same source is also included in this plugin in the `blocks-src/` folder, 
   together with `package.json`.
 * Mermaid: [https://github.com/mermaid-js/mermaid](https://github.com/mermaid-js/mermaid).

#### What is in the blocks/ folder?

 * `blocks/mermaid-diagram/` – compiled from `blocks-src/mermaid-diagram/`
    (`index.
   js`, `view.js`, `editor.css`, `style.css` and `block.json`), including the core
   of the Mermaid library.
 * `blocks/*.js` (numbered files such as `blocks/8726.js`) – chunks that webpack
   
   splits off from Mermaid and are loaded on demand for the different diagram types.
   These files contain only code from Mermaid and its npm dependencies, not from
   this plugin.

The Mermaid dependencies bundled in these chunks, with their public source code:

 * @mermaid-js/parser: [https://github.com/mermaid-js/mermaid/tree/develop/packages/parser](https://github.com/mermaid-js/mermaid/tree/develop/packages/parser)
 * @braintree/sanitize-url: [https://github.com/braintree/sanitize-url](https://github.com/braintree/sanitize-url)
 * @iconify/utils: [https://github.com/iconify/iconify](https://github.com/iconify/iconify)
 * @upsetjs/venn.js: [https://github.com/upsetjs/venn.js](https://github.com/upsetjs/venn.js)
 * chevrotain: [https://github.com/Chevrotain/chevrotain](https://github.com/Chevrotain/chevrotain)
 * cytoscape: [https://github.com/cytoscape/cytoscape.js](https://github.com/cytoscape/cytoscape.js)
 * cytoscape-cose-bilkent: [https://github.com/cytoscape/cytoscape.js-cose-bilkent](https://github.com/cytoscape/cytoscape.js-cose-bilkent)
 * cytoscape-fcose: [https://github.com/iVis-at-Bilkent/cytoscape.js-fcose](https://github.com/iVis-at-Bilkent/cytoscape.js-fcose)
 * d3: [https://github.com/d3/d3](https://github.com/d3/d3)
 * d3-sankey: [https://github.com/d3/d3-sankey](https://github.com/d3/d3-sankey)
 * dagre-d3-es: [https://github.com/tbo47/dagre-es](https://github.com/tbo47/dagre-es)
 * dayjs: [https://github.com/iamkun/dayjs](https://github.com/iamkun/dayjs)
 * dompurify: [https://github.com/cure53/DOMPurify](https://github.com/cure53/DOMPurify)
 * elkjs: [https://github.com/kieler/elkjs](https://github.com/kieler/elkjs)
 * es-toolkit: [https://github.com/toss/es-toolkit](https://github.com/toss/es-toolkit)
 * katex: [https://github.com/KaTeX/KaTeX](https://github.com/KaTeX/KaTeX)
 * khroma: [https://github.com/fabiospampinato/khroma](https://github.com/fabiospampinato/khroma)
 * marked: [https://github.com/markedjs/marked](https://github.com/markedjs/marked)
 * roughjs: [https://github.com/rough-stuff/rough](https://github.com/rough-stuff/rough)
 * stylis: [https://github.com/thysultan/stylis](https://github.com/thysultan/stylis)
 * ts-dedent: [https://github.com/tamino-martinius/node-ts-dedent](https://github.com/tamino-martinius/node-ts-dedent)
 * uuid: [https://github.com/uuidjs/uuid](https://github.com/uuidjs/uuid)

#### Building from source

The compiled files are built with [@wordpress/scripts](https://www.npmjs.com/package/@wordpress/scripts)
(
webpack). Node.js and npm are required.

 1. Clone the repository or use the plugin folder:
     git clone https://github.com/solvebeam/
    solvebeam-diagrams-with-mermaid-for-wordpress.git
 2. Install the dependencies (including Mermaid from npm): `npm install`
 3. Build the production files: `npm run build`

This compiles `blocks-src/` into `blocks/`. Use `npm run start` to build in
 development
mode and watch for changes; development builds are not minified.

### Third-Party Licenses

This plugin bundles [Mermaid](https://github.com/mermaid-js/mermaid), which is
 
available under the MIT License. The Mermaid license is available at [https://github.com/mermaid-js/mermaid/blob/develop/LICENSE](https://github.com/mermaid-js/mermaid/blob/develop/LICENSE).
The dependencies of Mermaid listed above are available under their own open source
licenses, which can be found in their repositories.

## Blocks

This plugin provides 1 block.

 *   Mermaid Enter Mermaid code and render it as diagrams or visualizations.

## Installation

 1. Upload the plugin folder to `/wp-content/plugins/`
 2. Activate the plugin through the “Plugins” menu in WordPress

## FAQ

### How do I add a diagram?

Add the Mermaid block in the WordPress block editor and enter your Mermaid code

in the Mermaid code field. The preview updates in the editor and the diagram is 
rendered on the front end.

### Which Mermaid syntax is supported?

The block uses the Mermaid syntax supported by the version bundled with the
 plugin.
See the [Mermaid documentation](https://mermaid.js.org/intro/) for the available
diagram types and syntax.

### Is my Mermaid code sent to an external service?

No. Mermaid is bundled with the plugin and diagrams are rendered locally in the

browser. The plugin does not send Mermaid code to an external rendering service.

### Does this plugin require a Mermaid account?

No. The plugin does not require an account, API key, or subscription.

## Reviews

There are no reviews for this plugin.

## Contributors & Developers

“SolveBeam Diagrams with Mermaid” is open source software. The following people 
have contributed to this plugin.

Contributors

 *   [ SolveBeam ](https://profiles.wordpress.org/solvebeam/)

[Translate “SolveBeam Diagrams with Mermaid” into your language.](https://translate.wordpress.org/projects/wp-plugins/solvebeam-diagrams-with-mermaid)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/solvebeam-diagrams-with-mermaid/),
check out the [SVN repository](https://plugins.svn.wordpress.org/solvebeam-diagrams-with-mermaid/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/solvebeam-diagrams-with-mermaid/)
by [RSS](https://plugins.trac.wordpress.org/log/solvebeam-diagrams-with-mermaid/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 1.0.0

 * Initial release.

## Meta

 *  Version **1.0.0**
 *  Last updated **3 days ago**
 *  Active installations **Fewer than 10**
 *  WordPress version ** 6.8 or higher **
 *  Tested up to **7.1.3**
 *  PHP version ** 8.3 or higher **
 * Tags
 * [diagrams](https://wordpress.org/plugins/tags/diagrams/)[flowchart](https://wordpress.org/plugins/tags/flowchart/)
   [mermaid](https://wordpress.org/plugins/tags/mermaid/)[visualization](https://wordpress.org/plugins/tags/visualization/)
 *  [Advanced View](https://wordpress.org/plugins/solvebeam-diagrams-with-mermaid/advanced/)

## Ratings

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/solvebeam-diagrams-with-mermaid/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/solvebeam-diagrams-with-mermaid/reviews/)

## Contributors

 *   [ SolveBeam ](https://profiles.wordpress.org/solvebeam/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/solvebeam-diagrams-with-mermaid/)

## Donate

Would you like to support the advancement of this plugin?

 [ Donate to this plugin ](https://github.com/sponsors/solvebeam)