# Plugin Mermaid JS
**URL:** https://meta.discourse.org/t/mermaid-js-plugin/88696
**Category:** Plugin
**Created:** [29 Maggio 2018, 9:24pm UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696 "2018-05-29T21:24:43Z")
**Posts on this page:** 18
**Page:** 1
### Author:  [@jag3773](https://meta.discourse.org/u/jag3773)
#### Post date: [29 Maggio 2018, 9:24pm UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696/1 "2018-05-29T21:24:43Z")
Repo: [GitHub - unfoldingWord/discourse-mermaid: Adds the Mermaid JS library to discourse · GitHub](https://github.com/unfoldingWord-dev/discourse-mermaid)
## Overview
This plugin adds the [Mermaid JS](https://mermaidjs.github.io/) library to Discourse so that posts can make use of its features. It turns this:
```plaintext
[mermaid]
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
[/mermaid]
```
into this:
See the [Mermaid JS](https://mermaidjs.github.io/) site for documentation and more examples.
## Installation
The installation notes are available at [GitHub - unfoldingWord/discourse-mermaid: Adds the Mermaid JS library to discourse · GitHub](https://github.com/unfoldingWord-dev/discourse-mermaid#installation) (in short, just add it to `app.yml`).
## Notes
Thanks to @j.jaffeux, version 0.0.3 of this plugin is much easier to install and the generated charts load reliably and immediately.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [29 Maggio 2018, 9:56pm UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696/3 "2018-05-29T21:56:39Z")
This is very cool, some ideas for future work:
1. email support here is going to be ultra weak cause it is likely to require very rich feature from email that you can not deliver
I would recommend adding a `reduce_cooked` email hook (see [discourse/lib/pretty\_text.rb at 4ad924bcf5acb6c99868887b2a402b7b5f289771 · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/4ad924bcf5acb6c99868887b2a402b7b5f289771/lib/pretty_text.rb#L381-L388) ) you can use image magick to convert SVG to an image, create an upload, tie to post and then add it there. It is fiddly but would add value.
1. This hack is interesting, cause you could make this wider and support graphviz [GitHub - mdaines/viz-js: Graphviz in your browser · GitHub](https://github.com/mdaines/viz.js/)
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [29 Maggio 2018, 10:51pm UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696/4 "2018-05-29T22:51:09Z")
> [@jag3773](#):
>
> Notably, this requires you to add Mermaid JS to the `` section of your site’s theme.
Can’t you vendor this lib so a user can skip this step? I believe [GitHub - discourse/discourse-math: Official MathJax support for Discourse · GitHub](https://github.com/discourse/discourse-math) does this.
---
### Author:  [@jag3773](https://meta.discourse.org/u/jag3773)
#### Post date: [7 Giugno 2018, 1:41pm UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696/5 "2018-06-07T13:41:51Z")
> [@Falco](#):
>
> Can’t you vendor this lib so a user can skip this step? I believe [GitHub - discourse/discourse-math: Official MathJax support for Discourse](https://github.com/discourse/discourse-math) does this.
I’d love to, especially because I’m suspicious that might make the rendering more reliable. However, I can’t see how this happens, can you point me to something more specific?
---
### Author:  [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [7 Giugno 2018, 8:26pm UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696/6 "2018-06-07T20:26:06Z")
Hi @jag3773,
I made a PR to this plugin project. It’s now fully lazy loaded and you don ’t need to add anything in your header. Enjoy!
[https://github.com/unfoldingWord-dev/discourse-mermaid/pull/1](https://github.com/unfoldingWord-dev/discourse-mermaid/pull/1)
---
### Author:  [@jag3773](https://meta.discourse.org/u/jag3773)
#### Post date: [13 Giugno 2018, 10:36pm UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696/7 "2018-06-13T22:36:18Z")
Thanks @j.jaffeux ! As you saw, I merged in your PR and the results are far superior. The charts now load reliably and nearly instantly. I’ve updated the OP along these lines.
---
### Author:  [@ssvenn](https://meta.discourse.org/u/ssvenn)
#### Post date: [25 Agosto 2018, 8:02pm UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696/8 "2018-08-25T20:02:13Z")
Really love this plugin, it is very fun to use when you get instant updates in the editor preview pane 😃
Is there an easy way to make the plugin work better with dark themes?
There seems to be some example css in [https://github.com/knsv/mermaid/tree/master/src/themes](https://github.com/knsv/mermaid/tree/master/src/themes) but I’m not sure what parts of it I would need to copy over to the theme CSS to make it the default for charts
Right now it looks like this with the bundled Dark theme, I would like to at least make all text and arrows white :
---
### Author:  [@ssvenn](https://meta.discourse.org/u/ssvenn)
#### Post date: [27 Agosto 2018, 8:10am UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696/9 "2018-08-27T08:10:17Z")
I’ll add one more thing to my wishlist, it would be great to have a composer button for Mermaid that could insert some example charts and have a link to the documentation site to make it easier for new users to discover all the functionality of the script.
I started looking for a generic toolbar customizer plugin to insert the snippets I need but it doesn’t look like anyone has made one. It would probably make more sense for each plugin to manage their own toolbar extensions anyway.
---
### Author:  [@jag3773](https://meta.discourse.org/u/jag3773)
#### Post date: [13 Settembre 2018, 3:58pm UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696/14 "2018-09-13T15:58:34Z")
I totally agree, the instant updates in the preview pane are awesome!
I see how it doesn’t look great with the Dark theme ☹ . Unfortunately, I don’t have the know how or capacity to work on a fix for that. However, I would gladly accept a PR that introduces a solution.
Node styling, as described in [https://mermaidjs.github.io/flowchart.html](https://mermaidjs.github.io/flowchart.html) does work. But that may be of limited usefulness in addressing the Dark theme issue.
---
### Author:  [@gdpelican](https://meta.discourse.org/u/gdpelican)
#### Post date: [13 Settembre 2018, 7:10pm UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696/15 "2018-09-13T19:10:24Z")
Mermaid has a few themes in their repo, which I imagine you’d be able to select either with a site setting or something. My wild guess would be that [this](https://github.com/unfoldingWord-dev/discourse-mermaid/blob/master/assets/javascripts/initializers/discourse-mermaid.js.es6#L14) turns into
```plaintext
mermaid.init({ theme: 'dark' }, $mermaid)
```
Unfortunately none of the current ones (options are ‘dark’, ‘forest’, and ‘neutral’) really look good with DIscourse’s dark theme (they all have black text labels), so my recommendation here for someone willing to work on this (not me sorry 🧜♀️)
- Write a new theme for MermaidJS based on [one of the the existing ones](https://github.com/knsv/mermaid/blob/master/src/themes/dark/index.scss) and PR it
- Update the plugin to pass in a theme parameter somehow, like they do in the [live editor](https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbkFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuQiAtLT4gQ3tMZXQgbWUgdGhpbmt9XG5DIC0tPnxPbmV8IERbTGFwdG9wXVxuQyAtLT58VHdvfCBFW2lQaG9uZV1cbkMgLS0-fFRocmVlfCBGW2ZhOmZhLWNhciBDYXJdXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ)
---
### Author:  [@nskerl](https://meta.discourse.org/u/nskerl)
#### Post date: [29 Settembre 2018, 12:14am UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696/16 "2018-09-29T00:14:47Z")
Is it possible to support the render of the chart while printing (via ctrl+p) when using this mermaid plugin?
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [29 Settembre 2018, 12:31am UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696/17 "2018-09-29T00:31:19Z")
Simplest would be just to use the graphviz plugin instead
> [@Discourse Graphviz](https://meta.discourse.org/t/graphviz-plugin/97554):
>
> discourse2Summary Discourse Graphviz provides the ability to add graphs to posts using the DOT language.open_bookInstall Guide This plugin is bundled with Discourse core. There is no need to install the plugin separately. Features This plugin uses the [Viz.js](https://github.com/mdaines/viz.js) library to render graphs. To embed a graph use [graphviz] [/graphviz] bbcode. Optionally you can define layout engine attributes: [graphviz engine=neato]. If engine is not defined, it defaults to the dot engine…
---
### Author:  [@nskerl](https://meta.discourse.org/u/nskerl)
#### Post date: [1 Ottobre 2018, 10:37pm UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696/18 "2018-10-01T22:37:27Z")
@sam Thanks for the link
---
### Author:  [@Alon1](https://meta.discourse.org/u/Alon1)
#### Post date: [17 Maggio 2021, 8:28pm UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696/19 "2021-05-17T20:28:17Z")
Grazie per il plugin! Molto utile per i team di Discourse.
---
### Author:  [@jag3773](https://meta.discourse.org/u/jag3773)
#### Post date: [18 Maggio 2021, 3:04pm UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696/20 "2021-05-18T15:04:17Z")
Aggiornato mermaidJS alla versione 8.10.1 grazie a @rishabhlakhotia su Github.
---
### Author:  [@cmdntd](https://meta.discourse.org/u/cmdntd)
#### Post date: [16 Luglio 2023, 1:00pm UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696/21 "2023-07-16T13:00:30Z")
Nel diagramma di flusso, del testo non viene visualizzato nel formato corretto
Specialmente quando è necessario racchiuderlo tra `` per la formattazione:
```plaintext
"La **gatta** nel cappello"
```
Tutto è a posto su mermaid.live
Questo è un test per questo esempio:
```plaintext
flowchart LR
subgraph "Uno"
a("`La **gatta**
nel cappello`") -- "etichetta del bordo" --> b{{"`Il **cane** nel porco`"}}
end
subgraph "` **Due** `"
c("`La **gatta**
nel cappello`") -- "` **Etichetta del bordo** in grassetto`" --> d("Il cane nel porco")
end
```
Dal documento su [Flowcharts Syntax | Mermaid](https://mermaid.js.org/syntax/flowchart.html)
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [17 Luglio 2023, 7:44am UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696/22 "2023-07-17T07:44:42Z")
Abbiamo il componente tema [Discourse Mermaid](https://meta.discourse.org/t/discourse-mermaid/218242) qui su Meta invece del plugin, e posso vedere un risultato simile usando l’esempio:
```mermaid
flowchart LR
subgraph "One"
a("`The **cat**
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "` **Two** `"
c("`The **cat**
in the hat`") -- "`Bold **edge label** `" --> d("The dog in the hog")
end
```
Tuttavia, non sto seguendo l’esempio collegato, poiché questo non sembra mostrare il testo in grassetto/corsivo nel diagramma di flusso finito: (anche se non mostra il Markdown stesso)
Farò alcune indagini. 🙂
---
### Author:  [@cmdntd](https://meta.discourse.org/u/cmdntd)
#### Post date: [17 Luglio 2023, 5:27pm UTC](https://meta.discourse.org/t/mermaid-js-plugin/88696/25 "2023-07-17T17:27:29Z")
Grazie. Cambierò per utilizzare il componente del tema.
Se vuoi avere il miglior esempio, potresti testare l’esempio su:
> **[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.