Mermaid is an open-source, JavaScript-based tool that allows you to create various types of charts and diagrams (flowcharts, Gantt charts, class diagrams, etc.) using simple text syntax. This means that instead of relying on complex drag-and-drop tools, you simply write "code" to describe the diagram you want to create.


General Information

Reason for Creation

Mermaid was created to solve a major problem in software development and documentation: the cumbersome and difficult process of creating and maintaining diagrams, especially within a version control environment.

Traditional diagramming tools often store diagrams as binary files, which leads to issues like:

  • Difficult Version Control: It's hard to compare differences between diagram versions or merge changes.
  • Time-Consuming: Manually drawing or using a drag-and-drop interface can take a lot of time, particularly for complex diagrams.
  • Lack of Flexibility: A small change in a diagram might require redrawing a large portion or even the whole thing.

Mermaid was born as a solution to generate "code" for diagrams (Diagrams as Code), making them easy to manage, version control, and integrate into a developer's workflow.

Development Process

  1. 2015 - Inception and Initial Release: Knut Sveidqvist saw the need for an easy-to-use, text-based diagramming tool. He developed the first version of Mermaid and released it as an open-source project. Initially, it focused on basic diagrams like flowcharts and sequence diagrams.
  2. Community Adoption and Growth: Mermaid was quickly embraced by the developer community for its convenience and seamless integration with programming and documentation tools (like GitHub, GitLab, VS Code, Notion, Obsidian, etc.). This community interest fueled the project's development.
  3. Expanded Diagram Types: Over time, Mermaid has continuously added support for new types of diagrams, including Gantt charts, class diagrams, state diagrams, user journey diagrams, pie charts, and many others. This made Mermaid a more versatile tool.
  4. Widespread Integration: One of the most critical factors in Mermaid's success is its ability to integrate with various platforms and applications. Many text editors, documentation platforms, and version control systems now offer built-in support or plugins for rendering Mermaid diagrams.
  5. Continuous Development: Currently, Mermaid is still being actively developed by a large open-source community. Developers are constantly improving performance, adding new features, and fixing bugs to enhance the user experience.

With its convenience, high integration capabilities, and strong community, Mermaid has become an essential tool for many developers, engineers, and technical writers around the world.



Code:

---
config:
  theme: neutral
  look: neo
  layout: dagre
title: Basic flowchart with Mermaid
---
flowchart TD
 subgraph s1["Flowchart"]
        nDatabase[("Database/Stored Data")]
        nConnector1a(("C1"))
        nConnector1b(("C1"))
        nConnector2(((C2)))
        nSubroutine[["Subroutine/Predifined Process"]]
        nRoundEdges("Node with round edges")
        nDecision{"Decision"}
        nAction["Process/ Action"]
        nTerminal(["Stadium Node: Start/End/Terminal"])
        nInputOutput[/Input/Ouput/]
        nManualInput[\Manual Input/]
        nManualOperation[/Manual Operation\]
        nDecision2{Decision}
        nInitialization{{Initialization/Preparation }}
  end
 subgraph s2["Demo"]
        A([Start]) --> B{{"Initialize Sum = 0, Count = 1"}}
        B --> C[/Read Number/]
        C --> D{Is Number valid?}
        D -- Yes --> E[Add Number to Sum]
        E --> F{{"Increment Count"}}
        F --> G{All numbers processed?}
        D -- No --> G
        G -- No --> C
        G -- Yes --> H[Calculate Average = Sum / Count]
        H --> I([End])
  end
    nTerminal --> nAction
    nAction --> nDecision
    nDecision --> nRoundEdges
    nDecision --> nInputOutput
    nRoundEdges --> nSubroutine
    nSubroutine --> nConnector1a

    nConnector1b --> nDatabase
    nInputOutput --> nDecision2
    nDecision2 --> nManualInput & nManualOperation

    nConnector2 --> nInitialization