Mermaid.js is a JavaScript library that allows you to easily create diagrams and flowcharts using simple text-based syntax. It provides an intuitive way to visualize complex information by converting your plain text diagrams into visually appealing and interactive diagrams. Please see [Mermaid.js Getting Started](https://mermaid.js.org/intro/getting-started.html)
# Experience Mermaid Interatively
[Mermaid.Live](http://mermaid.live)is a website dedicated to creating mermaid diagrams in an interactive fahsion.
Otherwise, just see a demo here:
```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
```mermaid
graph TB
subgraph Client
A[User Interface] --> B[Browser]
end
subgraph Web Server
B --> C[Reverse Proxy]
C --> D[Application Server]
end
subgraph Application
D --> E[Microservice 1]
D --> F[Microservice 2]
D --> G[Microservice 3]
end
subgraph Database
E --> H[(Database 1)]
F --> I[(Database 2)]
G --> J[(Database 3)]
end
H --- K[Storage]
I --- K
J --- K
```
```mermaid
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
```
One may also go to https://www.mermaidflow.app/ to draw diagrams in a web browser directly.
With Mermaid.js, you can create various types of diagrams, including flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, and more. The library supports a wide range of diagramming features like node styling, arrow directions, auto-numbering, subgraphs, and clustering.
One of the key advantages of Mermaid.js is its simplicity. You can write your diagram descriptions using a simple text-based syntax similar to Markdown or ASCII art. This makes it easy for developers and non-developers alike to quickly create and modify diagrams without the need for complex graphical editors.
Mermaid.js also provides powerful integration capabilities with other web technologies. It can be seamlessly integrated into HTML pages or Markdown documents with minimal setup. Additionally, it supports exporting diagrams as SVG or PNG images for use in other applications.
The library is open source and actively maintained on GitHub. It has a large community of contributors who continuously improve its functionality and add new features. Mermaid.js is licensed under the MIT license, allowing you to use it freely in both personal and commercial projects.
# A commercial competitor
[[GoJS]] is a commercial implementation of interactive diagramming functionalities in web browsers. It is worth taking a look.
# Conclusion
Overall, Mermaid.js is a versatile tool for creating professional-looking diagrams with ease. Its simplicity and flexibility make it a popular choice among developers for visualizing complex concepts or processes in an accessible manner.
![[Portable Graphics Format#PGF compare to Mermaid]]
# Gantt Chart Examples
```mermaid
gantt
title First 200 Years of U.S. History
dateFormat YYYY axisFormat %Y
section
Founding Era Declaration of Independence : milestone, 1776, 1d Revolutionary War : 1775, 1783 Articles of Confederation : 1781, 1789 U.S. Constitution Ratified : milestone, 1788, 1d Bill of Rights Ratified : milestone, 1791, 1d section Expansion and Growth Louisiana Purchase : milestone, 1803, 1d Lewis and Clark Expedition : 1804, 1806 War of 1812 : 1812, 1815 Missouri Compromise : milestone, 1820, 1d Trail of Tears : 1838, 1839 Mexican-American War : 1846, 1848 California Gold Rush : 1848, 1855 section Civil War and Reconstruction Civil War : 1861, 1865 Emancipation Proclamation : milestone, 1863, 1d Reconstruction Era : 1865, 1877 13th Amendment Ratified : milestone, 1865, 1d 14th Amendment Ratified : milestone, 1868, 1d 15th Amendment Ratified : milestone, 1870, 1d section Industrialization and Progress Transcontinental Railroad Completed : milestone, 1869, 1d Gilded Age : 1870, 1900 Spanish-American War : 1898, 1898 Wright Brothers' First Flight : milestone, 1903, 1d section World Wars and Modern Era World War I : 1917, 1918 Roaring Twenties : 1920, 1929 Great Depression : 1929, 1939 New Deal : 1933, 1939 World War II : 1941, 1945 Cold War Begins : milestone, 1947, 1d Korean War : 1950, 1953 Civil Rights Movement : 1954, 1968 Vietnam War : 1955, 1975 Apollo 11 Moon Landing : milestone, 1969, 1d Watergate Scandal : 1972, 1974 section Bicentennial U.S. Bicentennial : milestone, 1976, 1d
```
# References
```dataview
Table title as Title, authors as Authors
where contains(subject, "Mermaid")
```