Search code examples
githubmarkdown

How do I make a flowchart using markdown on my github blog


I recently put some posts on my github jekyll blog.Everything is fine,except my flowchart.I used to make flowchart like this:

```flow
my content
```

but when I preview the post,It can't display as a flowchart. This is Ok in some other markdown editor.If I want to make flowchart on my github blog,what can I do?Thanks.


Solution

  • Update Feb. 2022: the Mermaid support is official (for Gist too):

    https://github.blog/wp-content/uploads/2022/02/mvp2.png?resize=1200%2C630

    Alternative Links 17/02/2020:

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

    Diagram From Help Page

    There is also an entry in the GitHub Docs

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


    Update Sept. 2021: from GitHub tweet:

    Need to add some ASCII art flow diagrams to your README or code comments?

    YES → https://asciiflow.com (งツ)ว

    flowchart

    This is not "markdown" per se, using "extended ASCII", but it can do the job.


    Original answer 2016: The GitHub Flavored Markdown (GFM) alone does not support flowcharts (as opposed of other markdown like mermaid). You can confirm it in this GFM editor.

    You would be better served by using some JavaScript library to display flowcharts.

    As commented below by Jeremiah England, there is: