Talk:Mermaid (software)

Mermaid.js is an open-source JavaScript library that renders diagrams from plain-text descriptions written in a Markdown-like domain-specific language (DSL).[1] It is commonly used in documentation and developer workflows where diagrams are stored, versioned, and reviewed as text alongside source code. Several platforms, including Github, render Mermaid inside Markdown.[2][3] History Mermaid.js was created in 2014 by Swedish software architect Knut Sveidqvist to keep diagrams aligned with software documentation. Sveidqvist stated that the idea emerged after losing a Microsoft Visio file, which led him to pursue a text-based, Markdown-centric approach. The project name was inspired by The Little Mermaid, which his children were watching at the time.[1][4][5][10] The project’s goal is to describe diagrams in plain text kept in version control, helping documentation keep pace with development and addressing “doc-rot.”[1] Publication The Official Guide to Mermaid.js (Packt, 2021)[12][13] by Knut Sveidqvist and Ashish Jain provides an introduction to Mermaid syntax and usage, covering diagram types such as flowcharts, sequence, class, state, ER, and Gantt diagrams, as well as theming and documentation workflows. Open core company In 2022, Sveidqvist co-founded Mermaid Chart Inc. (referred to as Mermaid) which offers hosted editing tools and enterprise features distinct from the open-source library. The company’s hosted and enterprise offerings are proprietary open-core extensions.[4][10] The commercial products focus on text-to-diagram workflows, facilitating versioning, automation, and code reviews.[14][15] The company announced a US$7.5 million seed round in March 2024. Reported investors included Open Core Ventures, Microsoft’s M12, and funds affiliated with Sequoia Capital.[5][10][16][17][18] Development The project is developed under both open-source and commercial models. The core functionality remains open-source under the MIT License.[11] Open-source tools: Mermaid diagrams can be authored and previewed without local installation using the open-source Mermaid Live Editor. The open-source Mermaid Live Editor provides a web preview and export interface.[19][25] Commercial tools: Mermaid provides a visual editor and AI-assisted features (such as text-to-diagram and file-assisted diagramming). These are a part of the Mermaid product and are distinct from the open-source Mermaid library.[6][20] Features Diagram Types Mermaid defines multiple diagram classes expressed as plain text (for example, flowcharts, sequence, class, state, and entity-relationship diagrams). Additional types have been added over time; the v11 documentation lists user-journey, Gantt, mindmap, timeline, and others.[6][7] Diagrams can be rendered client-side in the browser or generated via CLI and CI/CD workflows.[7][8] Syntax Mermaid diagrams are authored as plain text in fenced code blocks using a concise domain-specific language.[1][9] For example: Flowchart (example): flowchart TD  A[Text description] --> B[Mermaid code]  B --> C[Rendered diagram]  C --> D[Review / version] Usage Typical use of Mermaid involves writing diagrams in plain-text Mermaid syntax, rendering them locally or on supported platforms, storing the source with documentation or code, and automating updates in CI/CD pipelines. A text-first workflow commonly includes: Author the diagram as a short text block in Mermaid syntax. [7] Render locally or on platforms that support Mermaid (for example, GitHub renders Mermaid in Markdown in issues, discussions, pull requests, wikis, and files).[2] Store and review the diagram source with related documentation or code so changes can be versioned and reviewed like other text (commonly on Git hosts).[8] Automate generation or updates in CI/CD as part of documentation or build pipelines.[8][21][22] Use with AI systems where available: editor/IDE extensions and assistant features can draft Mermaid text from natural language for subsequent human editing.[23][24] Integrations Major developer platforms document built-in Mermaid rendering, including GitHub [2][3][33], GitLab[36][37][38],  and Azure DevOps wikis.[31][32] Other software forges and ALM tools (such as Gitea and Tuleap) document support in their Markdown or wiki components.[34][35] Editors and IDEs Mermaid can be authored or previewed in a number of editors through extensions or built-in support. Examples include Visual Studio Code[39][40][41], JetBrains IDEs[42], Notion[43], Obsidian[44], Joplin[45], and Quarto[46]. Several AI-assisted development tools can generate or validate Mermaid syntax, typically via editor extensions or chat-based assistants; for example, GitHub Copilot Chat[51][52] documents Mermaid diagram generation, and editors also expose Mermaid through chat participants or Model Context Protocol integrations[54]. Work management and productivity software Diagram creation and embedding are available through apps or add-ons for Atlassian Confluence[47] and Jira[48], Microsoft 365[50][51] (PowerPoint and Word), and Google Docs[49]. Additional editor and static-site integrations are listed in the project’s integrations page and vendor documentation.[30] Comparison Text-first vs. visual editors Mermaid uses a text-based DSL and renders from source text, which can be versioned and reviewed like code. CLI and API support automation and CI/CD.[8][11] diagrams.net (previously draw.io) is primarily a graphical editor (web/desktop) with diagram files stored as XML and broad app integrations (e.g., Atlassian).[26] PlantUML is another text-based system for diagram specification; it provides a different syntax and tooling approach.[27] Graphviz focuses on graph layouts (e.g., DOT language) and is widely used for pipelines and graph structures.[28] This section summarizes different diagramming approaches without implying preference. Reception Mermaid and its related tools have been discussed in developer media, particularly regarding “diagrams-as-code” workflows and platform integrations.[3][4][21][23] In 2019, Mermaid received the JavaScript Open Source Award for “The Most Exciting Use of Technology.”[29] 

================================================================

The proposal transforms the article from a ~250-word stub into a ~1,100-word structured article with 8 main sections. Key changes include:

• Separating open-source library (Mermaid.js) from commercial company (Mermaid Chart Inc.)
• Adding encyclopedic sections: History, Publication, Comparison
• Restructuring content with proper subsections
• Expanding integration coverage
• Adding code example
• Increasing citations from 18 to 54

================================================================

UNIFIED DIFF: Current Wikipedia Article vs. Proposed Changes

--- current_article

+++ proposed_article

::@@ LEAD @@
::-Mermaid is an open-source JavaScript-based diagramming and charting tool that 
::-generates diagrams from text-based descriptions.[1] Created by Knut Sveidqvist 
::-in 2014, the project originated from a need to simplify diagram creation in 
::-documentation workflows after experiencing issues with proprietary software 
::-file formats.[2][3]
::+Mermaid.js is an open-source JavaScript library that renders diagrams from 
::+plain-text descriptions written in a Markdown-like domain-specific language 
::+(DSL).[1] It is commonly used in documentation and developer workflows where 
::+diagrams are stored, versioned, and reviewed as text alongside source code. 
::+Several platforms, including Github, render Mermaid inside Markdown.[2][3]
::@@ NEW SECTION: History @@
::+== History ==
::+Mermaid.js was created in 2014 by Swedish software architect Knut Sveidqvist 
::+to keep diagrams aligned with software documentation. Sveidqvist stated that 
::+the idea emerged after losing a Microsoft Visio file, which led him to pursue 
::+a text-based, Markdown-centric approach. The project name was inspired by The 
::+Little Mermaid, which his children were watching at the time.[1][4][5][10]
::+
::+The project's goal is to describe diagrams in plain text kept in version 
::+control, helping documentation keep pace with development and addressing 
::+"doc-rot."[1]
::@@ NEW SECTION: Publication @@
::+== Publication ==
::+The Official Guide to Mermaid.js (Packt, 2021)[12][13] by Knut Sveidqvist and 
::+Ashish Jain provides an introduction to Mermaid syntax and usage, covering 
::+diagram types such as flowcharts, sequence, class, state, ER, and Gantt 
::+diagrams, as well as theming and documentation workflows.
::@@ NEW SECTION: Open core company @@
::+== Open core company ==
::+In 2022, Sveidqvist co-founded Mermaid Chart Inc. (referred to as Mermaid) 
::+which offers hosted editing tools and enterprise features distinct from the 
::+open-source library. The company's hosted and enterprise offerings are 
::+proprietary open-core extensions.[4][10]
::+
::+The commercial products focus on text-to-diagram workflows, facilitating 
::+versioning, automation, and code reviews.[14][15]
::+
::+The company announced a US$7.5 million seed round in March 2024. Reported 
::+investors included Open Core Ventures, Microsoft's M12, and funds affiliated 
::+with Sequoia Capital.[5][10][16][17][18]
::@@ RESTRUCTURED SECTION: Development @@
::-As of 2024, the project is developed under both open-source and commercial 
::-models. The core functionality remains open-source under the MIT License, 
::-while a commercial offering called Mermaid Chart provides additional features 
::-and hosted services.[2]
::+== Development ==
::+The project is developed under both open-source and commercial models. The 
::+core functionality remains open-source under the MIT License.[11]
::+
::+Open-source tools: Mermaid diagrams can be authored and previewed without 
::+local installation using the open-source Mermaid Live Editor. The open-source 
::+Mermaid Live Editor provides a web preview and export interface.[19][25]
::+
::+Commercial tools: Mermaid provides a visual editor and AI-assisted features 
::+(such as text-to-diagram and file-assisted diagramming). These are a part of 
::+the Mermaid product and are distinct from the open-source Mermaid library.[6][20]
::@@ NEW SECTION: Features (with subsections) @@
::+== Features ==
::+
::+=== Diagram Types ===
::+Mermaid defines multiple diagram classes expressed as plain text (for example, 
::+flowcharts, sequence, class, state, and entity-relationship diagrams). 
::+Additional types have been added over time; the v11 documentation lists 
::+user-journey, Gantt, mindmap, timeline, and others.[6][7]
::+
::+Diagrams can be rendered client-side in the browser or generated via CLI and 
::+CI/CD workflows.[7][8]
::+
::+=== Syntax ===
::+Mermaid diagrams are authored as plain text in fenced code blocks using a 
::+concise domain-specific language.[1][9]
::+
::+For example:
::+
::+Flowchart (example):
::+
::+flowchart TD
::+ A[Text description] --> B[Mermaid code]
::+ B --> C[Rendered diagram]
::+ C --> D[Review / version]
::+
::+
::+=== Usage ===
::+Typical use of Mermaid involves writing diagrams in plain-text Mermaid syntax, 
::+rendering them locally or on supported platforms, storing the source with 
::+documentation or code, and automating updates in CI/CD pipelines.
::+
::+A text-first workflow commonly includes:
::+
::+Author the diagram as a short text block in Mermaid syntax.[7]
::+
::+Render locally or on platforms that support Mermaid (for example, GitHub 
::+renders Mermaid in Markdown in issues, discussions, pull requests, wikis, 
::+and files).[2]
::+
::+Store and review the diagram source with related documentation or code so 
::+changes can be versioned and reviewed like other text (commonly on Git 
::+hosts).[8]
::+
::+Automate generation or updates in CI/CD as part of documentation or build 
::+pipelines.[8][21][22]
::+
::+Use with AI systems where available: editor/IDE extensions and assistant 
::+features can draft Mermaid text from natural language for subsequent human 
::+editing.[23][24]
::@@ EXPANDED SECTION: Integrations (with subsections) @@
::+== Integrations ==
::+Major developer platforms document built-in Mermaid rendering, including 
::+GitHub[2][3][33], GitLab[36][37][38], and Azure DevOps wikis.[31][32]
::+
::+Other software forges and ALM tools (such as Gitea and Tuleap) document 
::+support in their Markdown or wiki components.[34][35]
::+
::+=== Editors and IDEs ===
::+Mermaid can be authored or previewed in a number of editors through extensions 
::+or built-in support. Examples include Visual Studio Code[39][40][41], 
::+JetBrains IDEs[42], Notion[43], Obsidian[44], Joplin[45], and Quarto[46].
::+
::+Several AI-assisted development tools can generate or validate Mermaid syntax, 
::+typically via editor extensions or chat-based assistants; for example, GitHub 
::+Copilot Chat[51][52] documents Mermaid diagram generation, and editors also 
::+expose Mermaid through chat participants or Model Context Protocol 
::+integrations[54].
::+
::+=== Work management and productivity software ===
::+Diagram creation and embedding are available through apps or add-ons for 
::+Atlassian Confluence[47] and Jira[48], Microsoft 365[50][51] (PowerPoint and 
::+Word), and Google Docs[49].
::+
::+Additional editor and static-site integrations are listed in the project's 
::+integrations page and vendor documentation.[30]
::@@ NEW SECTION: Comparison @@
::+== Comparison ==
::+
::+=== Text-first vs. visual editors ===
::+Mermaid uses a text-based DSL and renders from source text, which can be 
::+versioned and reviewed like code. CLI and API support automation and CI/CD.[8][11]
::+
::+diagrams.net (previously draw.io) is primarily a graphical editor (web/desktop) 
::+with diagram files stored as XML and broad app integrations (e.g., Atlassian).[26]
::+
::+PlantUML is another text-based system for diagram specification; it provides a 
::+different syntax and tooling approach.[27]
::+
::+Graphviz focuses on graph layouts (e.g., DOT language) and is widely used for 
::+pipelines and graph structures.[28]
::+
::+This section summarizes different diagramming approaches without implying 
::+preference.
::@@ EXPANDED SECTION: Reception @@
::-The project received the JS Open Source Award in 2019 for "The Most Exciting 
::-Use of Technology."[18]
::+== Reception ==
::+Mermaid and its related tools have been discussed in developer media, 
::+particularly regarding "diagrams-as-code" workflows and platform 
::+integrations.[3][4][21][23]
::+
::+In 2019, Mermaid received the JavaScript Open Source Award for "The Most 
::+Exciting Use of Technology."[29]
::

================================================================

Lede:

Mermaid.js is an open-source JavaScript library that renders diagrams from plain-text descriptions written in a Markdown-like domain-specific language (DSL).[1] It is commonly used in documentation and developer workflows where diagrams are stored, versioned, and reviewed as text alongside source code. Several platforms, including Github, render Mermaid inside Markdown.[2][3]

================================================================

History

Mermaid.js was created in 2014 by Swedish software architect Knut Sveidqvist to keep diagrams aligned with software documentation. Sveidqvist stated that the idea emerged after losing a Microsoft Visio file, which led him to pursue a text-based, Markdown-centric approach. The project name was inspired by The Little Mermaid, which his children were watching at the time.[1][4][5][10]

The project’s goal is to describe diagrams in plain text kept in version control, helping documentation keep pace with development and addressing “doc-rot.”[1]

Publication

The Official Guide to Mermaid.js (Packt, 2021)[12][13] by Knut Sveidqvist and Ashish Jain provides an introduction to Mermaid syntax and usage, covering diagram types such as flowcharts, sequence, class, state, ER, and Gantt diagrams, as well as theming and documentation workflows.

Open core company

In 2022, Sveidqvist co-founded Mermaid Chart Inc. (referred to as Mermaid) which offers hosted editing tools and enterprise features distinct from the open-source library. The company’s hosted and enterprise offerings are proprietary open-core extensions.[4][10] The commercial products focus on text-to-diagram workflows, facilitating versioning, automation, and code reviews.[14][15]

The company announced a US$7.5 million seed round in March 2024. Reported investors included Open Core Ventures, Microsoft’s M12, and funds affiliated with Sequoia Capital.[5][10][16][17][18]

Development

The project is developed under both open-source and commercial models. The core functionality remains open-source under the MIT License.[11]

• Open-source tools: Mermaid diagrams can be authored and previewed without local installation using the open-source Mermaid Live Editor. The open-source Mermaid Live Editor provides a web preview and export interface.[19][25]
• Commercial tools: Mermaid provides a visual editor and AI-assisted features (such as text-to-diagram and file-assisted diagramming). These are a part of the Mermaid product and are distinct from the open-source Mermaid library.[6][20]

================================================================

Features

Diagram Types

Mermaid defines multiple diagram classes expressed as plain text (for example, flowcharts, sequence, class, state, and entity-relationship diagrams). Additional types have been added over time; the v11 documentation lists user-journey, Gantt, mindmap, timeline, and others.[6][7] Diagrams can be rendered client-side in the browser or generated via CLI and CI/CD workflows.[7][8]

Syntax

Mermaid diagrams are authored as plain text in fenced code blocks using a concise domain-specific language.[1][9] For example:

Flowchart (example):

flowchart TD

A[Text description] --> B[Mermaid code]

B --> C[Rendered diagram]

C --> D[Review / version]

Usage

Typical use of Mermaid involves writing diagrams in plain-text Mermaid syntax, rendering them locally or on supported platforms, storing the source with documentation or code, and automating updates in CI/CD pipelines.

A text-first workflow commonly includes:

1. Author the diagram as a short text block in Mermaid syntax. [7]
2. Render locally or on platforms that support Mermaid (for example, GitHub renders Mermaid in Markdown in issues, discussions, pull requests, wikis, and files).[2]
3. Store and review the diagram source with related documentation or code so changes can be versioned and reviewed like other text (commonly on Git hosts).[8]
4. Automate generation or updates in CI/CD as part of documentation or build pipelines.[8][21][22]
5. Use with AI systems where available: editor/IDE extensions and assistant features can draft Mermaid text from natural language for subsequent human editing.[23][24]

================================================================

Integrations

Major developer platforms document built-in Mermaid rendering, including GitHub [2][3][33], GitLab[36][37][38], and Azure DevOps wikis.[31][32] Other software forges and ALM tools (such as Gitea and Tuleap) document support in their Markdown or wiki components.[34][35]

Editors and IDEs

Mermaid can be authored or previewed in a number of editors through extensions or built-in support. Examples include Visual Studio Code[39][40][41], JetBrains IDEs[42], Notion[43], Obsidian[44], Joplin[45], and Quarto[46].

Several AI-assisted development tools can generate or validate Mermaid syntax, typically via editor extensions or chat-based assistants; for example, GitHub Copilot Chat[51][52] documents Mermaid diagram generation, and editors also expose Mermaid through chat participants or Model Context Protocol integrations[54].

Work management and productivity software

Diagram creation and embedding are available through apps or add-ons for Atlassian Confluence[47] and Jira[48], Microsoft 365[50][51] (PowerPoint and Word), and Google Docs[49].

Additional editor and static-site integrations are listed in the project’s integrations page and vendor documentation.[30]

================================================================

Comparison

Text-first vs. visual editors

Mermaid uses a text-based DSL and renders from source text, which can be versioned and reviewed like code. CLI and API support automation and CI/CD.[8][11]

diagrams.net (previously draw.io) is primarily a graphical editor (web/desktop) with diagram files stored as XML and broad app integrations (e.g., Atlassian).[26]

PlantUML is another text-based system for diagram specification; it provides a different syntax and tooling approach.[27]

Graphviz focuses on graph layouts (e.g., DOT language) and is widely used for pipelines and graph structures.[28]

"This section summarizes different diagramming approaches without implying preference."

================================================================

Reception

Mermaid and its related tools have been discussed in developer media, particularly regarding “diagrams-as-code” workflows and platform integrations.[3][4][21][23]

In 2019, Mermaid received the JavaScript Open Source Award for “The Most Exciting Use of Technology.”[29]