DEV Community

Waylon Walker
Waylon Walker

Posted on • Originally published at waylonwalker.com

GitHub Markdown now Supports Mermaid Diagrams

Mermaid diagrams provide a way to display graphs defined as plain text. Some markdown renderers support this as a plugin. GitHub now supports it.

example

You can define nodes like this in mermaid, and GitHub will now render them as a pretty graph diagram. Its rendered in svg, so its searchable with control f and everything.

  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D-->OUT;
      E-->F-->G-->OUT
Enter fullscreen mode Exit fullscreen mode

Here is what the example looks like on GitHub

Links

Discussion (2)

Collapse
tariksouabny profile image
Tarik Souabny

Wow! :O I can see this being used more for flowcharts and similar things. I'll make sure to get into the habit of using these.

Collapse
matteobruni profile image
Matteo Bruni

This is awesome, I think I’m going to use it soon!