如何安装Mermaid在markdown中渲染流程图？

Question

我正在尝试使用 Mermaid 在降价文件中呈现流程图。我的 GitHub 存储库中有一个 ReadMe.md 文件，我想包含一个基本流程图来帮助描述内容。但我不知道如何让它工作。有人可以 post 一些关于如何呈现简单示例的更具体的说明吗？

在此 link (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-flavoured markdown 不支持渲染美人鱼图。请参阅 this issue 了解更多信息，并在其他人寻求此功能时找到安慰 ;)

如果您使用的是 VS Code，您可以使用 this extension to preview your mermaid code blocks inside markdown but note that this does not render once you put it on github. To include the chart on github you will have to render it to a file, though someone suggested somehow using the online mermaid editor 来渲染它并检索 URL 到渲染版本。

实际上，让我尝试在前面提到的页面上插入 link 中的示例图表......但是，没有。我们得到一个 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

您可以使用 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 4

另一种将存储库移至 gitlab 的解决方案。它在所有降价文件中原生支持美人鱼。

Gitlab Markdown Tutorial

Answer 5

2022 年第一季度，虽然 GitHub Mardown 尚不支持美人鱼，但已在路线图上：

"Mermaid diagrams can be displayed within Markdown #372"

Just as language-specific code blocks can be added to Markdown, you'll be able to add a Mermaid diagram using a code block that specifies mermaid as its language identifier. For example:
graph TD;
   A-->B;
   A-->C;
   B-->D;
   C-->D;
The Markdown code block above uses Mermaid syntax to display this flowchart in the rendered Markdown:

并且：

Another example from the Mermaid website shows how straightforward text can be used to create rich diagrams:

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

二月。 2022年，Markdown页面正式支持美人鱼:

参见：

Include diagrams in your Markdown files with Mermaid

Mermaid is a JavaScript based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamically in the browser. Maintained by Knut Sveidqvist, it supports a bunch of different common diagram types for software projects, including flowcharts, UML, Git graphs, user journey diagrams, and even the dreaded Gantt chart.

Working with Knut and also the wider community at CommonMark, we’ve rolled out a change that will allow you to create graphs inline using Mermaid syntax:

Gist supports mermaid too.

如何安装Mermaid在markdown中渲染流程图？

How to install Mermaid to render flowcharts in markdown?

github

markdown

readme

mermaid

Include diagrams in your Markdown files with Mermaid