Discourse Mermaid

theme-component
1
: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

Screenshot 2022-02-15 at 15.12.14
Screenshot 2022-02-15 at 15.12.141396×642 30.9 KB

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

20 Likes
2

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.

4 Likes
3

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.

1 Like
4

Thanks for sharing this component!

May i know if this work with page publishing? Thanks

5

@pi88 From my side unfortunately it doesn’t look like it. LaTex/graphviz, Table of Contents, and a number of other theme components don’t appear to be active in my published pages. I suspect most theme components are not active in published pages.

@joffreyjaffeux The functionality of this theme component has been great for me since it was released in February. Does it make sense for there to also be a plugin?

6

I don’t think that long term we want to even keep the plugin at all, only official outlet is using the theme component.

1 Like
7

FYI I have a PR that updates mermaid, uses local assets and does auto sizing.

Should be merged soon.

2 Likes
8

Great theme component, just to confirm, this one won’t work on the beta channel?

1 Like
9

On beta it is fine …

10

What gave you the impression it wouldn’t work?

11

My mistake, perhaps I was looking at a different theme component, I see it works perfectly, great job all :+1: Regarding the comment above about GDPR, are there any other official theme components that are cause for concern regarding GDRP compliance?

12

I recommend asking that in a dedicated topic…

2 Likes
13

I’m curious. What’s the reasoning for not having this theme component enabled on Meta?

graph TD;
  A --> B;

:frowning:

2 Likes
14

No reason specifically, we can get it added.

EDIT: done.

4 Likes
15

This is great. It doesn’t seem to work with mindmaps and timelines though. I tried forking it and updating to Mermaid v9.4.0, but I’m still getting an error. This code works in their live editor, but not in Discourse, even with Mermaid v9.4.0:

mindmap
Root
    A
      B
      C

also this one, but it doesn’t work in their live editor either, which appears to be running v9.3.0. It does run in a plain HTML page using v9.4.0.

timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook : Google
    2005 : Youtube
    2006 : Twitter

If I figure it out I’ll post back here.

1 Like