This content originally appeared on DEV Community and was authored by chauhoangminhnguyen
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.
Some series you might find interesting:
This content originally appeared on DEV Community and was authored by chauhoangminhnguyen
chauhoangminhnguyen | Sciencx (2024-09-08T14:00:00+00:00) Diagram as Code with Mermaid. Retrieved from https://www.scien.cx/2024/09/08/diagram-as-code-with-mermaid/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.