Misplaced Pages

Mermaid (software): Difference between revisions

Article snapshot taken from[REDACTED] with creative commons attribution-sharealike license. Give it a read and then ask your questions in the chat. We can research this topic together.
Browse history interactivelyContent deleted Content addedVisualWikitext
Revision as of 02:51, 14 January 2025 editAjaverett0 (talk | contribs)119 edits ←Created page with '{{Short description|Open-source JavaScript-based diagramming and charting tool}} {{Infobox software | name = Mermaid | title = | logo = | logo_size = | logo_alt = | screenshot = | caption = | screenshot_size = | screenshot_alt = | collapsible = | developer = Knut Sveidqvist and contributors | released...'  Latest revision as of 06:36, 23 January 2025 edit undoCitation bot (talk | contribs)Bots5,461,362 edits Add: date, website. | Use this bot. Report bugs. | Suggested by Dominic3203 | Linked from User:AlexNewArtBot/BadSearchResult | #UCB_webform_linked 30/115 
(12 intermediate revisions by 4 users not shown)
Line 3: Line 3:
{{Infobox software {{Infobox software
| name = Mermaid | name = Mermaid
| title =
| logo =
| logo_size =
| logo_alt =
| screenshot =
| caption =
| screenshot_size =
| screenshot_alt =
| collapsible =
| developer = Knut Sveidqvist and contributors | developer = Knut Sveidqvist and contributors
| released = 2014 | released = 2014
Line 22: Line 13:
}} }}


'''Mermaid''' is an open-source JavaScript-based diagramming and charting tool that generates diagrams from text-based descriptions.<ref name="mermaid-github">{{cite web |url=https://github.com/mermaid-js/mermaid |title=Mermaid GitHub Repository|website=] }}</ref> 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.<ref name="techcrunch">{{cite web |url=https://techcrunch.com/2024/03/20/mermaid-chart-a-markdown-like-tool-for-creating-diagrams-raises-5-5m/ |title=Mermaid Chart, a Markdown-like tool for creating diagrams, raises $7.5M |date=March 20, 2024 |author=Frederic Lardinois |website=TechCrunch}}</ref><ref>{{cite web |url=https://pulse2.com/mermaid-chart-knut-sveidqvist-profile/ |title=Mermaid Chart: How This Company Creates Complex Diagrams From Markdown-Style Code |author=Amit Chowdhry |website=Pulse 2.0 |date=Aug 26, 2024}}</ref>
'''Mermaid''' is an open-source JavaScript-based diagramming and charting tool that generates diagrams from plain text descriptions.<ref name="mermaid-github">{{cite web
|url=https://github.com/mermaid-js/mermaid
|title=Mermaid GitHub Repository
}}</ref> It was created by Knut Sveidqvist in 2014 to simplify the process of adding visualizations to documentation.<ref>{{cite web
|url=https://notes.nicfab.eu/en/posts/mermaid/
|title="Mermaid" – Notes by NicFab
}}</ref>


==Overview==
Mermaid can produce flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, and entity-relationship diagrams using a syntax similar to Markdown.<ref>{{cite web
|url=https://mermaid.js.org/intro/getting-started.html
|title=Mermaid Official Documentation – Getting Started
}}</ref> This text-based approach is intended to make diagram creation more accessible within documentation workflows.


==Features== ==Features==
Mermaid allows users to create various types of diagrams using a Markdown-like syntax, including:<ref name="techtarget">{{cite web |url=https://www.techtarget.com/searchapparchitecture/tip/A-review-of-top-software-architecture-visualization-tools |title=A review of software architecture visualization tools |date=December 12, 2023 |author=Kerry Doyle |website=TechTarget}}</ref>
* '''Text-Based Syntax''': Allows users to define diagrams in a format resembling Markdown.
* Flowcharts
* '''Native Support and Integrations''':
* Sequence diagrams
** '''GitHub''': Renders Mermaid diagrams directly in Markdown files.<ref>{{cite web |url=https://github.blog/developer-skills/github/include-diagrams-markdown-files-mermaid/ |title=Include diagrams in Markdown files with Mermaid on GitHub}}</ref>
* Class diagrams
⚫ ** '''Notion''': Offers built-in options for creating Mermaid diagrams.<ref>{{cite web |url=https://www.notion.com/releases/2021-12-23 |title=Notion – Release Notes 2021-12-23}}</ref>
* State diagrams
⚫ ** '''Azure DevOps''': Provides Markdown support for Mermaid in project wikis.<ref>{{cite web |url=https://learn.microsoft.com/en-us/azure/devops/project/markdown-guidance?view=azure-devops |title=Markdown Guidance for Wikis – Azure DevOps}}</ref>
* Gantt charts
⚫ ** '''Obsidian''': Added native Mermaid support in version 0.7.6.<ref>{{cite web |url=https://obsidian.md/changelog/2020-07-02-desktop-v0.7.6/ |title=Obsidian Changelog 0.7.6}}</ref>
* Entity-relationship diagrams
⚫ ** '''Quarto''': Integrates diagram authoring with Mermaid.<ref>{{cite web |url=https://quarto.org/docs/authoring/diagrams.html |title=Quarto – Diagram Authoring}}</ref>
** '''Observable''': Enables Mermaid-based diagramming in interactive notebooks.<ref>{{cite web |url=https://observablehq.com/@observablehq/mermaid |title=ObservableHQ: Mermaid}}</ref>
** '''Atlassian Products''': Supports embedding diagrams in Confluence and Jira.
* '''Customization''': Users can style diagrams with custom CSS.
* '''Live Editing''': The Mermaid Live Editor provides an interface for real-time diagram previews.<ref>{{cite web
|url=https://mermaid.live/
|title=Mermaid Live Editor
}}</ref>


The software provides both text-based and visual editing interfaces, allowing users to switch between the two modes.<ref name="techcrunch" /> Users can create diagrams through the Mermaid Live Editor, a web-based tool that provides real-time preview capabilities without requiring local installation.<ref>{{cite web |url=https://mermaid.live |title=Mermaid Live Editor}}</ref>
==Adoption and Community==

As of January 2025, the Mermaid repository on GitHub shows over 74,000 stars and 6,800 forks, indicating ongoing development and user engagement.<ref name="mermaid-github" /> Various platforms support Mermaid, allowing diagrams to be rendered directly in documentation and collaboration environments.
==Integration==
Mermaid is supported natively by several platforms and services:<ref>{{cite web |url=https://lifehacker.com/tech/mermaid-creates-diagrams-and-flowcharts-with-plaintext |title=Use Mermaid to Create Charts and Diagrams Without Image Editing Tools |date=November 13, 2024 |author=Justin Pot |website=LifeHacker}}</ref><ref>{{cite web |url=https://mermaid.js.org/ecosystem/integrations-community.html|title=Mermaid Integrations}}</ref>
⚫ * ] (in project wikis)<ref>{{cite web |url=https://learn.microsoft.com/en-us/azure/devops/project/markdown-guidance?view=azure-devops |title=Markdown Guidance for Wikis – Azure DevOps|date=6 September 2024 }}</ref>
* ] (in Markdown files)<ref>{{cite web |url=https://github.blog/developer-skills/github/include-diagrams-markdown-files-mermaid/ |title=Include diagrams in Markdown files with Mermaid on GitHub|date=14 February 2022 }}</ref><ref name="iprogrammer">{{cite web |url=https://www.i-programmer.info/news/90-tools/15217-github-supports-mermaid-for-creating-diagrams.html |title=GitHub Supports Mermaid For Creating Diagrams |date=February 15, 2022 |author=Ian Elliot |website=I Programmer}}</ref>
* ]<ref>{{cite web |url=https://docs.gitea.com/installation/comparison|title=Gitea - Compared to other Git hosting}}</ref>
* ]<ref>{{cite web |url=https://handbook.gitlab.com/handbook/tools-and-tips/mermaid/|title=Gitlab Handbook}}</ref>
* ]<ref>{{cite web |url=https://joplinapp.org/help/apps/markdown/|title=Joplin - Markdown Guide}}</ref>
* ]<ref>{{cite web |url=https://www.tuleap.org/resources/release-notes/tuleap-12-7|title=Tuleap 12.7}}</ref>
⚫ * ]<ref>{{cite web |url=https://www.notion.com/releases/2021-12-23 |title=Notion – Release Notes 2021-12-23}}</ref>
⚫ * ]<ref>{{cite web |url=https://obsidian.md/changelog/2020-07-02-desktop-v0.7.6/ |title=Obsidian Changelog 0.7.6}}</ref>
⚫ * Quarto <ref>{{cite web |url=https://quarto.org/docs/authoring/diagrams.html |title=Quarto – Diagram Authoring}}</ref>

==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.<ref name="techcrunch" /> The open-source project has garnered significant community engagement, with over 74,000 GitHub stars and 6,800 forks as of early 2025.<ref name="mermaid-github" />

In March 2024, the commercial entity raised $7.5 million in seed funding from investors including Open Core Ventures, Sequoia, and Microsoft's M12 fund.<ref name="techcrunch" />


==Recognition== ==Recognition==
In 2019, Mermaid was awarded the JS Open Source Award in the category of "The Most Exciting Use of Technology." <ref>{{cite web The project received the JS Open Source Award in 2019 for "The Most Exciting Use of Technology."<ref>{{cite web |url=https://notes.nicfab.eu/en/posts/mermaid/ |title="Mermaid" – Notes by NicFab|date=22 March 2022 }}</ref>
|url=https://notes.nicfab.eu/en/posts/mermaid/
|title="Mermaid" – Notes by NicFab
}}</ref>


==See also== ==See also==
* ] * ]
* ] * ]
* ] * ]
* ] * ]

==External links==
* {{URL|https://mermaid.js.org|Mermaid Official Website}}
* {{URL|https://github.com/mermaid-js/mermaid|Mermaid GitHub Repository}}


==References== ==References==
{{reflist}}
<references />
]

] ]
] ]
] ]
] ]
]
]

Latest revision as of 06:36, 23 January 2025

Open-source JavaScript-based diagramming and charting tool
Mermaid
Developer(s)Knut Sveidqvist and contributors
Initial release2014
Repositorygithub.com/mermaid-js/mermaid
Written inJavaScript
Operating systemCross-platform
TypeDiagramming and charting
LicenseMIT
Websitemermaid.js.org

Mermaid is an open-source JavaScript-based diagramming and charting tool that generates diagrams from text-based descriptions. 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.


Features

Mermaid allows users to create various types of diagrams using a Markdown-like syntax, including:

  • Flowcharts
  • Sequence diagrams
  • Class diagrams
  • State diagrams
  • Gantt charts
  • Entity-relationship diagrams

The software provides both text-based and visual editing interfaces, allowing users to switch between the two modes. Users can create diagrams through the Mermaid Live Editor, a web-based tool that provides real-time preview capabilities without requiring local installation.

Integration

Mermaid is supported natively by several platforms and services:

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. The open-source project has garnered significant community engagement, with over 74,000 GitHub stars and 6,800 forks as of early 2025.

In March 2024, the commercial entity raised $7.5 million in seed funding from investors including Open Core Ventures, Sequoia, and Microsoft's M12 fund.

Recognition

The project received the JS Open Source Award in 2019 for "The Most Exciting Use of Technology."

See also

References

  1. ^ "Mermaid GitHub Repository". GitHub.
  2. ^ Frederic Lardinois (March 20, 2024). "Mermaid Chart, a Markdown-like tool for creating diagrams, raises $7.5M". TechCrunch.
  3. Amit Chowdhry (Aug 26, 2024). "Mermaid Chart: How This Company Creates Complex Diagrams From Markdown-Style Code". Pulse 2.0.
  4. Kerry Doyle (December 12, 2023). "A review of software architecture visualization tools". TechTarget.
  5. "Mermaid Live Editor".
  6. Justin Pot (November 13, 2024). "Use Mermaid to Create Charts and Diagrams Without Image Editing Tools". LifeHacker.
  7. "Mermaid Integrations".
  8. "Markdown Guidance for Wikis – Azure DevOps". 6 September 2024.
  9. "Include diagrams in Markdown files with Mermaid on GitHub". 14 February 2022.
  10. Ian Elliot (February 15, 2022). "GitHub Supports Mermaid For Creating Diagrams". I Programmer.
  11. "Gitea - Compared to other Git hosting".
  12. "Gitlab Handbook".
  13. "Joplin - Markdown Guide".
  14. "Tuleap 12.7".
  15. "Notion – Release Notes 2021-12-23".
  16. "Obsidian Changelog 0.7.6".
  17. "Quarto – Diagram Authoring".
  18. ""Mermaid" – Notes by NicFab". 22 March 2022.
Categories:
Mermaid (software): Difference between revisions Add topic