https://github.com/land0r/mermaid-blocks
Mermaid Blocks allows you to add and render diagrams using MermaidJS directly in the WordPress editor.
https://github.com/land0r/mermaid-blocks
diagram gutenberg mermaidjs wordpress wordpress-plugin
Last synced: 8 months ago
JSON representation
Mermaid Blocks allows you to add and render diagrams using MermaidJS directly in the WordPress editor.
- Host: GitHub
- URL: https://github.com/land0r/mermaid-blocks
- Owner: land0r
- License: gpl-3.0
- Created: 2024-12-15T03:07:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-16T16:55:55.000Z (over 1 year ago)
- Last Synced: 2025-02-10T13:37:50.898Z (over 1 year ago)
- Topics: diagram, gutenberg, mermaidjs, wordpress, wordpress-plugin
- Language: JavaScript
- Homepage:
- Size: 6.56 MB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: readme.txt
Awesome Lists containing this project
README
=== 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.