Diagram as Code with Mermaid

3 min readSep 8, 2024

What is a Mermaid Diagram?

Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation keep pace with development.

Using Mermaid helps create diagrams in Markdown documents through code instead of image files. Since diagrams are generated by code, the major advantages include easy modification, readable syntax, easy sharing, and the ability to quickly create diagrams that can be updated promptly with system changes.

Using Mermaid Diagrams

I provide you with two simple ways to use Mermaid Diagrams:

Accessing Mermaid Live: This site allows you to use Mermaid directly, offering many sample diagrams to choose from. You just need to replace the necessary values according to your needs to create the required diagram.
Using Visual Code: Install the extension “Markdown Preview Mermaid Support” to preview Mermaid Diagrams in Markdown files. This way, you can use Mermaid directly on your local machine.

Types of Diagrams

If you work in software development, there are several common types of diagrams you will encounter, such as Flowcharts, Sequence Diagrams, State Diagrams, Class Diagrams, and more. Here are some examples of these popular diagram types:

Flowchart

graph TD;
    A[Start] --> B{Is it?};
    B -->|Yes| C[Do something];
    B -->|No| D[Do something else];
    C --> E[End];
    D --> E[End];

Sequence Diagram

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

State Diagram

stateDiagram
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

Class Diagram

classDiagram
    class Animal{
        +String name
        +int age
        +void eat()
        +void sleep()
    }
    class Dog{
        +void bark()
    }
    Animal <|-- Dog

Bar chart

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

Using these examples, you can start creating and updating diagrams easily to keep your documentation aligned with your system’s development. Happy coding!

If you found this content helpful, please visit the original article on my blog to support the author and explore more interesting content.

Blogger — Medium — Dev.to — Facebook — X.com

Some series you might find interesting: