DEV Community

Cover image for Code your own charts for your GitHub README.md
Thanh-Quy Nguyen
Thanh-Quy Nguyen

Posted on

Code your own charts for your GitHub README.md

Have you ever felt like your GitHub README.md missed like a little something?
Felt like your charts made with any other mind map software wasn't accessible enough, hard to edit or heavier to store in your GitHub README.md?

Well, GitHub just added support for Mermaid, and it is going to change your life: basically, it allows you to create charts as simply as that:

graph TD
A --> B
A' --> B
B --> C
B --> D
Enter fullscreen mode Exit fullscreen mode

Simply nest that code in a code block flavoured in mermaid (sorry dev.to editor can't handle nested backticks), and this will result in a graph looking like that, directly in GitHub:
Simple example chart made with mermaid

At Treezor, we use Mermaid in our main front-end monorepo to show the architecture of the project:
Treezor monorepo architecture, screenshot from GitHub

But you can easily chart your database architecture, make a Gantt Diagram to show the overall progress of your project, the possibilities are (almost) endless!
Note that I presented that in the context of GitHub markdown, but it also works in GitLab, or even in HTML.

If you liked this article (or not), if you have any question, let me know by leaving a comment or a like, and I'll gladly answer 😉

About me 🦄

I'm a French front-end and blockchain developer, code lecturer, and entrepreneur. Right now, I'm working at Treezor where I help building a React Native library to help start-ups build a FinTech mobile app in minutes. I am also teaching an introduction class to blockchain at EPITA, one of the top Software Engineering School in France.

Top comments (0)