Mermaid JS Plugin

插件
1

Repo: https://github.com/unfoldingWord-dev/discourse-mermaid

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:

55%20PM
55%20PM760×335 18.8 KB

See the Mermaid JS site for documentation and more examples.

Installation

The installation notes are available at 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.

30 个赞
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 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 https://github.com/mdaines/viz.js/
11 个赞
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.

11 个赞
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?

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!

https://github.com/unfoldingWord-dev/discourse-mermaid/pull/1

13 个赞
7

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.

7 个赞
8

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 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 :
12

3 个赞
9

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.

1 个赞
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 https://mermaidjs.github.io/flowchart.html does work. But that may be of limited usefulness in addressing the Dark theme issue.

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

16

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

17

Simplest would be just to use the graphviz plugin instead

4 个赞
18

@sam Thanks for the link

19

Thanks for the plugin! Very useful for Discourse teams.

1 个赞
20

Just updated mermaidJS to v8.10.1 thanks to @rishabhlakhotia on Github.

4 个赞
21

流程图中，一些文本未正确显示格式
特别是在需要使用 `` 格式时：

“`**猫**在帽子里`”

Cấu trúc tuyển dụng nhân sự wo24 - Core _ System - Working24
Cấu trúc tuyển dụng nhân sự wo24 - Core _ System - Working24251×247 7.25 KB

在 mermaid.live 上一切正常
这是此示例的测试：

flowchart LR
subgraph "One"
  a("`**猫**
在帽子里`") -- "边缘标签" --> b{{"`**狗**在猪身上`"}}
end
subgraph "`**二**`"
  c("`**猫**
在帽子里`") -- "`粗体 **边缘标签**`" --> d("狗在猪身上")
end

来自文档 Flowcharts Syntax | Mermaid

22

我们这里有一个主题组件 https://meta.discourse.org/t/discourse-mermaid/218242，而不是插件，并且我可以使用以下示例看到类似的结果：

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

不过，我没有遵循链接的示例，因为它似乎没有在最终的流程图中显示粗体/斜体文本：（但也没有显示 Markdown 本身）

markdown mermaid
markdown mermaid1080×1665 108 KB

我将进行一些询问。 :slight_smile:

1 个赞
25

谢谢。我将更改为使用主题组件。

如果您想要最好的示例，可以在以下位置进行测试：

2 个赞