FAQ

This FAQ applies to product manuals, official website pages, course quizzes, and live Q&A.

1. What is Mermaid?

Mermaid is a JavaScript-based diagramming tool that lets you create diagrams and visualizations using text. With a Markdown-like syntax, you can define and update diagrams dynamically. Mermaid helps documentation stay up to date with development, and even non-programmers can create detailed diagrams using the Mermaid Live Editor.

2. Which diagram types does Mermaid support?

Mermaid supports many types of diagrams, including:

Flowchart
Sequence Diagram
Gantt Chart
Class Diagram
Git Graph
Entity Relationship Diagram
User Journey Diagram
Quadrant Chart
XY Chart
Mind map and more

3. What are the key features of Mermaid?

Mermaid works perfectly with AI chatbots such as Claude and ChatGPT. These AI tools can quickly generate Mermaid code from natural language descriptions, so you don’t need to hand-write complex syntax. AI dramatically simplifies the creation process and improves productivity.

4. What is Mermaid Online?

Mermaid Online is a web tool designed to easily display and render Mermaid code generated by AI tools like Claude and ChatGPT. Simply paste the code into the online editor to instantly preview the visuals—no installation or environment setup required.

5. Which export formats does Mermaid Online support?

Mermaid Online can export diagrams as multiple image formats:

PNG – for high-quality static images
JPG – when you need smaller file sizes
WebP – a modern, efficient format supported by most browsers

These formats suit documents, web pages, slide decks, and other scenarios.

6. How do I share diagrams in Mermaid Online?

Mermaid Online supports sharing via URL. After creating a diagram, the app generates a unique link so others can view the diagram directly in their browsers. It’s convenient for collaboration and remote work—no downloads or attachments needed.

7. How do I use Mermaid on a webpage?

It’s straightforward. Include the Mermaid library via a CDN and add a <div class="mermaid"> or <pre class="mermaid"> element containing Mermaid syntax. For example:

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

8. Is Mermaid syntax hard to learn?

Mermaid’s syntax is relatively simple—especially for users familiar with Markdown. With AI assistants, you don’t even need to memorize the syntax. Just describe the diagram you want and AI will generate the code for you.

9. What are typical use cases for Mermaid?

Technical documentation
Process mapping
System architecture design
Database design
Project management and tracking
Teaching and training materials
Team communication and collaboration
Product prototyping

10. What are the advantages of using Mermaid?

Text-based definitions that are easy to version-control
Seamless integration with code and documentation
Supports dynamic edits and updates
Extremely efficient when paired with AI tools
Cross-platform support—runs in the browser
Open source and free, with an active community
Multiple export and sharing options

11. How about Mermaid’s security?

Mermaid takes security into account. Accepting text input from the Internet can be risky on public sites. Mermaid provides a sandboxed iframe rendering mode so diagrams are rendered in an isolated environment, preventing malicious code execution and adding an extra layer of protection.

12. How do I get started with Mermaid?

Use the Mermaid Live Editor to try it online
Include Mermaid via CDN on your web pages
Install via npm, yarn, or pnpm for your projects
Leverage AI tools (e.g., Claude, ChatGPT) to generate code
Read the official docs and tutorials to learn the syntax

We recommend beginners start with the online editor and pair it with an AI assistant for the fastest onboarding.