Merlican: Mermaid Diagrams for Pelican
Merlican is a Pelican plugin that enables Mermaid diagram support in your Markdown content. Write diagrams using standard Mermaid code blocks and have them rendered client-side in your generated site.
Features
- Write Mermaid diagrams in Markdown using triple-backtick code blocks (```mermaid).
- Diagrams are rendered in the browser using the Mermaid JS library.
- No Node.js or external CLI required-pure Python and client-side JS. (this loads the Mermaid library from a CDN, and injects it into the HTML output)
Prerequisites
- Python 3.7+
- Pelican 4.x or newer
Installation & Configuration
Clone or copy the Merlican plugin into your Pelican plugins directory.
In your pelicanconf.py, add:
Note: The
MARKDOWNconfiguration shown below is important! It ensures that the standard Markdown extensions (like code highlighting and tables) are enabled, and that themerlican.mermaid_markdownextension is included for Mermaid support.The order matters: include
merlican.mermaid_markdownafter the standard extensions to avoid interfering with other code block formatting.
PLUGIN_PATHS = ["/path/to/your/plugins"]
PLUGINS = ['merlican']
MARKDOWN = {
'extension_configs': {
'markdown.extensions.codehilite': {'css_class': 'highlight'},
'markdown.extensions.extra': {},
'merlican.mermaid_markdown': {},
},
'output_format': 'html5',
}
Adjust the plugin path as needed.
Usage
Write Mermaid diagrams in your Markdown like this:
Flowchart Example
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```Sequence Diagram Example
```mermaid
sequenceDiagram
autonumber
participant 1 as $$\alpha$$
participant 2 as $$\beta$$
1->>2: Solve: $$\sqrt{2+2}$$
2-->>1: Answer: $$2$$
Note right of 2: $$\sqrt{2+2}=\sqrt{4}=2$$
```Class Diagram Example
```mermaid
---
title: Animal example
---
classDiagram
note "From Duck till Zebra"
Animal <|-- Duck
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
```