feature: Render inline mermaidjs blocks

[humble-barnacle001]

Problem:

Render the mermiadjs block like Github. For example:

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>+Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

renders to

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>+Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

Loading

Solution:

https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/

[simonhaenisch]

Basically same as #41 (comment): it's possible to do this via a marked extension (see https://marked.js.org/using_pro).

If you happen to figure out how to do this, please let us know here (:

[humble-barnacle001]

I wanted the feature for a school assignment of mine.

If you happen to figure out how to do this, please let us know here (:

Right now I am little busy with school work but as soon as I am free I shall try to make it work eta 1 month

[danishcake]

So, I had a crack at this recently. It shouldn't be too hard, theoretically, but it took a bit of persuading for mermaid to actually render. See the gist below.

https://gist.github.com/danishcake/d045c867594d6be175cb394995c90e2c

The gotcha was that mermaid.initialize() didn't trigger the render. I had to explicitly call mermaid.run. I'm not sure why.

Given this is a semi-common request, perhaps something like the above could be rolled into the documentation, or a set of pre-packaged (but optional) extensions?

[simonhaenisch]

i proposed turning this into a marked extension in #145 (: sadly i don't have the time to work on it