Diagram as Code with Mermaid

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:

  1. 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.
  2. 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.
Using on VS Code
Using on VS Code

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!

Comments

Popular posts from this blog

Kubernetes Practice Series

NodeJS Practice Series

Docker Practice Series

React Practice Series

Sitemap

Setting up Kubernetes Dashboard with Kind

Explaining Async/Await in JavaScript in 10 Minutes

Deploying a NodeJS Server on Google Kubernetes Engine

Create API Gateway with fast-gateway

DevOps Practice Series