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:

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?

There isn’t any way to do this well, as rocket.chat is not customizable (at least as far as I can tell, I don’t use it). However, I think that if you injected external js code (along with mermaid-js) into rocket.chat, you could make rocket.chat send the graph as an image. Of course, if you do not want to paste the script in the console every time you need it, you would need to use something like Tampermonkey or a chrome extension.

That being said, you would also need to dynamically add mermaid as a script, so something like:

var url = ‘https://unpkg.com/browse/mermaid@8.8.0/‘;
var script = document.createElement("script"); 
script.src = url;

document.head.appendChild(script);  

Would suffice. Then, you would need to add a click event to the “send” button and read the value of the message bar. Use a bit of logic to determine whether the bar contains a ``` (and maybe add that you need to put mermaid after it like ```mermaid). If the chat bar contains mermaid code, then add a hidden mermaid graph and wrap the graph in a tag, then trigger an event (like a button click) that downloads the graph. I am not sure that you know any Node.JS, but if you wanted to have the image automatically send, you could make a POST request containing the image to a Node.js server that you host locally (or by Heroku). The server would process that image and in turn, return the url at which it is hosted. Then, you would use the URL you got and replace the value of the message bar with a markdown that displays the image. I would recommend making a second button appear over the first chat button, and if you want to send a mermaid graph, you can click that button.

In conclusion, what you are seeking to do is quite do-able, but it will take time (and a lot of patience). I would recommend researching Rocket.Chat and practice injecting scripts that automatically send messages and things like that. Since I am on my iPad (my computer’s screen is broken) I cannot give you code examples, but I hope you can make do with what I wrote.