Diagram/graph feature on wiki via markdown syntax

[tuedang]

For Feature Requests

Desired Feature:

It would be nice if we can support to transform chart/graph from markdown, it's perfect for developer in case of drawing diagram for visualize the things.

Expected Behavior

I have tried to play around on BookStack, and it somehow will be like this

Technically, if we worry about performance because of expensive loading resource, we can apply lazyloading to load the graph resource.

[andunix]

This could be done by integrating mermaid. But I don't know, if it is only client side (rendering in browser).

[henri9813]

This feature would be awesome, we need this functionnality, currently, we draw network scheme on draw.io and after save it on the bookstack, but it's difficult to maintain ...

[cdrfun]

Mermaid syntax is supported via diagrams.net https://www.diagrams.net/blog/mermaid-diagrams

[ravensorb]

This would make it a lot easier to work with Bookstack. Would love to see this implemented -- maybe integration with something like https://kroki.io/ could help simplify (and add support for a number of different visualizations)?

[recalcitrant-matter]

Hello, we currently have implemented a simple work-around that allows us to render mermaid diagrams client side using the mermaid syntax.

To get this working we imported the mermaid rendering module using the Custom HTML Head Content option under customization according to the documentation https://mermaid.js.org/config/usage.html#using-mermaid.

Now just put your mermaid syntax in a <pre class='mermaid> element like this:

<pre class="mermaid">
flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
</pre>

and it should get rendered.

This hack is very similar to the Tex/LaTex (Hack https://www.bookstackapp.com/hacks/mathjax-tex/) and all the same limitations apply.