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

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.

:warning: Graphs won’t be rendered in emails

12 Likes

Thanks for this component!

It seems the source of mermaid is hard-coded, so installing this plugin makes Discourse transmit user data to unpkg.com, voiding GDPR compliance and general sane best practices.

Please add an option to load mermaid from a custom source.

2 Likes

We have patterns for both

  1. Dynamic height calculation
  2. Local assets

In GitHub - discourse/discourse-svgbob: svgbob component for Discourse , recommend porting both over.

#pr-welcome for that.