The Discourse Mermaid theme component allows users to create powerful graphs using Mermaid syntax. It is an official theme component maintained by the Discourse team, with support, bug reports, UX discussions, and feature requests directed to specific categories on Meta Discourse.
Usage and Features
Users can embed diagrams using the ```mermaid block. The component renders SVG HTML elements rather than static images, although graphs do not render in emails. The default error message guides users to ensure their code is valid and indented correctly.
Community Discussions and Issues
Font Awesome Icons:37 cmdntd reported that FontAwesome icons do not display correctly when used in Mermaid syntax, despite working in the live editor. Arkshine noted that a feature request has been created to address this.
SVG vs PNG:katzuv asked about generating SVGs instead of PNGs. Arkshine clarified that the component renders SVG HTML elements by default.
Styling and Scaling:putty inquired about mimicking the “rough” style from the Mermaid previewer. volas reported strange scaling issues and zooming problems in Firefox, which worked better in Chrome. volas also noted that Mermaid places error messages at the end of the <body> tag, a behavior confirmed by Tris20 who finds it non-breaking but poor UX.
Click Events:Stephen reported that click events within diagrams create links in the source but do not function.
Version Updates:whitewaterdeu and pacharanero discussed the supported Mermaid version. pacharanero expressed interest in the new Wardley Mapping chart type and offered to submit a Pull Request (PR) to update the underlying library. Falco welcomed the PR, which was subsequently submitted by pacharanero.
<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 Pro, Business and Enterprise plans.
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:
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
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.
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!
Graphs won’t be rendered in emails
Hosted by us? Theme components are available to use on our Pro, Business and Enterprise plans.
