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.
Install
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.zipMermaid 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.
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
- Upload the plugin to the
/wp-content/plugins/mermaid-blocksdirectory, or install it through the WordPress plugin screen. - Activate the plugin through the 'Plugins' menu.
- Add the Mermaid Diagram block in the Gutenberg editor.
- 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
- Adding a diagram block – Inserting a Mermaid Diagram block in Gutenberg editor.
- Example: Flowchart – A rendered flowchart in the Gutenberg editor.
- Example: Sequence Diagram – MermaidJS sequence diagram rendered live.
- 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.
Active-site estimate ≈10 comes from the median of recent superseded releases. Method.