JavaScript

mermaid.js Introduction: A Complete Guide from Basic Flowcharts to Advanced Techniques

 

This article provides a comprehensive explanation of the appeal and usage of mermaid.js. By using mermaid.js, you can easily create and visually display complex diagrams such as flowcharts, diagrams, and Gantt charts.

Contents
  1. What is mermaid.js?
  2. How to introduce mermaid.js
  3. Example of Creating a Flowchart
  4. Demo Page to Display Flowcharts Using mermaid.js
  5. Source: Flowcharts – Basic Syntax
  6. Conclusion

What is mermaid.js?

mermaid.js is a JavaScript-based library that is a very useful tool for programmers and engineers. It allows you to create diagrams by writing code, which is especially helpful when creating technical documentation or presentation materials.

How to introduce mermaid.js

To start using mermaid.js, you need to configure CSS and JavaScript. Below is the basic setup, which you can customize to suit your preferences.

CSS Setup

<style>
body {
  margin: 20px 10px;
  padding: 0;
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 2em;
  padding-bottom: 20px;
}
</style>

JavaScript Setup Using mermaid.js

* Load the mermaid.min.js file. Use mermaid.initialize({options}) to configure the initial settings. In this example, execution after page load is set to true.

<script src="mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

Example of Creating a Flowchart

Here’s a simple example of creating a flowchart. For instance, you can express the decision flow when choosing a computer processor.
Use the tag with “class=”mermaid”” to display a flowchart. Write the flowchart content inside the tag with “class=”mermaid””.

<h1>Display a Flowchart Using mermaid.js</h1>

<div class="mermaid">
flowchart TD
  Choose Computer Processor --> Portability
  Portability -->|Yes| Specs
  Portability -->|No| Budget
  Specs -->|High| R1[Core i7]
  Specs -->|Low| R2[Core i5]
  Budget -->|Enough| R3[Core i9]
  Budget -->|Limited| R4[Core i7]
</div>
<br>
<br>
<div class="mermaid">
flowchart LR
  Choose Computer Processor --> Portability
  Portability -->|Yes| Specs
  Portability -->|No| Budget
  Specs -->|High| R1[Core i7]
  Specs -->|Low| R2[Core i5]
  Budget -->|Enough| R3[Core i9]
  Budget -->|Limited| R4[Core i7]
</div>

mermaid.js is more than just a flowchart creation tool. For example, it can also be used to create project Gantt charts, sequence diagrams, class diagrams, and many other types of charts.

Demo Page to Display Flowcharts Using mermaid.js

Demo page to display flowcharts using mermaid.js

Source: Flowcharts – Basic Syntax

Furthermore, by utilizing mermaid.js, your documentation or website becomes more interactive and appealing. Visualizing technical content enhances understanding.

Flowcharts – Basic Syntax

Conclusion

mermaid.js is a powerful tool that makes it easy to beautifully present complex information. I hope this article helps you in your project or presentation creation.

　
* Please use this content at your own risk if reused.
Do not reuse the Google Analytics tag inside the <head> tag of the demo page.

Flowcharts mermaid.js
RELATED POST