DEV Community

Cover image for Getting to know mermaid JS
Walter Nascimento
Walter Nascimento

Posted on


Getting to know mermaid JS

Mermaid is an open source tool for creating flow charts, Gantt charts and sequence diagrams using a simple markup language. It is designed to be used in text documents such as reports, presentations and web pages, and it supports multiple output formats including PNG, SVG and PDF. It is based on JavaScript and can be easily incorporated into web projects using a JavaScript library. Mermaid is a great choice for anyone who needs to create flowcharts and other types of diagrams quickly and easily.


Here is a simple example of how to use Mermaid syntax to create a flowchart:

graph TD;
Enter fullscreen mode Exit fullscreen mode


Example 1

Here, the letters A, B, C and D represent the steps in the flow, and the arrows indicate the relationships between them. Note that the syntax is easy to understand and follow. Additionally, there are many other options and features available in Mermaid to help create more complex and detailed diagrams.

Use Case

here's an example of how Mermaid can be used to create a use case diagram:

    participant User as User
    participant System as System
    User->>System: Perform login
    System->>User: Request credentials
    User->>System: Provide credentials
    System->>User: Authenticate credentials
    User->>System: Access protected resources
Enter fullscreen mode Exit fullscreen mode


Example 2

In this example, the diagram shows the interactions between the user and the system during the login process. It shows how the user initiates the process, how the system requests the credentials, how the user provides them, and how the system authenticates them. Finally, the user is able to access the protected resources.

You can use Mermaid to create use case diagrams in various ways, depending on the specific use case. I hope this has helped to show how easy it is to use Mermaid to create use case diagrams.


If you liked it, go to the project's website and support


Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

Support Me

Youtube - WalterNascimentoBarroso
Github - WalterNascimentoBarroso
Codepen - WalterNascimentoBarroso

Top comments (0)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!