# Mermaid Mermaid is a [[JavaScript]]-based diagramming and charting tool that uses Markdown-inspired text definitions to create and modify diagrams dynamically. It renders text into visual diagrams, making it easy to generate documentation that stays in sync with code. Mermaid won the JS Open Source Awards (2019) in the category "The most exciting use of technology." ## Purpose The main purpose of Mermaid is to help documentation catch up with development. It addresses the "Doc-Rot" problem: diagramming and documentation costs precious developer time and gets outdated quickly, but not having diagrams or docs ruins productivity and hurts organizational learning. ## Supported Diagram Types - **Flowcharts**: Process flows with various node shapes and directions - **Sequence Diagrams**: Interactions between actors over time - **Class Diagrams**: Object-oriented structure visualization - **State Diagrams**: State machines and transitions - **Entity Relationship Diagrams**: Database schemas - **Gantt Charts**: Project timelines - **Pie Charts**: Data distribution - **Git Graphs**: Branch and commit visualization - **User Journey**: User experience flows - **Mindmaps**: Hierarchical idea organization - **Timeline**: Chronological events ## Usage Example ```mermaid flowchart LR A[Start] --> B{Decision} B -->|Yes| C[Action] B -->|No| D[End] ``` ## Integrations Mermaid is widely supported across platforms: - **[[GitHub]]**: Native rendering in Markdown files - **[[Obsidian]]**: Built-in support for Mermaid diagrams - **GitLab**, **Notion**, **Confluence** - **VS Code** and other editors via extensions - **Documentation tools**: Docusaurus, VitePress, MkDocs ## Related - [[beautiful-mermaid]]: Enhanced rendering with themes and ASCII output ## References - Official Website: https://mermaid.js.org/ - Documentation: https://mermaid.js.org/intro/ - Source code: https://github.com/mermaid-js/mermaid - Live Editor: https://mermaid.live/ - Discord: https://discord.gg/sKeNQX4Wtj