PHPackages                             terrylinooo/wp-mermaid - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. terrylinooo/wp-mermaid

ActiveLibrary[Utility & Helpers](/categories/utility)

terrylinooo/wp-mermaid
======================

Render your Mermaid syntax on WordPress.

1.0.2(2y ago)2047[6 issues](https://github.com/terrylinooo/wp-mermaid/issues)[4 PRs](https://github.com/terrylinooo/wp-mermaid/pulls)GPL-3.0-or-laterPHP

Since May 15Pushed 2y ago2 watchersCompare

[ Source](https://github.com/terrylinooo/wp-mermaid)[ Packagist](https://packagist.org/packages/terrylinooo/wp-mermaid)[ Docs](https://github.com/terrylinooo/wp-mermaid)[ RSS](/packages/terrylinooo-wp-mermaid/feed)WikiDiscussions master Synced today

READMEChangelog (2)DependenciesVersions (3)Used By (0)

WP Mermaid
==========

[](#wp-mermaid)

Generation of diagrams and flowcharts from text in a similar manner as markdown by using [mermaid.js](https://mermaid-js.github.io/)

Download
--------

[](#download)

sourcedownloadWordPressGitHub repositoryPHP Composer`composer create-project terrylinooo/wp-mermaid wp-mermaid`Installation
------------

[](#installation)

1. Upload the plugin files to the `/wp-content/plugins/wp-mermaid` directory, or install the plugin through the WordPress plugins screen directly.
2. Activate the plugin through the 'Plugins' screen in WordPress.
3. Go to the WP Mermaid menu in Settings and set your options.

How to use
----------

[](#how-to-use)

WP Mermaid is smart enough that loads mermaid.js only when your posts contain Mermaid syntax, by detecting the use of shortcode and block. So it will not be loaded on your website everywhere.

### Shortcode

[](#shortcode)

In classic editor, you can use shortcode to render your Mermaid syntax. If you are using WordPress version below 5.0, this is the only way you can use.

```
[mermaid]
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
[/mermaid]

```

### Gutenberg Block

[](#gutenberg-block)

Choose a Mermaid block:

[![](assets/example-gutenberg-block-1.png)](assets/example-gutenberg-block-1.png)

Fill in your Mermaid syntax in the editor.

[![](assets/example-gutenberg-block-2.png)](assets/example-gutenberg-block-2.png)

### Changelog

[](#changelog)

1.0.0

- First release.

1.0.1

- Upgrade Mermaid JavaScript library from 8.5.0 to 8.9.0

1.0.2

- Add Japanese (ja\_JP) translation, thanks to [Colocal](https://colocal.com/).
- Test with PHP 8.2.5 and WordPress 6.2.2
- Upgrade Mermaid JavaScript library from 8.9.0 to 9.4.3

### License

[](#license)

WP Mermaid is developed by [Terry Lin](https://terryl.in) and released under the terms of the GNU General Public License v3.

### Also See

[](#also-see)

If you are looking for a [Markdown editor](https://wordpress.org/plugins/wp-githuber-md/) supporting Mermaid, you can also check out my another WordPress plugin called the [WP Githuber MD](https://github.com/terrylinooo/githuber-md), which provides a variety of features not just Mermaid, it is worth to try.

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance14

Infrequent updates — may be unmaintained

Popularity14

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~1103 days

Total

2

Last Release

1083d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/fca418a834057a4203c6856e316ca4d7c71fa1b9076977e08e5c4d5a9cc9aec6?d=identicon)[terrylinooo](/maintainers/terrylinooo)

---

Top Contributors

[![terrylinooo](https://avatars.githubusercontent.com/u/11989371?v=4)](https://github.com/terrylinooo "terrylinooo (20 commits)")

---

Tags

wordpress plugindiagrammermaidflowchart

### Embed Badge

![Health badge](/badges/terrylinooo-wp-mermaid/health.svg)

```
[![Health](https://phpackages.com/badges/terrylinooo-wp-mermaid/health.svg)](https://phpackages.com/packages/terrylinooo-wp-mermaid)
```

###  Alternatives

[log1x/navi

A developer-friendly alternative to the WordPress NavWalker.

367633.2k7](/packages/log1x-navi)[icehouse-ventures/laravel-mermaid

Simple package to generate diagrams in Laravel using the Mermaid.js library

2630.0k](/packages/icehouse-ventures-laravel-mermaid)[wpmetabox/meta-box

The most powerful & comprehensive plugin to create, manage, show and connect dynamic data with forms and custom fields effortlessly on WordPress.

1.2k20.5k3](/packages/wpmetabox-meta-box)[freemius/wordpress-sdk

Freemius WordPress SDK

303101.4k4](/packages/freemius-wordpress-sdk)[jbzoo/composer-graph

Render composer.json + composer.lock dependencies graph

66741.6k2](/packages/jbzoo-composer-graph)[log1x/acf-editor-palette

A replica Gutenberg color picker field for Advanced Custom Fields.

100284.1k](/packages/log1x-acf-editor-palette)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)