Mermaid JS Plugin


(Jesse Griffin) #1

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

Overview

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

[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 site for documentation and more examples.

Installation

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).

Notes

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.