> **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 - [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) - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator) - [GitHub Writer](https://github.com/ckeditor/github-writer) - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅ - [Gitea](https://gitea.io) ✅ - [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅ - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅ - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅ - [Deepdwn](https://billiam.itch.io/deepdwn) ✅ - [Joplin](https://joplinapp.org) ✅ - [Slab](https://slab.com) ✅ - [Swimm](https://swimm.io) ✅ - [Notion](https://notion.so) ✅ - [Observable](https://observablehq.com/@observablehq/mermaid) ✅ - [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅ - [NotesHub](https://noteshub.app) ✅ - [GitBook](https://gitbook.com) - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid) - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli) - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf) - [LiveBook](https://livebook.dev) ✅ - [Atlassian Products](https://www.atlassian.com) - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/) - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/) - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview) - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview) - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview) - [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid) - [Redmine](https://redmine.org) - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro) - [redmine-mermaid](https://github.com/styz/redmine_mermaid) - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin) - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid) - [mermerd](https://github.com/KarnerTh/mermerd) - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive) ### CRM/ERP Customer Relationship Management/Enterprise Resource Planning - [coreBOS](https://blog.corebos.org/blog/december2019) ### Blogging Blogging frameworks and platforms - [WordPress](https://wordpress.org) - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md) - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/) - [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) ### CMS/ECM Content Management Systems/Enterprise Content Management - [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) - [Grav CMS](https://getgrav.org/) - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams) - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter) ### Communication Communication tools and platforms - [Discourse](https://discourse.org) - [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid) - [Mattermost](https://mattermost.com/) - [Mermaid Plugin](https://github.com/SpikeTings/Mermaid) - [phpBB](https://phpbb.com) - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid) - [NodeBB](https://nodebb.org) - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid) ### Wikis - [MediaWiki](https://www.mediawiki.org) - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid) - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams) - [Semantic Media Wiki](https://semantic-mediawiki.org) - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid) - [Foswiki](https://foswiki.org) - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin) - [DokuWiki](https://dokuwiki.org) - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid) - [ComboStrap](https://combostrap.com/mermaid) - [TiddlyWiki](https://tiddlywiki.com/) - [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5) - [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid) ### Editor Plugins - [VS Code](https://code.visualstudio.com/) - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid) - [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview) - [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced) - [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting) - [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) - [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode) - [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode) - [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-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new) - [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less) - 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) - [Sublime Text 3](https://sublimetext.com) - [Mermaid Package](https://packagecontrol.io/packages/Mermaid) - [Astah](https://astah.net) - [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-) - [Light Table](http://lighttable.com/) - [Mermaid Plugin](https://github.com/cldwalker/Mermaid) - [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin) - [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid) - [Vim](https://www.vim.org) - [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid) - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram) - [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) - [Brackets](https://brackets.io/) - [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview) - [Iodide](https://github.com/iodide-project/iodide) - [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin) - [Google docs](https://docs.google.com/) - [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856) - [Podlite](https://github.com/zag/podlite-desktop) - [Named block =Diagram](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams) - [GNU Nano](https://www.nano-editor.org/) - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid) - [CKEditor](https://github.com/ckeditor/ckeditor5) - [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid) - [Standard Notes](https://standardnotes.com/) - [sn-mermaid](https://github.com/nienow/sn-mermaid) ### Document Generation - [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅ - [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-) - [Sphinx](https://www.sphinx-doc.org/en/master/) - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid) - [remark](https://remark.js.org/) - [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs) - [rehype](https://github.com/rehypejs/rehype) - [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid) - [Gatsby](https://www.gatsbyjs.com/) - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid) - [JSDoc](https://jsdoc.app/) - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-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/) - [Type Doc](https://typedoc.org/) - [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid) - [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) ✅ - [Codedoc](https://codedoc.cc/) - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin) - [mdbook](https://rust-lang.github.io/mdBook/index.html) - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid) - [Quarto](https://quarto.org/) - [Typora](https://typora.io/) ✅ - [See docs](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid) ### 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://chrome.google.com/webstore/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://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/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.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) | | Chrome Diagrammer | [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - | - | - | - | | Mermaid Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil) | - | - | - | - | | Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - | | Mermaid Previewer | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - | ### Other - [Jekyll](https://jekyllrb.com/) - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid) - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams) - [Reveal.js](https://github.com/hakimel/reveal.js) - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin) - [Bisheng](https://www.npmjs.com/package/bisheng) - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid) - [Reveal CK](https://github.com/jedcn/reveal-ck) - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin) - [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic) - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server) - [ExDoc](https://github.com/elixir-lang/ex_doc) - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs) - [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io) - [ui.mermaid](https://nicegui.io/documentation/mermaid#mermaid_diagrams) ✅