Now, Github allows diagrams and flowcharts in markdown files

Earlier, developers used to embed an image on Github in their markdown files.
GitHub Repository

Github will allow developers to include diagrams and flowcharts generated using Mermaid–a JavaScript-based diagramming and charting tool–in markdown files. Developers see about 50% productivity boost with easy-to-source documentation.

Earlier, developers used to embed an image on Github in their markdown files and keeping the diagrams up to date was a major challenge.

Mermaid creates diagrams automatically in the browser. Flowcharts, UML, Git graphs, user journey diagrams, and even the dreaded Gantt chart can be built on Mermaid.


Sign up for your weekly dose of what's up in emerging technology.

How Mermaid works

Github generates an iframe when it encounters the code blocks marked as Mermaid.  The iframe takes the raw Mermaid syntax and passes it to Mermaid.js, which in turn turns the code into a diagram in the local browser. Github follows a two-stage process – GitHub’s HTML pipeline and Viewscreen, Github’s internal file rendering service.

Visual representation of Mermaid’s pipeline:

Mermaid helps developers to produce vector-based diagrams that can be easily embedded into the documentation. Mermaid is becoming popular with developers and has a huge community of contributors. Knut Sveidqvist maintains the Mermaid project.

More Great AIM Stories

SharathKumar Nair
Sharath is an ardent believer in the ‘Transhumanism’ movement. Anything and everything about technology excites him. At Analytics India Magazine, he writes about artificial intelligence, cybersecurity and the impact these emerging technologies have on day-to-day human lives. When not working on a story, he spends his time reading tech novels and watching sci-fi movies and series.

Our Upcoming Events

Conference, in-person (Bangalore)
Machine Learning Developers Summit (MLDS) 2023
19-20th Jan, 2023

Conference, in-person (Bangalore)
Rising 2023 | Women in Tech Conference
16-17th Mar, 2023

Conference, in-person (Bangalore)
Data Engineering Summit (DES) 2023
27-28th Apr, 2023

Conference, in-person (Bangalore)
MachineCon 2023
23rd Jun, 2023

Conference, in-person (Bangalore)
Cypher 2023
20-22nd Sep, 2023

3 Ways to Join our Community

Whatsapp group

Discover special offers, top stories, upcoming events, and more.

Discord Server

Stay Connected with a larger ecosystem of data science and ML Professionals

Subscribe to our newsletter

Get the latest updates from AIM