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)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay