Question

我尝试使用美人鱼在降价文件中渲染流程图。我的GitHub存储库中有一个ReadMe.md文件，我想要包含一个基本流程图来帮助描述内容。但我无法弄清楚如何让它发挥作用。有人能够发布一些关于如何呈现一个简单示例的更具体的说明吗？

在此链接（https://unpkg.com/mermaid@8.0.0-rc.8/README.md）中，有一个美人鱼安装的示例代码段：

    ```
    https://unpkg.com/mermaid@7.1.0/dist/
    ```

我包含了该代码，然后尝试在下一个代码段中制作流程图：

    ```
    graph TD;
        A-->B;
        A-->C;
        B-->D;
        C-->D;
    ```

但它所做的只是在预览时在markdown文件中打印出文本。

似乎可能基于美人鱼自述文件：https://github.com/knsv/mermaid/blob/master/README.md。但是当我查看代码时，它实际上是流程图的图片，而不是代码的渲染。也许我问的问题是不可能的？

非常感谢任何帮助！

Answer 1

不幸的是，github风格的markdown不支持渲染美人鱼图。有关更多信息，请参见this issue，并在其他人寻求该功能时有所帮助；）

如果您使用的是VS Code，则可以使用this extension预览markdown中的美人鱼代码块，但请注意，一旦将其放在github上，它就不会呈现。要将图表包含在github上，您将不得不将其呈现为文件，尽管有人建议使用online mermaid editor进行呈现，并检索所呈现版本的URL。

实际上，让我尝试通过前面提到的页面上的链接插入示例图表...，不。我们遇到Failed to upload image; the format is not supported错误。

因此，您需要先将其另存为图像。

Answer 2

我创建了一个Firefox和Chrome扩展程序，该扩展程序在第一个回答Github + Mermaid时不可用

要使用它，您需要指定mermaid作为语言：

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

这适用于：

PR和问题
评论
要旨

（同时处于预览和保存状态）

PS：我不确定在这里做广告是否合适，但我认为它回答了问题。

Answer 3

将存储库移至gitlab的另一种解决方案。它本身在所有markdown文件中都支持美人鱼。

Gitlab Markdown Tutorial

Answer 4

您可以使用mermaid-cli https://github.com/mermaidjs/mermaid.cli来生成图表。您可以根据需要生成.svg，.png或.pdf文件。

在安装mermaid-cli后运行以下命令

mmdc -i input.mmd -o output.png

此处input.mmd是您的美人鱼文件，其中包含

 graph TD;
        A-->B;
        A-->C;
        B-->D;
        C-->D;

根据您的情况。

如何安装Mermaid以在markdown中呈现流程图？

4 个答案: