Plugins

Mermaid works with many tools you already use. This article lists the official Mermaid plugins and the tools that render Mermaid natively, so you can find the right integration for your workflow.

To browse all available plugins visually, visit our plugins page. If you're looking for a plugin that isn't listed here, see Don't see the plugin you need? at the end for how to request one.

How Mermaid plugins work

Mermaid plugins work in two directions, so your diagrams stay in sync with the tools your team already uses:

• Pull in: Plugins for tools like VS Code, Cursor, Jira, and JetBrains let you create and edit Mermaid diagrams without leaving the tool you're already in. Diagrams you create sync back to your Mermaid account automatically.
• Push out: Plugins for tools like Confluence, Google Docs, Word, and PowerPoint let you embed Mermaid diagrams as live links — not screenshots. When you update a diagram in Mermaid, the embedded version updates everywhere it's used. No re-exporting, no stale screenshots.

This means Mermaid stays the source of truth for your diagrams, while still showing up wherever your team needs them.

Official Mermaid plugins

These plugins are built and maintained by the Mermaid team. Most connect to your Mermaid account for AI-powered diagram generation, real-time collaboration, and access to your saved diagrams.

Code editors and IDEs

• Mermaid for Visual Studio Code — the official Mermaid editor for VS Code. Create, edit, and preview diagrams inside your editor, with syntax highlighting for .mmd files and Mermaid blocks in Markdown. AI features (mention @mermaid-chart in Copilot Chat to generate diagrams from your code) require both a Mermaid account and the GitHub Copilot extension installed in VS Code.
• Mermaid for Cursor — visualize and edit Mermaid diagrams directly in Cursor, your AI-powered coding editor.
• Mermaid for Windsurf — create and edit Mermaid diagrams inside Windsurf, alongside your code.
• Mermaid for Google Antigravity — bring Mermaid diagrams into your agentic coding workflow in Google Antigravity.
• Mermaid for JetBrains IDEs — render and edit Mermaid diagrams in IntelliJ, WebStorm, PyCharm, and other JetBrains IDEs.

AI assistants

• Mermaid Chart GPT (for ChatGPT) — create Mermaid diagrams with natural language prompts inside ChatGPT.
• Mermaid for Claude Code — generate, check, and improve Mermaid diagrams with natural language in Claude Code.
• Mermaid for GitHub Copilot — works alongside GitHub Copilot Chat (via the VS Code extension) to generate diagrams from your source code.
• Mermaid MCP Server — a backend service that lets any MCP-enabled AI assistant (Claude, Cursor, VS Code, Antigravity, and others) automatically create, validate, and render Mermaid diagrams via the Model Context Protocol. See the Mermaid MCP Server article for setup.
• Mermaid for ChatGPT (app) — Mermaid is available as a ChatGPT App, installable from the ChatGPT apps directory at chatgpt.com/apps/mermaid-chart. Generate, render, and edit Mermaid diagrams inside any ChatGPT conversation. This is in addition to the existing Mermaid Chart GPT custom GPT — the App is the newer first-party integration that runs inside ChatGPT's built-in apps surface, while the GPT continues to work through the GPT directory.

Documentation and collaboration

• Mermaid for Confluence — create, edit, and collaborate on Mermaid diagrams directly inside Confluence pages. Built-in editor with 20+ templates, live preview, and syntax highlighting. Connect your Mermaid account to unlock AI-powered diagram generation and access to your saved diagrams. Note: Confluence Cloud only — the plugin uses Atlassian's Connect framework, which is not compatible with Confluence Data Center or Server.
• Mermaid for Jira — add diagrams to issues and tickets for clearer collaboration in Jira.
• Mermaid for Google Docs — drop Mermaid diagrams into your Google Docs and keep them up to date as you edit.
• Mermaid for Microsoft Word — add clear Mermaid diagrams to your Word documents for specs, proposals, and reports. The latest release (v1.7.0) includes Mermaid v11.13.0, which adds Venn, Ishikawa, half-arrowheads, and other newer diagram types. If you're on an older version, contact us for the upgrade link.
• Mermaid for Microsoft PowerPoint — insert Mermaid diagrams into slides without breaking formatting or switching apps.

GitHub integration

• Mermaid Diagram Sync (GitHub App) — install on your GitHub repositories to keep Mermaid diagrams in sync with your source code. Each .mmd diagram file references one or more source files (via a YAML frontmatter block). When a referenced source file changes in a pull request, the app uses Mermaid AI to update the diagram and adds the changes to the same PR for review. Each diagram update uses 1 AI credit from your Mermaid account. Install from the GitHub Marketplace by searching for "Mermaid Diagram Sync."

To browse and install any official plugin, visit the Plugins page in your Mermaid dashboard or the plugins overview page. For detailed setup instructions per plugin, see the plugins documentation.

Tools with native Mermaid support

These platforms render Mermaid syntax natively — no plugin required. In most cases, you just paste Mermaid code into a Markdown code block with the mermaid language identifier, and the diagram renders automatically.

Code hosting and version control

• GitHub — Markdown code blocks with the mermaid language tag render in issues, pull requests, and README files.
• GitLab — same Markdown syntax renders in issues, merge requests, and wikis.
• Azure DevOps — Mermaid renders in wikis and pull request descriptions.
• Gitea and Forgejo — both render Mermaid in Markdown files.

Documentation and knowledge bases

• Notion — create a code block and set the language to Mermaid.
• Obsidian — native rendering in the markdown preview.
• Outline, Slab, HackMD, Doctave, MonsterWriter, Deepdwn, NotesHub — all render Mermaid natively.

Developer and collaboration tools

• Joplin — renders in the markdown editor.
• LiveBook — native support for Elixir notebooks.
• Observable — native rendering in notebooks.
• Slidev — native support for Markdown-based slide decks.
• Swimm, Tuleap — native rendering.

For the complete, up-to-date list of tools that render Mermaid, see mermaid.js.org/ecosystem/integrations-community.

Community plugins

These plugins are built and maintained by community contributors, not by the Mermaid team. Feature support, stability, and compatibility may vary — please direct any issues to the plugin's own maintainers rather than to Mermaid support.

• GitBook — community Mermaid plugin
• Redmine — Mermaid Macro and other community options
• JetBrains IDEs — community-built plugins beyond the official one listed above
• VS Code — several community extensions beyond the official Mermaid extension (e.g., Markdown Preview Mermaid Support, Mermaid Preview)
• GNU Octave — octave_mermaid_js

For the complete list of community integrations, see mermaid.js.org/ecosystem/integrations-community.

Plugin troubleshooting

If a plugin won't load, won't sign in, or shows an error, try these in order:

1. Sign out and sign back in through the plugin's account panel.
2. Clear cookies and cache for mermaid.ai, then re-authenticate.
3. Try in an incognito or private window to rule out browser extensions.
4. Check the plugin version is up to date — install pages list the current version.

Notes:

• VS Code: if Sign Out fails with Invalid arguments. Expected: { providerId: string; accountLabel: string }, uninstall and reinstall the Mermaid extension. 
• PowerPoint / Word / Confluence: a 403 error usually means the plugin can't reach your authenticated session. Re-authenticate from the plugin's sign-in panel; if that doesn't help, sign in to mermaid.ai in the same browser first, then retry.
• JetBrains IDEs: if you see a java.lang.Throwable error, check that the plugin version matches your IDE version. Updating both usually resolves it.

If you've tried these and the plugin still doesn't work, contact us with: the plugin name and version, the host application version (e.g., VS Code 1.95, Confluence Cloud, PowerPoint 365), and the exact error message or a screenshot.

Don't see the plugin you need?

We're actively building and expanding our plugin library. If there's a tool you'd like Mermaid to integrate with — a specific IDE, documentation platform, or collaboration tool — we'd love to hear from you.

Submit a feature request via our Contact Us page with:

• The tool or platform you'd like Mermaid to support
• How you'd use it — what workflow the integration would improve
• Your team size (optional, but helps us prioritize)

For the latest official list of Mermaid plugins, visit mermaid.ai/docs/plugins/intro.