# Discourse Mermaid
**URL:** https://meta.discourse.org/t/discourse-mermaid/218242
**Category:** Theme component
**Tags:** official, mermaid
**Created:** [February 15, 2022, 2:16pm UTC](https://meta.discourse.org/t/discourse-mermaid/218242 "2022-02-15T14:16:15Z")
**Posts on this page:** 18
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [February 15, 2022, 2:16pm UTC](https://meta.discourse.org/t/discourse-mermaid/218242/1 "2022-02-15T14:16:16Z")
| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Discourse Mermaid** lets you create very powerful graphs using the Mermaid syntax. |
| 👓 | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/discourse-mermaid) |
| 🛠 | **Repository Link** | [https://github.com/discourse/discourse-mermaid-theme-component](https://github.com/discourse/discourse-mermaid-theme-component) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > 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**](https://meta.discourse.org/new-topic?category_id=6&tags=mermaid "Ask for support on configuring and using Discourse Mermaid") [🐛 **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=mermaid "A bug report means something is broken, preventing normal/typical use of the theme component") [👀 **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=mermaid "Discussion about the user interface of Discourse Mermaid, and how features are presented (including language and UI elements)") [💡 **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=mermaid "Discussion about how existing Discourse Mermaid features can be improved or enhanced, and how proposed new features could work")
### Usage
````plaintext
```mermaid height=200
graph TD;
A --> B;
```
````
Learn more about the Mermaid syntax on the official website: [Mermaid | Diagramming and charting tool](https://mermaid-js.github.io/mermaid/#/)
> ⚠ Graphs won’t be rendered in emails
### Settings
| Name | Description |
| --- | --- |
| svg icons | |
| **Translation** | **Default** |
| rendering\_error |
\Error\\Please ensure your mermaid code is running on \mermaid.live and indented with 4 spaces, eg: \\ flowchart TB
A → B\\\
|
| 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 @Moin 2026-04-22T16:48:24Z
>
> > **Check document**
> >
> > Perform check on document:
---
### Author:  [@cmdntd](https://meta.discourse.org/u/cmdntd)
#### Post date: [October 27, 2023, 9:13am UTC](https://meta.discourse.org/t/discourse-mermaid/218242/37 "2023-10-27T09:13:06Z")
Chart does not display icon when you [use fontawesome](https://mermaid.js.org/syntax/flowchart.html#basic-support-for-fontawesome):
I failed when I tesed with this:
```plaintext
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](https://mermaid.live/edit)**
>
> Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [October 27, 2023, 11:36am UTC](https://meta.discourse.org/t/discourse-mermaid/218242/39 "2023-10-27T11:36:21Z")
A feature request has been posted here:
> [@Support Font Awesome icons in Discourse Mermaid](https://meta.discourse.org/t/support-font-awesome-icons-in-discourse-mermaid/282341):
>
> This is great, thanks! It doesn’t seen that font-awesome icons are supported An example [from the docs](http://mermaid.js.org/syntax/flowchart.html#basic-support-for-fontawesome): 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?
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [November 7, 2023, 10:15pm UTC](https://meta.discourse.org/t/discourse-mermaid/218242/41 "2023-11-07T22:15:50Z")
3 posts were split to a new topic: [Upgrade Mermaid to 10.6.1](https://meta.discourse.org/t/upgrade-mermaid-to-10-6-1/284760)
---
### Author:  [@katzuv](https://meta.discourse.org/u/katzuv)
#### Post date: [December 25, 2023, 8:12am UTC](https://meta.discourse.org/t/discourse-mermaid/218242/42 "2023-12-25T08:12:37Z")
Is it possible to generate an SVG instead of PNG?
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [December 25, 2023, 9:54pm UTC](https://meta.discourse.org/t/discourse-mermaid/218242/43 "2023-12-25T21:54:11Z")
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:
```mermaid
graph TD;
A --> B;
```
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [May 15, 2024, 10:59am UTC](https://meta.discourse.org/t/discourse-mermaid/218242/44 "2024-05-15T10:59:28Z")
2 posts were merged into an existing topic: [Scaling issue for charts](https://meta.discourse.org/t/scaling-issue-for-charts/282412/11)
---
### Author:  [@putty](https://meta.discourse.org/u/putty)
#### Post date: [March 4, 2025, 7:12pm UTC](https://meta.discourse.org/t/discourse-mermaid/218242/45 "2025-03-04T19:12:54Z")
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!
---
### Author:  [@volas](https://meta.discourse.org/u/volas)
#### Post date: [April 18, 2025, 7:25am UTC](https://meta.discourse.org/t/discourse-mermaid/218242/46 "2025-04-18T07:25:27Z")
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**
>
> ```mermaid
> 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.
---
### Author:  [@volas](https://meta.discourse.org/u/volas)
#### Post date: [April 18, 2025, 11:14pm UTC](https://meta.discourse.org/t/discourse-mermaid/218242/47 "2025-04-18T23:14:56Z")
Mermaid also places errors at the end of the `` tag of discourse
---
### Author:  [@volas](https://meta.discourse.org/u/volas)
#### Post date: [April 18, 2025, 11:23pm UTC](https://meta.discourse.org/t/discourse-mermaid/218242/48 "2025-04-18T23:23:03Z")
> [@volas](#):
>
> Mermaid place également des erreurs à la fin de la balise `�3cbody�3e` du discours
> 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 `` tag of discourse
---
### Author:  [@Tris20](https://meta.discourse.org/u/Tris20)
#### Post date: [June 3, 2025, 8:04pm UTC](https://meta.discourse.org/t/discourse-mermaid/218242/49 "2025-06-03T20:04:42Z")
I get this as well after submitting changes, but if I refresh my page the error goes away. IMO not something which breaks functionality, but definitely undermines the otherwise great experience.
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [January 28, 2026, 8:37pm UTC](https://meta.discourse.org/t/discourse-mermaid/218242/50 "2026-01-28T20:37:18Z")
Is `click` currently supported within mermaid diagrams?
```mermaid
flowchart TD
start --> relative
relative --> absolute
absolute --> external
click relative "/categories" "tooltip1"
click absolute "https://meta.discourse.org/docs" "tooltip2"
click external "https://github.com/" "tooltip3"
```
I can see the link being created in the page source, but they aren’t working.
---
### Author:  [@whitewaterdeu](https://meta.discourse.org/u/whitewaterdeu)
#### Post date: [April 13, 2026, 4:37am UTC](https://meta.discourse.org/t/discourse-mermaid/218242/51 "2026-04-13T04:37:18Z")
Which mermaid version is supported by this component?
---
### Author:  [@whitewaterdeu](https://meta.discourse.org/u/whitewaterdeu)
#### Post date: [April 13, 2026, 4:41am UTC](https://meta.discourse.org/t/discourse-mermaid/218242/52 "2026-04-13T04:41:21Z")
>
---
### Author:  [@pacharanero](https://meta.discourse.org/u/pacharanero)
#### Post date: [May 19, 2026, 4:37pm UTC](https://meta.discourse.org/t/discourse-mermaid/218242/53 "2026-05-19T16:37:34Z")
What is the typical cadence for updates of Discourse Mermaid, as regards the underlying mermaid.js library? I ask because from 11.14 onwards there is a new Wardley Mapping chart type included (in beta), which is of significant interest to my communities.
At the time of writing the latest version is 11.15.0, and reportedly the Wardley feature is now acceptably stable.
If a PR would be accepted I am happy to bash one out!
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [May 19, 2026, 5:19pm UTC](https://meta.discourse.org/t/discourse-mermaid/218242/54 "2026-05-19T17:19:55Z")
A pr is indeed welcome!
---
### Author:  [@pacharanero](https://meta.discourse.org/u/pacharanero)
#### Post date: [June 3, 2026, 5:33pm UTC](https://meta.discourse.org/t/discourse-mermaid/218242/55 "2026-06-03T17:33:27Z")
> [@Falco](#):
>
> A pr is indeed welcome!
>
>
> Bumps the bundled Mermaid.js from 11.12.2 to 11.15.0.
>
> \*\*Meta\*\*: refer to Falc…o/pacharanero conversation https://meta.discourse.org/t/discourse-mermaid/218242/54
>
> \*\*Motivation\*\*: To get \[Wardley Map support (wardley-beta)\](https://mermaid.ai/open-source/syntax/wardley.html), added upstream in Mermaid 11.14.0+
>
> The \`mermaid.min.js\` asset is a reproducible build of mermaid@11.15.0 using esbuild@0.28.0 same wrapper as the previous file, you may wish to rebuild the file using your standard esbuild scripts to assure provenance.
>
> \*\*Testing\*\*: Verified rendering live via Theme Creator (Wardley map + existing flowchart, no regression).
>
> \
>
> \*\*Notes\*\*: There is no \`version\` metadata in the Mermaid TC so I was unable to bump it. It could be worth adding a version for end-user info.