3

mermaid 语法在 markdown 文本中的集成有一些引人注目的地方，因为它非常“markdownish”。我想我想在rocket.chat 窗口中输入我自己的美人鱼图，并实时查看它的解释。

我已经有机会进行美人鱼集成，我希望这不会太难。

mermaid 基本上是一个适用于 HTML 片段的 JavaScript 库，例如：

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

所以它基本上只需要生成那段代码+在被可视化的窗格中包含美人鱼 javascript 库，以获得正确显示的图表，如下所示：

在此处输入图像描述

我在这里要问的问题是，可以从哪里开始配置rocket.chat 实例（和/或利用其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]
```

作为正确的图表？

4

1 回答 1

4

没有任何方法可以很好地做到这一点，因为 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，但如果你想让图像自动发送，你可以向本地（或 Heroku）托管的 Node.js 服务器发出包含图像的 POST 请求。服务器将处理该图像，然后返回托管它的 url。然后，您将使用您获得的 URL 并将消息栏的值替换为显示图像的降价。我建议在第一个聊天按钮上显示第二个按钮，如果你想发送美人鱼图，你可以点击那个按钮。

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

于 2020-12-09T22:56:45.227 回答