[💝 Sponsor this project on Github or ☕ Get me a coffee if you like this plugin!

Warning ⚠: This plugin uploads your diagrams to an external service for rendering. Do not use this plugin if you are not comfortable with this.

Overviewr

This simple plugin allows you to quickly insert mermaid diagrams in your notes.

Installation

If not available in the marketplace, download the latest release and manually load it into Logseq after unzipping.

Usage

To start, simply trigger it using /Draw mermaid diagram. Then add your mermaid syntax in the code block and click Render.

Changing background colour

Option 1

Same steps as above, but before clicking Render, include the colour inside the renderer, e.g.

{{renderer :mermaid_abc123, purple}}

or

{{renderer :mermaid_abc123, #000000}}

Option 2

Define in your plugin settings file. This will apply to all mermaid diagrams that you render.

%%{init: {'theme': 'dark'}}%%
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Three| E[Result 2]

%%{init: {'theme': 'dark'}}%%
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Three| E[Result 2]

{
    "config": {
        "theme": "dark",
        "colour": "#2f3437"
    }
}

or

{
    "config": {
        "theme": "dark",
        "colour": "gray"
    }
}

Credits

mermaid.ink

mermaid-js-converter for the idea.