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 Standard, Business and Enterprise plans.

Last edited by @JammyDodger 2024-06-12T11:27:13Z

Check documentPerform check on document:
29 Likes

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 Likes

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 Likes

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 Likes

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

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