DEV Community

Cover image for How to create diagrams with markup language (Mermaid)
Israel-Lopes
Israel-Lopes

Posted on • Edited on

How to create diagrams with markup language (Mermaid)

If you're like me and don't like creating diagrams in apps, get to know mermaid.

Mermaid is a markup language that lets you create diagrams with just a few lines of code.

In order for the diagram to render, you can add a plugin to your IDE. So when opening a .md file, just ask it to render the markdown and the diagram will be rendered together.

If you want to render it directly on your page, just add the tag:

<script src="https://unpkg.com/mermaid@8.4.8/dist/mermaid.min.js"></script>

Image description

Image description

Image description

Image description

We should always keep the default opening of the mermaid, only what will change is graph TD; which is the style of the diagram. This style you change with your need.

Of these styles we have some that are: flowchart LR, sequenceDiagram and journey.

There are more styles, and you can check it right here at the official mermaid link, there you will have the complete documentation.

mermaid-oficial-link

Texto alternativo da imagem)

Top comments (0)