Mermaid JS Plugin

(Jesse Griffin) #1

Repo: GitHub - unfoldingWord-dev/discourse-mermaid: Adds the Mermaid JS library to discourse


This plugin adds the Mermaid JS library to Discourse so that posts can make use of its features. It turns this:

    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

into this:

See the Mermaid JS site for documentation and more examples.


The installation notes are available at GitHub - unfoldingWord-dev/discourse-mermaid: Adds the Mermaid JS library to discourse (in short, just add it to app.yml).


Thanks to @joffreyjaffeux, version 0.0.3 of this plugin is much easier to install and the generated charts load reliably and immediately.

(Sam Saffron) #3

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/pretty_text.rb at 4ad924bcf5acb6c99868887b2a402b7b5f289771 · discourse/discourse · GitHub ) 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: A hack to put Graphviz on the web.

(Rafael dos Santos Silva) #4

Can’t you vendor this lib so a user can skip this step? I believe GitHub - discourse/discourse-math: Official MathJax support for Discourse does this.

(Jesse Griffin) #5

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?

(Joffrey Jaffeux) #6

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!

(Jesse Griffin) #7

Thanks @joffreyjaffeux ! 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.


Really love this plugin, it is very fun to use when you get instant updates in the editor preview pane :smiley:
Is there an easy way to make the plugin work better with dark themes?

There seems to be some example css in mermaid/src/themes at master · knsv/mermaid · GitHub 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 :


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.

(Jesse Griffin) #14

I totally agree, the instant updates in the preview pane are awesome!

I see how it doesn’t look great with the Dark theme :frowning: . 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 Flowchart · GitBook does work. But that may be of limited usefulness in addressing the Dark theme issue.

(James Kiesel) #15

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 turns into

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 :mermaid:)

(Nathan Skerl) #16

Is it possible to support the render of the chart while printing (via ctrl+p) when using this mermaid plugin?

(Sam Saffron) #17

Simplest would be just to use the graphviz plugin instead

(Nathan Skerl) #18

@sam Thanks for the link