Easily create and render detailed diagrams and charts with the Mermaid Live Editor. 🧩 Integrations available! Use Mermaid with your favorite applications, check out the integrations list.

2. Using the Mermaid Chart Editor Available at the Mermaid Chart website. Mermaid Chart is a web-based diagram editor that allows you to create and edit diagrams in your browser. It is built by the team behind Mermaid. Features include: AI diagramming; Collaboration & multi-user editing; Storage; and more

Mermaid introduces 30 new shapes to enhance the flexibility and precision of flowchart creation. These new shapes provide more options to represent processes, decisions, events, data storage visually, and other elements within your flowcharts, improving clarity and semantic meaning.

Mermaid's syntax is used to create diagrams. You'll find that it is not too tricky and can be learned in a day. The next sections dive deep into the syntax of each diagram type.

This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications. If you wish to learn how to support mermaid on your webpage, read the Beginner's Guide .

Using the mermaid object It is possible to set some configuration via the mermaid object. The two parameters that are supported using this approach are: mermaid.startOnLoad; mermaid.htmlLabels

We're excited about the growth of the Mermaid community, and the number of plugins and integrations that have been created by the community. See the list below of community plugins and integrations created with Mermaid.

Mermaid Chart brings resources to the open source development of Mermaid and makes it possible to work with Mermaid professionally. Features Editor - A web based editor for creating and editing Mermaid diagrams. Mermaid AI - Use our embedded AI Chat to generate diagrams from natural language descriptions.

Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into docs.

This is a list of publicly available Tutorials for using Mermaid.JS and is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.