企业官网建设流程全解析

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 Chart

Mermaid Chart 由 Mermaid JS 背后的团队构建（创始团队与开源项目同源），是当前唯一的“官方集成”方向。关于它的详细功能与套餐，仓库内有一份独立的 mermaid-chart.md 说明文档，本节仅做生态定位层面的概括：

• Editor：基于 Web 的 Mermaid 图表创建与编辑界面；
• Mermaid AI：通过内置 AI Chat 用自然语言描述生成图表；
• Whiteboard：虚拟白板式创建与编辑 Mermaid 图表；
• Plugins：插件体系，官方插件覆盖 ChatGPT（Mermaid 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 系（未标 ✅，需安装应用市场插件）：

• Confluence：Mermaid 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 Confluence（Server 版）、EliteSoft Mermaid Charts and Diagrams、Mermaid plus for Confluence；
• Jira：Auto convert diagrams in Jira、Mermaid Charts & Diagrams for Jira、Mermaid for Jira Cloud - Draw UML diagrams easily；
• 跨产品：CloudScript.io Mermaid Addon。

原生支持（✅）平台：

• Azure DevOps（Wiki 页面 Markdown）、Deepdwn、Doctave（Markdown 代码块内支持）、Forgejo、Gitea、GitHub（Markdown 代码块渲染 Mermaid，官方博客有专门说明）、GitLab（Markdown 内 Diagrams and flowcharts）、GNU Octave（octave_mermaid_js）、HackMD、MonsterWriter、Joplin、LiveBook、Slidev、Tuleap、Mermaid Flow Visual Editor、Slab、Swimm、NotesHub、Notion、Observable、Obsidian（Advanced formatting syntax）、Outline、Microsoft Loop。

GitHub 生态补充插件：Compile mermaid to image（GitHub 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 MCP（Model 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。
• Astah：Export to Mermaid（UML 导出）。
• Brackets：Mermaid Preview。
• CKEditor：CKEditor 5 Mermaid plugin。
• Draw.io：Mermaid Plugin。
• GNU Emacs：major mode 用于 .mmd 文件、Org-Mode 集成。
• GNU Nano：Nano Mermaid。
• Google docs：Mermaid plugin for google docs。
• Inkdrop：Mermaid Plugin。
• IntelliJ Idea：Mermaid Visualizer。
• Light Table：Mermaid Plugin。
• Markdown-It生态：Textual UML Parser、Mermaid Plugin、md-it-mermaid、markdown-it-mermaid-less 等多个选择。
• Podlite：=Diagram block。
• Standard Notes：Mermaid 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。
• Vim：Vim Diagram Syntax、Official Vim Syntax and ft plugin。
• Zed：zed-mermaid。

浏览器扩展：把 Mermaid 渲染带进任意网页

原文档以一张表格收录了 10 款浏览器扩展，并分别标注其覆盖 Chrome / Firefox / Opera / Edge 的情况（未标 ✅，均为第三方插件）：

博客、文档生成与静态站点

文档生成场景是 Mermaid 集成最密集的领域之一，其中带 ✅ 的代表开箱即用。

• 静态站点与框架：Docusaurus✅、Docsy Hugo Theme✅、Quarto✅、Typora✅（支持在 Markdown 中绘制）、Astro（社区博客教程）、Codedoc、Gatsby（gatsby-remark-mermaid）、Jekyll（jekyll-mermaid、jekyll-mermaid-diagrams）、VitePress（Plugin for Mermaid.js，另有 vitepress-mermaid-renderer 见 Other）、VuePress（Plugin for Mermaid.js）、Bisheng（bisheng-plugin-mermaid，见 Other）、Nextra（内置 Mermaid 指南）。
• Markdown 处理链：rehype（rehype-mermaid）、remark（remark-mermaidjs）、mdBook（mdbook-mermaid）、MkDocs（mkdocs-mermaid2-plugin、mkdocs-material）、Sphinx（sphinxcontrib-mermaid）、Type Doc（typedoc-plugin-mermaid）、JSDoc（jsdoc-mermaid）。
• 其他文档工具：Madness、ExDoc（Rendering Mermaid graphs）、Unison programming language ✅。

内容平台：博客框架与 CMS/ECM

• 博客：Hexo（hexo-filter-mermaid-diagrams、hexo-tag-mermaid、hexo-mermaid-diagrams 三款）、Nextra、WordPress（MerPRess、WP Documentation 主题）。
• CMS/ECM：ApostropheCMS（Mermaid.js 扩展）、Drupal（Mermaid Diagram Field module）、Grav CMS（Mermaid Diagrams Plugin、GitLab Markdown Adapter）、Tiki Wiki CMS Groupware（Tracker Entity Relationship Diagram）、VitePress 与 VuePress 的插件方案。

通信、Wiki 与其他工具

• 通信：Discourse（Mermaid Plugin）、Mattermost（Mermaid Plugin）、NodeBB（Mermaid Parser Plugin）、phpBB（phpbb-ext-mermaid）、Slack（Mermaid Preview）。
• Wiki：DokuWiki（ComboStrap、Mermaid Plugin）、Foswiki（MermaidPlugin）、MediaWiki（Flex Diagrams Extension、Mermaid Extension）、PmWiki（MermaidJs Cookbook）、Semantic MediaWiki（Mermaid Plugin）、TiddlyWiki（mermaid-tw5、tw5-mermaid）。
• 其他：Blazorade Mermaid（Blazor 应用渲染）、Codemia ✅（系统设计练习题）、MarkChart（macOS 预览）、mermaid-isomorphic（同构渲染）、mermaid-server（HTTP 请求生成图表）、NiceGUI ✅（Python，ui.mermaid）、Reveal.js / Reveal CK（幻灯片插件）、SchemaCrawler（数据库生成 Mermaid）、speccharts（把测试套件转成规格图）、termaid（终端里渲染为 Unicode 图形）。
• CRM/ERP：coreBOS（2019 年的 Mermaid 集成博文）。

如何向生态清单贡献你自己的集成

如果你自己开发的插件/集成希望进入上述列表，仓库内的 integrations-create.md 提供了明确的规范建议：

• 文件扩展名：支持 Mermaid 文件的应用应当使用.mermaid或.mmd扩展名；
• MIME 类型：推荐使用text/vnd.mermaid（IANA 已注册的 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 全文：

1. 优先看 ✅：在 GitHub/GitLab/Azure DevOps/Notion/Obsidian/Outline/Docusaurus 等平台中，Mermaid 是原生能力，无需插件即可在 Markdown 代码块中使用；
2. 文档写作选 Typora/Docsy/Quarto：它们开箱即用；静态站点（如 MkDocs、VitePress、Sphinx）需要搭配对应插件；
3. Confluence/Jira 等传统协作平台：需要从 Atlassian 市场挑选 Mermaid 应用；
4. 编辑器内预览：VS Code 的扩展数量最多、JetBrains 与 Vim/Emacs 亦有成熟方案；
5. 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