19

我正在尝试使用 Mermaid 在降价文件中呈现流程图。我的 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 。但是当我查看代码时，它实际上是流程图的图片，而不是代码的渲染。所以也许我问的是不可能的？

将不胜感激任何帮助！

4

5 回答 5

16

我创建了第一个答案时不可用的 Firefox 和 Chrome 扩展：Github + Mermaid

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

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

这适用于：

  • 公关和问题
  • 注释
  • 要点

（预览和保存）

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

于 2019-04-26T13:58:30.360 回答
14

不幸的是，github 风格的 markdown 不支持渲染美人鱼图。请参阅此问题以获取更多信息并在其他人寻求此功能时找到安慰；）

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

实际上，让我尝试从前面提到的页面上的链接中插入示例图表......并且，不。我们得到一个Failed to upload image; the format is not supported-error。

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

于 2018-08-28T11:37:06.420 回答
6

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

在你的情况下。

于 2019-05-09T15:45:42.003 回答
6

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

Gitlab Markdown 教程

于 2020-02-01T17:46:52.247 回答
3

2022 年第一季度，虽然 GitHub Mardown 尚不支持 Mermaid，但路线图上有：

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

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

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

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

https://user-images.githubusercontent.com/1767415/147986289-f8283c0b-aa5e-4381-bd69-876edeef12d9.png

和：

Mermaid 网站的另一个示例显示了如何使用简单的文本来创建丰富的图表：

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!

https://user-images.githubusercontent.com/1767415/148230142-63d64ec6-8157-4578-a4a8-a63e386b5cb9.png

2022 年 2 月，Markdown 页面现在正式支持 Mermaid：

看：

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

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

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

例子

Gist 也支持美人鱼。

于 2022-01-12T22:55:55.440 回答