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") ```