The Discourse Mermaid theme component lets you create very powerful graphs using the Mermaid syntax:
Usage:
```mermaid height=200
graph TD;
A --> B;
```
This component uses the new custom code fencing syntax: Generic bbcode wrapper for theme components - #8 by sam As a result it requires to be on the 2.9.0 main branch.
Learn more about the Mermaid syntax on the official website: mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.
Graphs won’t be rendered in emails
![]() |
Preview | Component on theme creator |
![]() |
Repository | Github repository |
![]() |
Install Guide | How to install a theme or theme component |
![]() |
New to Discourse Themes? | Beginner’s guide to using Discourse Themes |