Discourse Mermaid

[Discourse]

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

Install this theme component

As this is an official theme component maintained by the Discourse team, support, bug, ux, and feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

Usage

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

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

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

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 document

Perform check on document:

[cmdntd]

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:

Online FlowChart & Diagrams Editor - Mermaid Live Editor

[Arkshine]

A feature request has been posted here:

Support Font Awesome icons in Discourse Mermaid

This is great, thanks! It doesn’t seen that font-awesome icons are supported An example from the docs: flowchart TD B["fa:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner) B-->E(A fa:fa-camera-retro perhaps?) Code: flowchart TD B["fa:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner) B-->E(A fa:fa-camera-retro perhaps?) Is there a supported way to embed font-awesome icons?

[katzuv (Dan Katzuv)]

Is it possible to generate an SVG instead of PNG?

[Arkshine]

Hi, welcome

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;

[putty (Derek Putnam)]

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

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