The entire process is explained well in the official announcement blog. Viewscreen is GitHub's internal file rendering service which is partially responsible for this whole process. The iframe is injected into the page, pointing src to the Viewscreen service. How Does Mermaid Work? 🤔Īccording to the official GitHub blog, when a code block marked as mermaid is encountered, the raw mermaid syntax in the block is passed to Mermaid.js and an iframe is generated. Mermaid supports various types of diagrams, such as UML diagrams, Gantt charts, Git Graphs, and User Journey Diagrams. It helps us visualize documentation and catch it up with development by dynamically creating and modifying diagrams in the browser. Mermaid is a tool that renders diagrams based on markdown-like text content. This means that we can now create and edit diagrams in the native markdown file.īut first, what is Mermaid? What is Mermaid? 🧜♀️ Mermaid syntax is now supported by default in GitHub Markdown. On February 14th, GitHub gifted a new feature to all devlovers. This worked, and let us complete our tasks – but why settle for less when you can create a diagram within the README file itself? Well, now you can. Previously, if you wanted to include a diagram in your GitHub README file, you would've needed to add it like an image created with third-party software.
