温馨提示:本文翻译自stackoverflow.com,查看原文请点击:github - How to install Mermaid to render flowcharts in markdown?
github Markdown readme mermaid

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

发布于 2020-04-11 13:00:21

我正在尝试使用美人鱼在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但是,当我查看代码时,它实际上是流程图的图片,而不是代码的呈现。所以也许我要问的是不可能的?

将不胜感激!

查看更多

提问者
AlexP
被浏览
148
Jannik Buhr 2018-08-28 19:37

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

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

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

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