Mermaid is a collaborative diagramming platform that lets you create diagrams using code, clicks, or AI. You can build flowcharts, sequence diagrams, class diagrams, git graphs, Gantt charts, and more — all in one place.
Mermaid.js is the free, open-source diagramming library that powers text-to-diagram rendering. Mermaid is built on top of it, adding collaboration features, a visual editor, AI assistance, team workspaces, plugins, and enterprise support. It was founded by the creators behind Mermaid.js to bring professional tooling to the Mermaid ecosystem.
Mermaid offers several key advantages: diagrams are text-based and live alongside your code, making them easy to version control and integrate into your development workflow. Teams can collaborate in real-time to maintain consistency across docs, and plugins let you create diagrams in the tools you already use.
We give you three ways to work: a visual drag-and-drop editor for quick layouts, an AI assistant that generates diagrams from simple descriptions, and a text-editor for precise control with Mermaid syntax. Switch between them seamlessly or use all three together – whatever fits your workflow.
Not at all. While Mermaid uses text-based syntax, it's simple and intuitive to learn. Plus, you've got a visual drag-and-drop editor and an AI assistant that generates diagrams from natural language – so you can create diagrams however you're most comfortable.
Getting started is easy. Sign up for a free account and create your first diagram using our visual editor, AI assistant, or by writing Mermaid syntax directly.
Yes! Mermaid offers a Basic plan with core diagramming features. We also have paid plans with advanced collaboration tools and increased AI credits.
Yes – our Enterprise plan includes single sign-on (SSO), custom integrations, dedicated support, and more for larger organizations. Explore our pricing or contact our sales team to learn more.
Using Mermaid: Code
Mermaid is a diagramming platform that lets you create diagrams from simple Markdown-style syntax or with AI. The Live Editor is a browser tool within Mermaid where you can instantly preview and experiment with Mermaid syntax (no sign-up required).
Text is faster and easier to maintain than manual drawing:
Layout happens automatically — nodes and edges snap into place
Diagrams update as your code changes, so they never go stale
You can copy Mermaid syntax into tools like Cursor or Windsurf to "vibe code" visuals
Because they're just text, diagrams live in Git — making them versionable, reviewable, and collaborative
Nope. Anyone can write Mermaid syntax, even without coding experience. Don't want to touch code at all? Use AI to generate or edit diagrams from natural language, or use the Visual Editor to build with clicks.
Yes. Mermaid diagrams are plain text files written in Markdown-style syntax. Commit, diff, branch, and roll back your diagrams just like source code — perfect for version-controlled projects.
Explore our documentation here. You'll find syntax references, chart type examples, and best practices to help you get started.
AI Features
Mermaid AI is an AI diagramming tool that turns plain text into diagrams using the Mermaid syntax. You can create flowcharts, ER diagrams, timelines, and more — without writing any syntax yourself.
Nope. Just describe what you need and Mermaid AI generates the diagram for you. Want to tweak it? You can open the code, edit it manually, or store it in Git.
Mermaid.js is the open-source library that powers text-to-diagram rendering. Mermaid Live is the free browser-based editor. Mermaid AI adds natural language generation, collaboration, cloud storage, and integrations while staying true to Mermaid's text-based foundation.
Yes. AI prompts from our paid users are never used for training. All diagrams are encrypted, and we never share your data with third parties.
Using Mermaid: Visual Editor
The Visual Editor lets you create and customize Mermaid diagrams with clicks and drags — no code required. Adjust nodes, edges, labels, colors, and layouts instantly while Mermaid generates the syntax for you in the background.
Nope. Just drag to design and the Visual Editor generates the code automatically. Want to tweak the syntax directly? You can switch between visual and code modes anytime.
The Visual Editor currently supports flowchart, class, sequence, state, mindmap, ER, and requirement diagrams — with more types coming soon. You can always use the code editor for the full range of Mermaid diagrams.
The Visual Editor and code editor stay in sync. Make changes visually and the code updates automatically — or edit the code and watch the visual diagram reflect your changes. Use whichever approach fits your workflow.
Yes. Adjust node colors, shapes, edge styles, labels, and more with a few clicks. The Visual Editor gives you full control over your diagram's appearance without touching CSS or config files.
Yes. You can co-create diagrams live on a shared canvas and leave comments for async feedback. Changes sync in real time, so your team stays aligned across time zones.
Yes. Export your diagrams as PNG, SVG, or copy the Mermaid syntax to use in your docs, repositories, or other tools.
Using Mermaid: Presentations
Use Markdown to write your content and Mermaid handles the formatting. Focus on what you're saying while your diagrams render automatically within the deck.
Nope. Your diagrams and slides stay connected. When you update a diagram, your presentation updates automatically — no outdated screenshots or manual syncing required.
Yes. Walk through architecture, pitch your strategy, or share progress with multiple diagrams in one fluid slide deck — all accessible via a single URL. No switching tabs or juggling files.
Mermaid works great for:
Technical reviews (sequence diagrams, ER diagrams)
Architecture walkthroughs (C4 diagrams, service maps)
State modeling (state diagrams for orders, tickets, services)
Team alignment (org charts, process flows)
Yes. Guide workshops with live, editable diagrams. Make changes in real time to show alternatives, address questions, or align stakeholders on the spot.
Just share the URL. Your audience can view presentations in any browser without needing a Mermaid account, installing software, or downloading files.
Yes. Leave comments for async feedback and work together in real time. Changes sync automatically so your team stays aligned without version conflicts.
Integrations
We integrate with the tools you already use: ChatGPT, GitHub Copilot, Claude Code, Cursor, Windsurf, Google Antigravity, Confluence, Jira, Visual Studio Code, JetBrains IDEs, Google Docs, and more. Create and embed Mermaid diagrams right where you work, with more integrations coming soon.
Yes — all official Mermaid plugins are free to install and use.
You can create flowcharts, sequence diagrams, Gantt charts, ER diagrams, class diagrams, state diagrams, mind maps, timelines, user journeys, Git graphs, C4 diagrams, packet diagrams, radar charts, and more.
Nope. The plugins run on the official Mermaid.js engine, built by its creator and trusted by developers worldwide. Just install the plugin and start diagramming.
We always use the latest stable version of Mermaid.js to give you the newest features and improvements. Want to check your exact version? Use the “info” diagram type in any Mermaid diagram – it will show your current version and system details. We continuously update the plugins as new releases become available.
It's the official extension for Visual Studio Code that lets you create and preview Mermaid diagrams directly in your editor — no need to switch tools or open a browser.
Yes — the extension is completely free to install and use from the VS Code Marketplace.
You can build flowcharts, sequence diagrams, Gantt charts, ER diagrams, class diagrams, state diagrams, mind maps, timelines, user journeys, Git graphs, and more — all from text or natural language.
Either write Mermaid syntax directly in your editor with live preview, or use our AI assistant to generate diagrams from natural language prompts or code snippets. Switch between them however you like.
Yes — you get a live preview that updates in real time as you type, so you can see your changes instantly.
Nope. The plugin is powered by Mermaid.js under the hood, so you can start diagramming right after installation.
Billing & Plans
Yes! The Basic plan gives you access to core features so you can start creating diagrams right away. It’s a great way to explore Mermaid before upgrading.
Plus unlocks unlimited diagrams, limitless diagram size, and 300 AI credits. Premium includes everything in Plus, along with unlimited viewer seats.
Yes – you can start a free trial of Plus or Premium to try advanced features before committing.
Absolutely. You can upgrade, downgrade, or cancel your plan whenever you want. Changes are reflected in your next billing cycle.
We currently offer annual billing only. Monthly plans are not available at this time.
We accept all major credit cards. For Enterprise, we also support invoicing and purchase orders.
Enterprise includes everything in Premium, plus SSO, dedicated account support, custom contract and invoicing, and easy user consolidation. It’s designed for large teams with compliance needs.
Enterprise plans are customized based on your team’s needs. Contact our sales team to get started.
No. The core Mermaid syntax is always free and open-source. Pro and Enterprise add AI features, diagram storage, real-time collaboration, integrations, and security controls.
No. AI features are included in all plans, from capped credits to unlimited use. AI prompts from our paid users are never used for training and all data remains private.
Community & Support
The fastest way is our Discord — it’s ideal for syntax questions, debugging, and “how would you model this?” discussions. You can also browse existing threads before posting.
Share:
the diagram type,
a minimal Mermaid snippet that reproduces the issue,
what you expected vs. what happened, and
where you’re rendering it (Mermaid, Mermaid Live Editor, a plugin/integration, etc.). If possible, include a screenshot.
For issues with Mermaid, submit a request here or directly through our Github. For Mermaid.js (open-source) issues, open a GitHub issue with repro steps and the smallest diagram snippet possible.
Email the details (steps, affected versions, mitigations if known) to hello@mermaidchart.com.
Yes — our docs include syntax references and examples across diagram types, plus tutorials and “getting started” guidance. For more, explore our Youtube for deep-dive videos.
Yes — and we encourage it. Post reusable snippets, patterns, or templates in Discord (great for “showcase” style sharing) and include a short note on when to use them.
Absolutely. A good place to start is “good first issues,” bug confirmations, documentation improvements, or feature ideas on GitHub.
Use our contact/support path for product feedback, usability notes, and “something feels off” reports — we use this feedback to improve Mermaid and the Mermaid ecosystem.
Follow Mermaid on LinkedIn, X, and YouTube for product updates, tips, and community highlights. You can also join the Discord for day-to-day discussion.
Yes — we love to highlight great community creations. If you share something you’re proud of, submit an example here to contribute your example to our upcoming Community site (you will be credited).