如何安装美人鱼以在Markdown中渲染流程图？

Question

我正在尝试使用美人鱼在markdown文件中呈现流程图。我的GitHub存储库中有一个ReadMe.md文件，并且我想提供一个基本流程图来帮助描述内容。但是我不知道如何使它工作。有人能够发布一些更具体的说明，以呈现一个简单的示例吗？

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

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

2022 年 2 月，Markdown 页面现已正式支持 Mermaid：
\n（注：2022 年 8 月，GitHub wiki 页面也是如此）

\n

看：

\n

\n

使用 Mermaid 在 Markdown 文件中包含图表

\n

Mermaid是一种基于 JavaScript 的图表绘制工具，它采用 Markdown 启发的文本定义并在浏览器中动态创建图表。它由Knut Sveidqvist维护，支持软件项目的许多不同的常见图表类型，包括流程图、UML、Git 图、用户旅程图，甚至是可怕的甘特图。

\n

我们与 Knut 以及CommonMark的更广泛社区合作，推出了一项更改，允许您使用Mermaid 语法创建内联图形：

\n

\n

\n

吉斯特也支持美人鱼。

\n\n

2022 年 1 月，虽然 GitHub Markdown 尚不支持 Mermaid，但这已在路线图上：

\n

“美人鱼图可以在 Markdown #372 中显示”

\n

\n

正如可以将特定于语言的代码块添加到 Markdown 中一样，您将能够使用指定 mermaid 作为其语言标识符的代码块来添加 Mermaid 图。例如：

\n

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

\n

上面的 Markdown 代码块使用 Mermaid 语法在渲染的 Markdown 中显示此流程图：

\n

\n

\n

和：

\n

\n

美人鱼网站的另一个例子展示了如何使用简单的文本来创建丰富的图表：

\n

sequenceDiagram\n   autonumber\n   Alice->>John: Hello John, how are you?\n   loop Healthcheck\n       John->>John: Fight against hypochondria\n   end\n   Note right of John: Rational thoughts!\n   John-->>Alice: Great!\n   John->>Bob: How about you?\n   Bob-->>John: Jolly good!\n

\n

\n

\n

Answer 2

I created a Firefox & Chrome extension that wasn't available at the time of the first answer: Github + Mermaid

To use it you will need to specify mermaid as a language:

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

This works on:

• PR and issues
• Comments
• Gists

(both on preview and save)

PS: I'm not sure whether it's right or not to advertise my own work here, but I feel it answers the questions.

Answer 3

不幸的是，github风格的markdown不支持美人鱼图的渲染。有关更多信息，请参见此问题，并在其他人寻求该功能时感到舒适；）

如果您使用的是VS Code，则可以使用此扩展来预览Markdown内的美人鱼代码块，但请注意，一旦将其放在github上，它就不会呈现。要将图表包含在github上，您将不得不将其呈现为文件，尽管有人建议以某种方式使用在线美人鱼编辑器来呈现它并检索到呈现版本的URL。

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

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

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;

在你的情况下。

Answer 5

将存储库移动到gitlab 的另一个解决方案。它本身支持所有 Markdown 文件中的美人鱼。

Gitlab Markdown 教程