How to install Mermaid to render flowcharts in markdown?

Question

I'm trying to render a flowchart in a markdown file using Mermaid. I have a ReadMe.md file in my GitHub repository, and I'd like to include a basic flowchart to help describe the contents. But I can't figure out how to get it to work. Would someone be able to post some more specific instructions on how to render a simple example?

In this link (https://unpkg.com/[email protected]/README.md), there's an example code snippet for the Mermaid installation:

    ```
    https://unpkg.com/[email protected]/dist/
    ```

I included that code, then tried to make the flowchart in the next code snippet:

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

But all it does is print that text out in the markdown file when I preview it.

It seems like it's possible based on the Mermaid ReadMe: https://github.com/knsv/mermaid/blob/master/README.md. But when I looked at the code it's actually a picture of the flowchart, not a rendering of code. So maybe what I'm asking isn't possible?

Would appreciate any help!

Answer 1

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 2

Unfortunately, github-flavoured markdown doesn't support rendering of mermaid graphs. See this issue for more information and finding comfort in other peoples quest of this feature ;)

If your are using VS Code, you can use 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 to render it and retrieve an URL to a rendered version.

Actually, let me try to insert the example chart from the link on the previousely mentioned page... and, no. We get a Failed to upload image; the format is not supported-error.

So you will need to save it as an image first.

Answer 3

You can use mermaid-cli https://github.com/mermaidjs/mermaid.cli for generating diagrams. you can produce .svg, .png or .pdf file whatever you want.

Run following command after installing mermaid-cli

mmdc -i input.mmd -o output.png

here input.mmd is your mermaid file which contains

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

in your case.