Discourse Mermaid

:discourse2: Summary Discourse Mermaid lets you create very powerful graphs using the Mermaid syntax.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-mermaid-theme-component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Usage

```mermaid height=200
graph TD;
  A --> B;
```

Learn more about the Mermaid syntax on the official website: Mermaid | Diagramming and charting tool

:warning: Graphs won’t be rendered in emails

Settings

Name Description
svg icons
Translation Default
rendering_error

<b>Error</b><p>Please ensure your mermaid code is running on <a href=‘https://mermaid.live/’>mermaid.live and indented with 4 spaces, eg: <pre><code> flowchart TB
A → B</code></pre></p>

insert_mermaid_sample Mermaid chart

:discourse2: Hosted by us? Theme components are available to use on our Pro, Business and Enterprise plans.

Last edited by @tobiaseigen 2025-06-24T03:16:09Z

Check documentPerform check on document:
30 לייקים

Chart does not display icon when you use fontawesome:

I failed when I tesed with this:

flowchart LR
    A>fas:fa-plane-departure Airline] -->|11/04/2024| B

But it is ok if you test here:

A feature request has been posted here:

3 לייקים

3 posts were split to a new topic: Upgrade Mermaid to 10.6.1

Is it possible to generate an SVG instead of PNG?

Hi, welcome :wave:

This doesn’t generate an image. It renders an SVG HTML element. If you refer to the example in the first post, it is meant to be a screenshot of the result. I understand it might be confusing. You can see a live example below:

graph TD;
  A --> B;
3 לייקים

2 posts were merged into an existing topic: Scaling issue for charts

Hi there,
Don’t suppose there is a way to mimic the “rough” style that can be found in the Mermaid previewer (top right):
CleanShot 2025-03-04 at 14.11.16

I’m guessing it’s a slim chance since the code doesn’t actually change, but worth a shot!

2 לייקים

Scaling works strange in Firefox, and I can’t zoom in the chart with large height.

How it looks in the post:

Post screenshot

How it looks when expanded (click does nothing, but if chart is LR then I can click for zooming):

Expanded screenshot

Mermaid chart from the example:

Chart
flowchart TD
    A["Lorem ipsum dolor"] --> B["Sit amet consectetur"]
    A --> C["Adipiscing elit sed"]
    B --> E["Do eiusmod tempor"]
    C --> D["Incididunt ut labore"]
    D --> F["Et dolore magna"]
    E --> G["Aliqua ut enim"]
    F --> G
    G --> H["Ad minim veniam"]
    H --> I["Quis nostrud exercitation"]
    C --> J["Ullamco laboris nisi"]
    I --> K["Ut aliquip ex"]
    J --> L["Ea commodo consequat"]
    L --> M["Duis aute irure"]
    M --> N["Dolor in reprehenderit"]
    N --> O["In voluptate velit"]
    K --> P["Esse cillum dolore"]
    P --> Q["Eu fugiat nulla"]
    Q --> R["Pariatur excepteur sint"]
    L --> S["Occaecat cupidatat non"]
    F --> T["Proident sunt in"]
    S --> U["Culpa qui officia"]
    U --> V["Deserunt mollit anim"]
    R --> W["Id est laborum"]
    W --> X["Sed ut perspiciatis"]
    O --> Y["Unde omnis iste"]
    X --> Z["Natus error sit"]
    Z --> AA["Voluptatem accusantium doloremque"]
    AA --> AB["Laudantium totam rem"]
    AB --> AC["Aperiam eaque ipsa"]
    AC --> AD["Quae ab illo"]
    T --> Y
    V --> Q
    D --> M
    E --> R

In chrome it works better.

Mermaid also places errors at the end of the <body> tag of discourse

לייק 1

post was originally written in Русский

Huh. It was in English except the image name. Thanks, discourse.

What i actually wrote:

Mermaid also places errors at the end of the <body> tag of discourse

אני מקבל את זה גם לאחר שליחת שינויים, אבל אם אני מרענן את הדף שלי השגיאה נעלמת. לדעתי זה לא משהו ששובר את הפונקציונליות, אבל בהחלט פוגע בחוויה הנהדרת אחרת.