Skip to content

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

License

Notifications You must be signed in to change notification settings

land0r/mermaid-blocks

Repository files navigation

=== Mermaid Blocks ===
Contributors:      IvanHryhorenko
Tags:              block, diagrams, mermaidjs, flowchart, gantt, sequence
Tested up to:      6.6
Stable tag:        1.1.0
Requires PHP:      7.4
License:           GPL-3.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-3.0.html

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](https://mermaid-js.github.io/) 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](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/land0r/mermaid-blocks/main/blueprint.json)


### 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.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published