Discourse Mermaid

:discourse2: Summary Discourse Mermaid lets you create very powerful graphs using the Mermaid syntax.
:eyeglasses: Preview Preview on theme-creator.discourse.org
: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


```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

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


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 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;