Skip to content
Living Life

Type to search…

↑↓to navigate
Esc

Mermaid Diagrams

A showcase of complex Mermaid diagrams natively rendered with Sätteri.

1min read

This post demonstrates how to write and render Mermaid diagrams directly within your Markdown and MDX files. Since we use mermaid: true in the frontmatter, the Mermaid client library is loaded only on this page, keeping the rest of the site lightweight and zero-JS.

Below are several examples of complex diagrams, ranging from flowcharts to Gantt charts!

To render a diagram, wrap your Mermaid code in a fenced code block with the mermaid language identifier:

```mermaid
stateDiagram-v2
    [*] --> Still
    Still --> [*]


    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```

Which automatically renders as:

stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

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

gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d

classDiagram Animal <|-- Duck 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() }

gitGraph commit commit branch develop checkout develop commit commit checkout main merge develop commit commit

Comments

Comments need configuration

Giscus is enabled but not yet configured. Add the repository details below to start collecting comments.

  1. Visit giscus.app and select your public GitHub repository (Discussions must be enabled).
  2. Copy the generated data-repo-id, data-category and data-category-id values.
  3. Set the PUBLIC_GISCUS_ENABLED, PUBLIC_GISCUS_REPO, PUBLIC_GISCUS_REPO_ID, PUBLIC_GISCUS_CATEGORY and PUBLIC_GISCUS_CATEGORY_ID env vars in your .env file.
  4. Rebuild the site — this notice will be replaced by the live comments thread.

Open giscus.app