WordPress does support embedding Mermaid charts, but this is not provided natively—users need to use plugins or custom script methods. There are several effective ways to embed Mermaid diagrams in WordPress, each with its own advantages.
Methods to Embed Mermaid Charts in WordPress
1. WordPress Plugins
- Plugins like WP Mermaid and MerPress are designed specifically to add Mermaid chart support to WordPress. These let you write Mermaid code directly inside your posts, pages, or blocks and render the diagrams automatically.
- Installation is as simple as searching for the plugin (e.g., “WP Mermaid,” “MerPress”) in the Plugins section of your dashboard, installing, and activating it. The plugin may allow both code blocks and simple shortcodes for embedding diagrams.
2. Embedding via Visual Editors (Gutenberg, Elementor, Classic Editor)
- Some plugins like EmbedPress enable embedding Mermaid diagrams in different editors, such as Gutenberg, Elementor, and Classic Editor.
- With these, you can paste a Mermaid chart URL or code (sometimes using a dedicated EmbedPress block or element) into your WordPress editor, customize, and publish. Classic Editor or Elementor also supports shortcodes, where you can wrap Mermaid markup inside
[mermaid] ... [/mermaid]tags.
3. Manual Script Inclusion
- For advanced users, you can manually add the Mermaid.js script to your WordPress theme’s
functions.phpto load the library from a CDN, and initialize it on every page. - You then write your Mermaid code in a
divwith themermaidclass. This offers more customization, but you need to ensure your WordPress editor preserves the code formatting or use custom fields/plugins to do so.
4. Embedding as Images or SVG Exports
- You can also use the Mermaid live editor to create and export your diagram as a PNG or SVG, then upload and insert the image as you would with any other media file; this defeats the “editable text” advantage, but ensures compatibility everywhere.
Popular Plugins and Resources
| Plugin/Method | How it Works | Editors Supported |
|---|---|---|
| WP Mermaid, MerPress | Mermaid code block or shortcode | Gutenberg, Classic, Elementor |
| EmbedPress | Embed block, URL or code input | Gutenberg, Elementor, Classic |
| Manual Script | functions.php + div.mermaid | Any, but requires manual HTML |
| Export as SVG/PNG | Export diagram, upload as image | All |
Key Points
- Using a plugin is the easiest and most reliable way for most users to embed Mermaid charts in WordPress.
- Manual methods provide more control but require technical adjustments.
- Shortcodes like
[mermaid] your code [/mermaid]are common among Mermaid-supporting plugins. - Plugins such as WP Mermaid and MerPress are the most recommended for ongoing, up-to-date support.
For flexible options and quickest setup, installing a dedicated Mermaid plugin (like WP Mermaid or MerPress) is recommended. For greater control, use the manual method with script injection, but be aware of formatting issues in the editor.
Add to follow-up
