In a move that will help in combating doc-rot, GitHub has added support for Mermaid, the open source Markdown-like language that allows developers to generate diagrams and flowcharts.

If you've not come across Mermaid before it is a Javascript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically in the browser. Its main purpose of Mermaid is to help documentation catch up with development.

According to its README:

Diagramming and documentation costs precious developer time and gets outdated quickly. But not having diagrams or docs ruins productivity and hurts organizational learning.

Mermaid addresses this problem by cutting the time, effort and tooling that is required to create modifiable diagrams and charts, for smarter and more reusable content. The text definitions for Mermaid diagrams allows for it to be updated easily, it can also be made part of production scripts (and other pieces of code). So less time needs to be spent on documenting, as a separate and laborious task.

Mermaid supports several common diagram types for software projects, including flowcharts, UML, Git graphs, user journey diagrams, and Gantt charts. It provides sample diagrams, and the code that creates them, in its Live Editor making it easy to use:

The way it now works in GitHub is that code blocks marked as mermaid  cause an iframe to be generated that takes the raw Mermaid syntax and passes it to Mermaid.js, turning that code into a diagram in your local browser.

Now that GitHub makes Mermaid syntax available, information can be shared through rich, visual formats, resulting in better project management and quality and improved workflow.

More Information

Include diagrams in your Markdown files with Mermaid

Mermaid on GitHub

Related Articles

GitHub Improves Code Search

GitHub Launches Actions

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info

<ASIN:1801078025>

<ASIN:B098KHTVJ2>