> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/integrations-community.md](../../packages/mermaid/src/docs/ecosystem/integrations-community.md).

# Integrations

## Official integration

### Mermaid Chart

Mermaid Chart is built by the team behind Mermaid JS.

For more details, visit the [Mermaid Chart page](./mermaid-chart.md), or visit the [Mermaid Chart website](https://www.mermaidchart.com) .

## Community integrations

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.

> **Note**
> A ✅ indicates Native support for Mermaid on the respective platform.

To add an integration to this list, see the [Integrations - create page](./integrations-create.md).

### Productivity tools

- [Atlassian Products](https://www.atlassian.com)
  - [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
  - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
  - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
  - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
  - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
  - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
  - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
  - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
  - [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid)
  - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
  - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
  - [CloudScript.io Mermaid Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
  - [Mermaid plus for Confluence](https://marketplace.atlassian.com/apps/1236814/mermaid-plus-for-confluence?hosting=cloud&tab=overview)
- [Azure Devops](https://learn.microsoft.com/en-us/azure/devops/project/wiki/markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
- [Deepdwn](https://billiam.itch.io/deepdwn) ✅
- [Doctave](https://www.doctave.com/) ✅
  - [Mermaid in Markdown code blocks](https://docs.doctave.com/components/mermaid) ✅
- [Forgejo](https://forgejo.org/) ✅
- [GitBook](https://gitbook.com)
  - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
  - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
  - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
- [Gitea](https://gitea.io) ✅
- [GitHub](https://github.com) ✅
  - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) ✅
  - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
  - [GitHub Writer](https://github.com/ckeditor/github-writer)
  - [SVG diagram generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
- [GNU Octave](https://octave.org/) ✅
  - [octave_mermaid_js](https://github.com/CNOCTAVE/octave_mermaid_js) ✅
- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
- [MonsterWriter](https://www.monsterwriter.com/) ✅
- [Joplin](https://joplinapp.org) ✅
- [LiveBook](https://livebook.dev) ✅
- [Slidev](https://sli.dev) ✅
- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
- [Mermerd](https://github.com/KarnerTh/mermerd)
- [Slab](https://slab.com) ✅
- [Swimm](https://docs.swimm.io/features/diagrams-and-charts) ✅
- [NotesHub](https://noteshub.app) ✅
- [Notion](https://notion.so) ✅
- [Observable](https://observablehq.com/@observablehq/mermaid) ✅
- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
- [Outline](https://docs.getoutline.com/s/guide/doc/diagrams-KQiKoT4wzK) ✅
- [Redmine](https://redmine.org)
  - [Mermaid Macro](https://redmine.org/plugins/redmine_mermaid_macro)
  - [Markdown for mermaid plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
  - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
- Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
- [Microsoft Loop](https://loop.cloud.microsoft) ✅

### LLM integrations

LLM integrations to create mermaid diagrams using AI from text descriptions.

- [HueHive - Create mermaid diagrams with text](https://huehive.co/tools/diagrams)
- [MCP Server Mermaid](https://github.com/hustcc/mcp-mermaid) - Generate mermaid diagram and chart with AI MCP dynamically.

### CRM/ERP

Customer Relationship Management/Enterprise Resource Planning

- [coreBOS](https://blog.corebos.org/blog/december2019)

### Blogging

Blogging frameworks and platforms

- [Hexo](https://hexo.io)
  - [hexo-filter-mermaid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams)
  - [hexo-tag-mermaid](https://github.com/JameChou/hexo-tag-mermaid)
  - [hexo-mermaid-diagrams](https://github.com/mslxl/hexo-mermaid-diagrams)
- [Nextra](https://nextra.site/)
  - [Mermaid](https://nextra.site/docs/guide/mermaid)
- [WordPress](https://wordpress.org)
  - [MerPRess](https://wordpress.org/plugins/merpress/)
  - [WP Documentation](https://wordpress.org/themes/wp-documentation/)

### CMS/ECM

Content Management Systems/Enterprise Content Management

- [ApostropheCMS](https://apostrophecms.com/)
  - [Extension for Mermaid.js](https://github.com/BoDonkey/mermaid-extension)
- [Drupal](https://drupal.org/)
  - [Mermaid Diagram Field module](https://www.drupal.org/project/mermaid_diagram_field)
- [Grav CMS](https://getgrav.org/)
  - [Mermaid Diagrams Plugin](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
  - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
- [Tiki Wiki CMS Groupware](https://tiki.org)
  - [Tracker Entity Relationship Diagram](https://doc.tiki.org/Tracker-Entity-Relationship-Diagram)
- [VitePress](https://vitepress.vuejs.org/)
  - [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
- [VuePress](https://vuepress.vuejs.org/)
  - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)

### Communication

Communication tools and platforms

- [Discourse](https://discourse.org)
  - [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid)
- [Mattermost](https://mattermost.com/)
  - [Mermaid Plugin](https://github.com/SpikeTings/Mermaid)
- [NodeBB](https://nodebb.org)
  - [Mermaid Parser Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
- [phpBB](https://phpbb.com)
  - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
- [Slack](https://slack.com)
  - [Mermaid Preview](https://mermaid-preview.com)

### Wikis

- [DokuWiki](https://dokuwiki.org)
  - [ComboStrap](https://combostrap.com/utility/create-diagram-with-mermaid-vh3ab9yj)
  - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
- [Foswiki](https://foswiki.org)
  - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
- [MediaWiki](https://www.mediawiki.org)
  - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
  - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
- [PmWiki](https://www.pmwiki.org)
  - [MermaidJs Cookbook recipe](https://www.pmwiki.org/wiki/Cookbook/MermaidJs)
- [Semantic Media Wiki](https://www.semantic-mediawiki.org)
  - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
- [TiddlyWiki](https://tiddlywiki.com/)
  - [mermaid-tw5: wrapper for Mermaid Live](https://github.com/efurlanm/mermaid-tw5)
  - [tw5-mermaid: plugin for managing Mermaid.js tiddlers](https://github.com/jasonmhoule/tw5-mermaid)

### Editor Plugins

- Atom _(Atom has been [archived.](https://github.blog/2022-06-08-sunsetting-atom/))_
  - [Markdown Preview Enhanced](https://github.com/shd101wyy/markdown-preview-enhanced)
  - [Atom Mermaid](https://github.com/y-takey/atom-mermaid)
  - [Language Mermaid Syntax Highlighter](https://github.com/ytisf/language-mermaid)
- [Astah](https://astah.net)
  - [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-)
- [Brackets](https://brackets.io/)
  - [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview)
- [CKEditor](https://github.com/ckeditor/ckeditor5)
  - [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
- [Draw.io](https://draw.io)
  - [Mermaid Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
- [GNU Emacs](https://www.gnu.org/software/emacs/)
  - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
  - [Org-Mode integration](https://github.com/arnm/ob-mermaid)
- [GNU Nano](https://www.nano-editor.org/)
  - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
- [Google docs](https://docs.google.com/)
  - [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856)
- [Inkdrop](https://www.inkdrop.app)
  - [Mermaid Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
- [Light Table](http://lighttable.com/)
  - [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
- [Markdown-It](https://github.com/markdown-it/markdown-it)
  - [Textual UML Parser](https://github.com/manastalukdar/markdown-it-textual-uml)
  - [Mermaid Plugin](https://github.com/tylingsoft/markdown-it-mermaid)
  - [md-it-mermaid](https://github.com/iamcco/md-it-mermaid)
  - [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
- [Podlite](https://github.com/zag/podlite-desktop)
  - [=Diagram block](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
- [Standard Notes](https://standardnotes.com/)
  - [Mermaid Extension](https://github.com/nienow/sn-mermaid)
- [VS Code](https://code.visualstudio.com/)
  - [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor)
  - [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export)
  - [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)
  - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
  - [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
  - [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)
  - [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode)
  - [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode)
  - [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
- [Vim](https://www.vim.org)
  - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
  - [Official Vim Syntax and ft plugin](https://github.com/craigmac/vim-mermaid)
- [Zed](https://zed.dev)
  - [zed-mermaid](https://github.com/gabeidx/zed-mermaid)

### Document Generation

- [Astro](https://astro.build/)
  - [Adding diagrams to your Astro site with MermaidJS and Playwright](https://agramont.net/blog/diagraming-with-mermaidjs-astro/)
- [Codedoc](https://codedoc.cc/)
  - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) ✅
- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
- [Gatsby](https://www.gatsbyjs.com/)
  - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
- [Jekyll](https://jekyllrb.com/)
  - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
  - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
- [JSDoc](https://jsdoc.app/)
  - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
- [Madness](https://madness.dannyb.co/)
- [mdBook](https://rust-lang.github.io/mdBook/index.html)
  - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
- [MkDocs](https://www.mkdocs.org)
  - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
  - [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)
- [Quarto](https://quarto.org/) ✅
- [rehype](https://github.com/rehypejs/rehype)
  - [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid)
- [remark](https://remark.js.org/)
  - [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs)
- [Sphinx](https://www.sphinx-doc.org/en/master/)
  - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
- [Type Doc](https://typedoc.org/)
  - [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
- [Typora](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid) ✅
- [Unison programming language](https://www.unison-lang.org/docs/usage-topics/documentation/) ✅

### Browser Extensions

| Name                     | Chrome Web Store                                                                                            | Firefox Add-ons                                                                | Opera                                                                          | Edge                                                                                                                         | Source/Repository                                                                                    |
| ------------------------ | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| GitHub + Mermaid         | -                                                                                                           | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/)               | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)                                       |
| Asciidoctor Live Preview | [🎡🔗](https://chromewebstore.google.com/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | -                                                                              | -                                                                              | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | -                                                                                                    |
| Diagram Tab              | -                                                                                                           | -                                                                              | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/khafast/diagramtab)                                                        |
| Markdown Diagrams        | [🎡🔗](https://chromewebstore.google.com/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel)         | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/)      | -                                                                              | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe)                 | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
| Markdown Viewer          | -                                                                                                           | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/simov/markdown-viewer)                                                     |
| Extensions for Mermaid   | -                                                                                                           | -                                                                              | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | -                                                                                                                            | [🐙🔗](https://github.com/Stefan-S/mermaid-extension)                                                |
| Chrome Diagrammer        | [🎡🔗](https://chromewebstore.google.com/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk)         | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
| Mermaid Diagrams         | [🎡🔗](https://chromewebstore.google.com/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil)          | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
| Monkeys                  | [🎡🔗](https://chromewebstore.google.com/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
| Mermaid Previewer        | [🎡🔗](https://chromewebstore.google.com/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl)         | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |

### Other

- [Bisheng](https://www.npmjs.com/package/bisheng)
  - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
- [Blazorade Mermaid: Render Mermaid diagrams in Blazor applications](https://github.com/Blazorade/Blazorade-Mermaid/wiki)
- [Codemia: A tool to practice system design problems](https://codemia.io) ✅
- [ExDoc](https://github.com/elixir-lang/ex_doc)
  - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
- [MarkChart: Preview Mermaid diagrams on macOS](https://markchart.app/)
- [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io) ✅
  - [ui.mermaid(...)](https://nicegui.io/documentation/mermaid)
- [Reveal.js](https://github.com/hakimel/reveal.js)
  - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
- [Reveal CK](https://github.com/jedcn/reveal-ck)
  - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
- [speccharts: Turn your test suites into specification diagrams](https://github.com/arnaudrenaud/speccharts)
- [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer)

<!--- cspell:ignore Blazorade HueHive --->
