Mermaid 集成生态全景指南：官方服务与社区插件分类导航

Mermaid 集成生态全景指南官方服务与社区插件分类导航【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid本指南以仓库内 integrations-community.md 这份 Mermaid 官方“集成目录”为骨架梳理 Mermaid 的官方服务与社区插件生态涵盖生产力工具、LLM/AI 生成、编辑器、Wiki、CMS、博客、文档生成与浏览器扩展等数十个细分场景并解释列表中的 ✅ 标记含义、各条目的适用定位以及如何把你自己开发的集成加入该生态清单。读完本篇你可以在数十个第三方平台中快速定位“哪个平台原生支持 Mermaid”并为团队选型 Markdown 渲染、知识库、IDE、CI 文档管线等场景提供可直接参考的决策清单。Mermaid 集成生态的两条主线Mermaid 是一个用文本类似 Markdown生成流程图、时序图等图表的开源库核心功能位于 packages/mermaid/src。除了核心渲染能力Mermaid 生态围绕“文本即图表”的理念长出了大量接入形态。Mermaid 官方在 docs/ecosystem/integrations-community.md 中把整个集成生态划分为两类官方集成Official integration由 Mermaid 背后的团队直接维护的产品目前指 Mermaid Chart。社区集成Community integrations由第三方社区为各种平台创建的插件与集成按生产力工具、LLM、博客、CMS、Wiki、编辑器、文档生成等场景分类收录。目录中还给出了一个统一的阅读约定✅ 表示该平台对 Mermaid 提供原生Native支持即无需额外配置渲染插件平台本身就能解析 Mermaid 文本并出图。官方集成Mermaid ChartMermaid Chart 由 Mermaid JS 背后的团队构建创始团队与开源项目同源是当前唯一的“官方集成”方向。关于它的详细功能与套餐仓库内有一份独立的 mermaid-chart.md 说明文档本节仅做生态定位层面的概括Editor基于 Web 的 Mermaid 图表创建与编辑界面Mermaid AI通过内置 AI Chat 用自然语言描述生成图表Whiteboard虚拟白板式创建与编辑 Mermaid 图表Plugins插件体系官方插件覆盖 ChatGPTMermaid Chart GPT、Confluence、Jira、VS Code、JetBrains IDE、Google Docs、Microsoft PowerPoint/Word 等Collaboration 与 Comments多用户实时协同编辑与批注Presentations以幻灯片形式演示图表Plans分为免费 Basic、Plus、Premium 与 Enterprise 多个档位。此外Mermaid Chart 会把资源回馈给 Mermaid 开源开发按 mermaid-chart.md 的说明首次为 Mermaid 开源项目做出贡献的贡献者可获一年 Premium 免费资格。生产力与协作平台文档里写字就能出图这一类别覆盖日常写作与项目管理场景很多主流协同工具已原生支持 Mermaid是“在文档中直接嵌入图表”最常见的使用方式。以下按原文档条目逐一列出并标注 ✅ 原生支持状态。Atlassian 系未标 ✅需安装应用市场插件ConfluenceMermaid for Confluence、Mermaid Integration for Confluence、Mermaid Charts Diagrams for Confluence、Mermaid Diagrams for Confluence、Mermaid Live Editor for Confluence Cloud、Mermaid Macro for Confluence、Mermaid Plugin for ConfluenceServer 版、EliteSoft Mermaid Charts and Diagrams、Mermaid plus for ConfluenceJiraAuto convert diagrams in Jira、Mermaid Charts Diagrams for Jira、Mermaid for Jira Cloud - Draw UML diagrams easily跨产品CloudScript.io Mermaid Addon。原生支持✅平台Azure DevOpsWiki 页面 Markdown、Deepdwn、DoctaveMarkdown 代码块内支持、Forgejo、Gitea、GitHubMarkdown 代码块渲染 Mermaid官方博客有专门说明、GitLabMarkdown 内 Diagrams and flowcharts、GNU Octaveoctave_mermaid_js、HackMD、MonsterWriter、Joplin、LiveBook、Slidev、Tuleap、Mermaid Flow Visual Editor、Slab、Swimm、NotesHub、Notion、Observable、ObsidianAdvanced formatting syntax、Outline、Microsoft Loop。GitHub 生态补充插件Compile mermaid to imageGitHub Action、GitHub Writer、SVG diagram generator。GitBook未原生有 Mermaid Plugin、Markdown with Mermaid CLI 两个社区插件。JetBrains IDEs未标 ✅官方插件市场提供 Mermaid Plugin 与 Mermaid Studio。Redmine未标 ✅Mermaid Macro、Markdown for mermaid plugin、redmine-mermaid 三个插件。其他Mermaid Studio by webtoolz浏览器端实时预览编辑器带主题与 PNG/SVG 导出、Mermerd数据库反向生成 Mermaid ER 图、Visual Studio Code Polyglot Interactive Notebooks。可以看出如果团队用的是 Azure DevOps、GitHub、GitLab、Notion、Obsidian、Outline 这类平台通常“写 Markdown 即渲染”无需额外插件而 Confluence/Jira 场景则高度依赖市场应用。LLM 集成用自然语言生成图表随着大模型流行原文档单列了 LLM 类别指“通过 AI 从文本描述创建 Mermaid 图”的集成HueHive用文本创建 Mermaid 图表的工具MCP Server Mermaid通过 AI MCPModel Context Protocol动态生成 Mermaid 图表的服务端Mermaid Studio借助 Mermaid Studio 的代码智能与图表生成能力通过 MCP 让编码 Agent 创建图表需要 JetBrains IDE。这与 mermaid-chart.md 中描述的“Mermaid AI / 自然语言生成图表”方向一致反映出生态正在从“手写文本语法”向“Agent/LLM 辅助生成”演进。编辑器与 IDE 插件写代码处就地预览编辑类集成数量最多覆盖几乎所有主流编辑器。Mermaid 的文本化语法天然适合在编辑器中高亮、实时预览。Atom生态仍在但原文档特别标注 Atom 已归档相关插件有 Markdown Preview Enhanced、Atom Mermaid、Language Mermaid Syntax Highlighter。AstahExport to MermaidUML 导出。BracketsMermaid Preview。CKEditorCKEditor 5 Mermaid plugin。Draw.ioMermaid Plugin。GNU Emacsmajor mode 用于 .mmd 文件、Org-Mode 集成。GNU NanoNano Mermaid。Google docsMermaid plugin for google docs。InkdropMermaid Plugin。IntelliJ IdeaMermaid Visualizer。Light TableMermaid Plugin。Markdown-It生态Textual UML Parser、Mermaid Plugin、md-it-mermaid、markdown-it-mermaid-less 等多个选择。PodliteDiagram block。Standard NotesMermaid Extension。VS Code插件最为丰富——Mermaid Editor、Mermaid Export、Markdown PDF、Markdown Preview Mermaid Support、Markdown Preview Enhanced、Mermaid Preview、Preview、Preview Sequence Diagrams、Mermaid Markdown Syntax Highlighting。VimVim Diagram Syntax、Official Vim Syntax and ft plugin。Zedzed-mermaid。浏览器扩展把 Mermaid 渲染带进任意网页原文档以一张表格收录了 10 款浏览器扩展并分别标注其覆盖 Chrome / Firefox / Opera / Edge 的情况未标 ✅均为第三方插件扩展名定位渠道覆盖GitHub Mermaid在 GitHub 页面渲染 Mermaid 代码块Firefox源码仓库同步Asciidoctor Live PreviewAsciidoctor 实时预览Chrome / EdgeDiagram Tab新标签页画图独立项目Markdown Diagrams浏览器内 Markdown 图表渲染Chrome / Firefox / EdgeMarkdown ViewerMarkdown 文档查看FirefoxExtensions for MermaidMermaid 增强扩展OperaChrome DiagrammerChrome 图表工具ChromeMermaid Diagrams通用 Mermaid 渲染ChromeMonkeysGitHub 上的 Mermaid“Monkeys: Mermaid for GitHub”ChromeMermaid PreviewerMermaid 预览ChromeTachi Code代码/图表辅助Chrome / Firefox / Edge博客、文档生成与静态站点文档生成场景是 Mermaid 集成最密集的领域之一其中带 ✅ 的代表开箱即用。静态站点与框架Docusaurus✅、Docsy Hugo Theme✅、Quarto✅、Typora✅支持在 Markdown 中绘制、Astro社区博客教程、Codedoc、Gatsbygatsby-remark-mermaid、Jekylljekyll-mermaid、jekyll-mermaid-diagrams、VitePressPlugin for Mermaid.js另有 vitepress-mermaid-renderer 见 Other、VuePressPlugin for Mermaid.js、Bishengbisheng-plugin-mermaid见 Other、Nextra内置 Mermaid 指南。Markdown 处理链rehyperehype-mermaid、remarkremark-mermaidjs、mdBookmdbook-mermaid、MkDocsmkdocs-mermaid2-plugin、mkdocs-material、Sphinxsphinxcontrib-mermaid、Type Doctypedoc-plugin-mermaid、JSDocjsdoc-mermaid。其他文档工具Madness、ExDocRendering Mermaid graphs、Unison programming language ✅。内容平台博客框架与 CMS/ECM博客Hexohexo-filter-mermaid-diagrams、hexo-tag-mermaid、hexo-mermaid-diagrams 三款、Nextra、WordPressMerPRess、WP Documentation 主题。CMS/ECMApostropheCMSMermaid.js 扩展、DrupalMermaid Diagram Field module、Grav CMSMermaid Diagrams Plugin、GitLab Markdown Adapter、Tiki Wiki CMS GroupwareTracker Entity Relationship Diagram、VitePress 与 VuePress 的插件方案。通信、Wiki 与其他工具通信DiscourseMermaid Plugin、MattermostMermaid Plugin、NodeBBMermaid Parser Plugin、phpBBphpbb-ext-mermaid、SlackMermaid Preview。WikiDokuWikiComboStrap、Mermaid Plugin、FoswikiMermaidPlugin、MediaWikiFlex Diagrams Extension、Mermaid Extension、PmWikiMermaidJs Cookbook、Semantic MediaWikiMermaid Plugin、TiddlyWikimermaid-tw5、tw5-mermaid。其他Blazorade MermaidBlazor 应用渲染、Codemia ✅系统设计练习题、MarkChartmacOS 预览、mermaid-isomorphic同构渲染、mermaid-serverHTTP 请求生成图表、NiceGUI ✅Pythonui.mermaid、Reveal.js / Reveal CK幻灯片插件、SchemaCrawler数据库生成 Mermaid、speccharts把测试套件转成规格图、termaid终端里渲染为 Unicode 图形。CRM/ERPcoreBOS2019 年的 Mermaid 集成博文。如何向生态清单贡献你自己的集成如果你自己开发的插件/集成希望进入上述列表仓库内的 integrations-create.md 提供了明确的规范建议文件扩展名支持 Mermaid 文件的应用应当使用.mermaid或.mmd扩展名MIME 类型推荐使用text/vnd.mermaidIANA 已注册的 Mermaid 媒体类型展示作品可在 Mermaid Discord 的 #showcase 频道分享提交收录为社区集成列表打开 Pull Request 即可申请加入。仓库内还存在一个可独立运行的本地示例packages/mermaid-local-editor离线、无外部 CDN、自带 DOMPurify可作为把 Mermaid 嵌进自有产品的参考实现完整的 HTML 引入与 CDN 使用示例见 getting-started.md。若想学习如何在 HTML 页面中调用 mermaid 并渲染流程可参考仓库内的 usage.md 与 examples。小结与选型建议综合 integrations-community.md 全文优先看 ✅在 GitHub/GitLab/Azure DevOps/Notion/Obsidian/Outline/Docusaurus 等平台中Mermaid 是原生能力无需插件即可在 Markdown 代码块中使用文档写作选 Typora/Docsy/Quarto它们开箱即用静态站点如 MkDocs、VitePress、Sphinx需要搭配对应插件Confluence/Jira 等传统协作平台需要从 Atlassian 市场挑选 Mermaid 应用编辑器内预览VS Code 的扩展数量最多、JetBrains 与 Vim/Emacs 亦有成熟方案LLM/AI 场景可关注 MCP Server Mermaid、Mermaid Studio 等通过 MCP 暴露能力的项目让 Agent 动态生成图表。该目录本身是持续更新的活文档具体条目的维护状态与新增内容请以仓库中该文件的当前版本为准。【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考