Mermaid diagrams

  Markdown

This is currently a Goblin Lab feature which needs to be enabled per campaign in the lab tab of the campaign settings.

The Goblin’s Notebook supports Mermaid diagrams in your notes. Mermaid lets you create diagrams and charts using simple text, which is particularly useful for visualising relationships, processes, timelines and other things in your campaign.

Adding a Mermaid diagram

Mermaid diagrams are added using a code block with mermaid as the language, for example:

```mermaid
flowchart LR
    A[The Goblin] --> B[The Dungeon]
    B --> C[The Dragon]
    B --> D[The Treasure]
```

When you view the object, the code will automatically be replaced with the diagram.

You can edit the Mermaid code just like any other part of your markdown.

Mermaid supports a wide range of diagram types, including flowcharts, pie charts, Gantt charts, mind maps, timelines, quadrant charts, and more.

You can use object references in the form of @[](objectid) in the mermaid definition which will resolve to the object name. You cannot currently make it so that clicking the diagram navigates to objects.

Useful Mermaid resources

Mermaid examples – A collection of examples showing the different types of diagrams you can create.

Mermaid syntax reference – The full documentation for Mermaid’s diagram syntax, including all of the supported diagram types.

Mermaid Live Editor – An interactive editor where you can experiment with Mermaid diagrams and see the results immediately. Once you’ve created a diagram you like, copy the Mermaid code into your note.

Basic examples

flowchart TD
    Start[The party reaches Blackthorn Village]

    Start --> Tavern[Question the locals]
    Start --> Forest[Search the forest]

    Tavern --> Ruins[Explore the ruins]
    Forest --> Ruins

    Ruins --> Cultists{Confront the cultists?}

    Cultists -->|Fight| Battle[Defeat the cultists]
    Cultists -->|Sneak past| Ritual[Discover the ritual]

    Battle --> Ritual
    Ritual --> Rescue[Rescue the villagers]

pie title What happened to the pie?
    "@[](stxwfswdpt) ate it" : 25
    "Fell on the floor" : 5
    "Uneaten": 10

gantt
    title The Lich King's Plan
    dateFormat  YYYY-MM-DD
    axisFormat  Day %d

    section Preparation
    Gather the ancient relics       :relics, 2026-01-01, 10d
    Raise an undead army            :army, 2026-01-06, 20d
    Corrupt the royal court         :court, 2026-01-11, 15d

    section The Ritual
    Capture the high priest         :priest, 2026-01-26, 5d
    Prepare the ritual site         :ritual, after priest, 7d
    Perform the ritual              :ritual2, 2026-02-07, 3d

    section Conquest
    Siege the capital               :siege, 2026-02-10, 14d
    Crown the dead king             :crown, after siege, 3d

sankey-beta
    Treasure Hoard,Stashed,55
    Treasure Hoard,City Council,150
    Treasure Hoard,Lost in the Chasm,45
    Stashed,Party,55
    City Council,Payment,50
    Payment,Party,50
    City Council,Expenses,15
    Expenses,Party,15
    City Council,Emergency Payments,30
    City Council,City Coffers,55

radar-beta
    title Character Abilities
    axis str["STR"], dex["DEX"], con["CON"], wis["WIS"], int["INT"], cha["CHA"]
    curve A["Fighter"]{15, 12, 14, 10, 13, 8}
    curve B["Wizard"]{8, 13, 14, 15, 12, 10}
    curve C["Rogue"]{8, 15, 14, 12, 13, 10}

timeline TD
    title The Fall of Eldoria

    section The Age of Kings
        1200 : Eldoria is founded
        1247 : The Silver Order is established
             : The first royal library is built

    section The War
        1312 : The Orc armies invade
             : Blackwood Forest is abandoned
        1315 : The Battle of Blackstone
             : The city walls are breached
        1316 : The king is slain
             : The Silver Order takes control

    section The Present
        1342 : Strange lights appear in the north
             : Travellers begin disappearing
        1343 : The adventurers arrive
             : The old mines are reopened

A note about Mermaid

The links above take you to Mermaid’s official documentation, which is kept up to date with the latest features and examples. The Mermaid version used in The Goblin’s Notebook is v12.0.0.