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

在标记文本中的整合有一些引人注目的东西，因为它相当“标记化”。我想在rocket.chat窗口中键入我自己的美人鱼图，并在飞行中看到它的解释

我已经有机会从事美人鱼集成的工作，我希望这次不会太难

mermaid基本上是一个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>

---

作为一个合适的图表？

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

也就是说，您还需要动态添加mermaid作为脚本，例如：

var url='1〕https://unpkg.com/browse/mermaid@8.8.0/‘;
var script=document.createElement（“脚本”）；
script.src=url；
document.head.appendChild（脚本）；

就够了。然后，您需要向“发送”按钮添加一个单击事件，并读取消息栏的值。使用一点逻辑来确定该条是否包含一个

``

（可能还需要添加一点，您需要将

美人鱼

放在它后面，就像

``美人鱼

）。如果聊天栏包含美人鱼代码，则添加一个隐藏的美人鱼图并将该图包装在标记中，然后触发一个事件（如单击按钮）下载该图。我不确定您是否知道Node.JS，但如果您想让图像自动发送，您可以向本地（或由Heroku）托管的Node.JS服务器发出包含图像的POST请求。服务器将处理该图像，然后返回承载该图像的url。然后，您将使用获得的URL并用显示图像的标记替换消息栏的值。我建议在第一个聊天按钮上方显示第二个按钮，如果您想发送美人鱼图，可以单击该按钮

总之，你想要做的事情是完全可以做到的，但这需要时间（和很大的耐心）。我建议研究Rocket.聊天和练习注入脚本，自动发送消息之类的东西。因为我在我的iPad上（我的电脑屏幕坏了），所以我不能给你们代码示例，但我希望你们能接受我写的东西

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