-
Notifications
You must be signed in to change notification settings - Fork 1
Mermaid Blocks allows you to add and render diagrams using MermaidJS directly in the WordPress editor.
License
land0r/mermaid-blocks
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
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 0
No packages published