Sunday 6 December 2020

How to add mermaid diagrams to a rocket.chat instance?

There is something compelling in the integration of mermaid syntax in markdown text, since it is quite "markdownish". I got the idea that I would like to type my own mermaid diagram in a rocket.chat window and see it interpreted on the fly.

I have already had the opportunity to work on mermaid integrations, and I hope this one should not be too difficult.

mermaid is basically a javascript library that works on HTML snippets like:

<div class="mermaid">
    graph 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]
</div>

So it basically requires only to generate that piece of code + include the mermaid javascript library in the pane being visualized, to get a properly displayed diagram, which would look like:

enter image description here

The question I am asking here, is where one could start from, to configure a rocket.chat instance (and/or exploit its API) so that one could convince it to interpret a user-type sequence in a message e.g. :

```mermaid
graph 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]
```

as a proper diagram?



from How to add mermaid diagrams to a rocket.chat instance?

No comments:

Post a Comment