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

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

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

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

GitHub’s Director of Developer Relations, Martin Woodward, explains that Mermaid "supports a bunch of different common diagram types for software projects, including flowcharts, UML, Git graphs, user journey diagrams, and even the dreaded Gantt chart."

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

You can learn more about the Mermaid syntax on the official Mermaid website.

Image credit: Koryaba/depositphotos.com