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

Question

我正在尝试使用Mermaid在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文件中。

我如何实现我所说的结果，或者这是不可能的吗？

- AlexP

---

仅供参考，Webstorm Markdown设置中有一个一键“安装”选项，用于Mermaid和PlantUML支持（设置=>Markdown）。安装后，Markdown编辑器会在预览选项卡中显示渲染的图表（IDEA Markdown编辑器具有左侧：Markdown源，右侧：渲染视图的分割视图）。当然，捆绑的Markdown插件必须启用（默认情况下是启用的，我想）。 - Mörre

Answer 1

在第一篇答案发布之前，我创建了一个Firefox和Chrome扩展程序：Github + Mermaid

要使用它，您需要将 mermaid 指定为一种语言：

<code>```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
</code>

适用于：

• PR和问题
• 评论
• Gist

(预览和保存都可以)

PS：我不确定在这里宣传自己的作品是否正确，但我认为它回答了问题。

- Alex Mercier

---

感谢您提供这个！由于 GitHub 的显示列较窄，我还不得不添加此扩展程序来解决一些大型图表被挤压的问题。 https://github.com/mdo/github-wide - g2server

Answer 2

很遗憾，github风格的Markdown不支持渲染美人鱼图表。请参阅此问题以获取更多信息，并在其他人追求此功能时找到安慰;)

如果您使用VS Code，则可以使用此扩展程序在Markdown内预览美人鱼代码块，但请注意，一旦将其放在GitHub上，它将无法呈现。要在GitHub上包含图表，您需要将其渲染为文件，但有人建议以某种方式使用在线美人鱼编辑器进行渲染并检索呈现版本的URL。

实际上，让我尝试插入先前提到的页面链接中的示例图表……但是，不行。我们收到了一个Failed to upload image; the format is not supported-错误。

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

- Jannik Buhr

Answer 3

2022年2月，Markdown页面现已官方支持Mermaid：
（注意：2022年8月，GitHub维基页面也支持了）

请参见：

在Markdown文件中使用Mermaid绘制图表

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

通过与Knut以及在CommonMark的更广泛社区合作，我们推出了一个变更，使你可以使用 Mermaid语法创建内联图表：

Gist也支持Mermaid。

---

2022年1月，虽然GitHub Markdown尚未支持Mermaid，但这在路线图上已经规划了： “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!

- VonC

---

尽管工单标记为“Open”，但“今天，我们很高兴地宣布，在支持Markdown的任何地方（例如问题、存储库、讨论、要点）都可以原生支持Mermaid。”让我很兴奋能够使用这个新功能，然而，本应该是“我们很高兴地宣布我们已经将此功能添加到我们的路线图中。” - ksclarke

@ksclarke 确实，它还没有完全到位 ;) - VonC

已到达 https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/ - Kariem

@Kariem 谢谢。我已经相应地更新了答案。 - VonC

Answer 4

您可以使用mermaid-cli https://github.com/mermaidjs/mermaid.cli来生成图表。您可以生成.svg、.png或.pdf文件，以您想要的格式输出。

在安装了Mermaid-cli之后，请运行以下命令。

mmdc -i input.mmd -o output.png

这里的 input.mmd 是你的 Mermaid 文件，其中包含：

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

在你的情况下。

- siddharthkumar patel

---

现在已经迁移到https://github.com/mermaid-js/mermaid-cli - undefined

Answer 5

将代码库迁移到GitLab的另一种解决方案。它原生支持在所有Markdown文件中使用mermaid。

GitLab Markdown教程

- pktiuk