GitHub adds native support for JavaScript-based diagramming tool, Mermaid


Developers would see a 50% increase in productivity when documentation is detailed and available in different formats, but previously if you wanted to include images and/or diagrams in Markdown files on GitHub, you had to do so by embedding an image .

Starting today, however, developers can now include diagrams and flowcharts generated using the popular Markdown Mermaid-like language.

This will allow GitHub users to share information through rich visual formats, providing better project management and quality and improved workflow.

GitHub Developer Relations Manager Martin Woodward explains that Mermaid “supports a bunch of different common diagram types for software projects, including flowcharts, UML, Git charts, user journey diagrams, and even the dreaded Gantt chart”.

Adding Mermaid diagrams to the GitHub documentation is very simple. When you mark a block of code as mermaid an iframe will be generated that will take raw Mermaid syntax and pass it to Mermaid.js, turning that code into a diagram in your browser.

You can read more about Mermaid’s syntax on Mermaid’s official website.

image credit: Koryaba/


About Author

Comments are closed.