datlechin/flarum-mermaid

Render Mermaid diagrams in Flarum posts.

v1.1.0 2026-07-13 15:06 UTC

Requires

• flarum/core: ^2.0

MIT

• Ngo Quoc Dat

• markdown
• diagrams
• flowchart
• flarum
• mermaid

Published on Packagist.org on 2026-07-13 15:07 UTC

README

A Flarum extension that renders Mermaid diagrams inside posts.

Example

```mermaid
flowchart LR
    A[User clicks login] --> B{Has passkey?}
    B -- yes --> C[Verify with WebAuthn]
    B -- no --> D[Password form]
    C --> E[Signed in]
    D --> E
```

Settings

Diagrams match your forum out of the box. They use the font your forum uses for post text, take their colours from your forum, and follow light and dark mode as the reader switches. Two settings change that:

Setting	Default	Description
Diagram theme	Match forum theme	Takes the diagram colours from your forum. Mermaid's own themes (default, dark, neutral, forest) can be picked instead.
Font family	(empty)	Any CSS font stack, such as "Inter", system-ui, sans-serif. Leave empty to use the forum's post font.

Installation

composer require datlechin/flarum-mermaid:"*"

Updating

composer update datlechin/flarum-mermaid:"*"
php flarum cache:clear

Sponsors

If this extension is useful to you, you can sponsor the work via GitHub Sponsors or Buy Me a Coffee.

Links

• Packagist
• GitHub
• Discuss
• Mermaid