如何将美人鱼图添加到 rocket.chat 实例？

Question

在降价文本中集成 mermaid syntax 有一些引人注目的地方，因为它很 "markdownish"。我想到我想在 rocket.chat window 中输入我自己的美人鱼图，并即时查看它的解释。

我已经有机会做美人鱼集成了，希望这个不要太难。

美人鱼基本上是一个 javascript 库，适用于 HTML 片段，例如：

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

所以它基本上只需要生成那段代码 + 在可视化的窗格中包含 mermaid javascript library，以获得正确显示的图表，它看起来像：

我在这里要问的问题是，可以从哪里开始配置一个rocket.chat实例（and/or利用它的API) 这样就可以说服它解释消息中的用户类型序列，例如:

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

作为正确的图表？

Answer 1

没有任何方法可以很好地做到这一点，因为 rocket.chat 不可自定义（至少据我所知，我没有使用它）。但是，我认为如果您将外部 js 代码（连同 mermaid-js）注入 rocket.chat，您可以让 rocket.chat 将图形作为图像发送。当然，如果您不想每次需要时都将脚本粘贴到控制台，则需要使用 Tampermonkey 之类的东西或 chrome 扩展。

也就是说，您还需要将美人鱼动态添加为脚本，例如：

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

document.head.appendChild(script);

足够了。然后，您需要向“发送”按钮添加点击事件并读取消息栏的值。使用一些逻辑来确定柱状图是否包含 ```（并且可能需要添加 mermaid，如 ```mermaid）。如果聊天栏包含美人鱼代码，则添加隐藏的美人鱼图并将该图包裹在标签中，然后触发下载该图的事件（如按钮单击）。我不确定您是否知道任何 Node.JS，但是如果您想让图像自动发送，您可以向本地托管的 Node.js 服务器发出包含图像的 POST 请求（或通过 Heroku）。服务器将处理该图像，然后 return 托管它的 url。然后，您将使用获得的 URL 并将消息栏的值替换为显示图像的降价。我建议在第一个聊天按钮上显示第二个按钮，如果您想发送美人鱼图，可以单击该按钮。

总之，你想做的事情是可行的，但需要时间（和很大的耐心）。我建议研究 Rocket.Chat 并练习注入自动发送消息和类似内容的脚本。由于我在我的iPad（我的电脑屏幕坏了）我不能给你代码示例，但我希望你能凑合我写的

如何将美人鱼图添加到 rocket.chat 实例？

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

javascript

markdown

mermaid

rocket.chat