SolveBeam · GitHub SolveBeam Diagrams with Mermaid adds a block for creating diagrams and visualizations with Mermaid . 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
PricingFree downloadThe WordPress.org download is free. Pro versions, add-ons or external services may cost extra.
CompatibilityRequires WordPress 6.8 and PHP 8.3.
SourceWordPress plugins · Oct 21, 2026
01 / Source details
Aboutthistool.
SolveBeam · GitHub
SolveBeam Diagrams with Mermaid adds a block for creating diagrams and visualizations with Mermaid . 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 . 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 .
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:
The compiled files are built with @wordpress/scripts (webpack). Node.js and npm are required.
01Clone the repository or use the plugin folder: git clone https://github.com/solvebeam/solvebeam-diagrams-with-mermaid-for-wordpress.git
02Install the dependencies (including Mermaid from npm): npm install
03Build 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 , which is available under the MIT License. The Mermaid license is available at 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.
02 / Source details
Gettingstarted.
01Upload the plugin folder to /wp-content/plugins/
02Activate the plugin through the “Plugins” menu in WordPress
03 / Source details
Frequently asked questions.
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 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.
Website LLMs.txt and LLMs-Full.txt Generator is an LLMs.txt generator and llms-full.txt generator for WordPress. It helps site owners generate, manage, preview, validate, and serve AI discovery files from published public content. Use it to create structured /llms.txt and optional /llms-full.txt end
EngageDock AI is a customizable floating contact widget for WordPress websites that want more leads and faster visitor communication. It helps small businesses turn website traffic into calls, texts, emails, and callback requests from one clean contact panel. Key Features: Click-to-Call – One tap ca
Altify AI is an auto ALT text and AI ALT text plugin for WordPress images. It helps generate descriptive image ALT text for accessibility and image SEO. Use bulk image ALT text tools for your Media Library, generate featured image ALT text automatically, and scale WooCommerce image ALT updates with
The Accepted Payment Methods plugin is a straightforward, lightweight solution that enhances your website by displaying visually appealing icons of the payment methods you accept. This plugin is ideal for a variety of websites, including e-commerce platforms, service-oriented websites, and informati
