社区集成

相关源文件

• .cspell/code-terms.txt
• .cspell/libraries.txt
• .github/ISSUE_TEMPLATE/bug_report.yml
• .github/ISSUE_TEMPLATE/config.yml
• .github/ISSUE_TEMPLATE/diagram_proposal.yml
• .github/ISSUE_TEMPLATE/syntax_proposal.yml
• .github/ISSUE_TEMPLATE/theme_proposal.yml
• .github/lychee.toml
• README.md
• README.zh-CN.md
• docs/ecosystem/integrations-community.md
• docs/ecosystem/integrations-create.md
• docs/ecosystem/mermaid-chart.md
• packages/mermaid/src/diagrams/c4/c4Db.js
• packages/mermaid/src/diagrams/timeline/timelineDb.js
• packages/mermaid/src/docs/.vitepress/components/HomePage.vue
• packages/mermaid/src/docs/ecosystem/integrations-community.md
• packages/mermaid/src/docs/ecosystem/integrations-create.md
• packages/mermaid/src/docs/ecosystem/mermaid-chart.md
• packages/mermaid/src/rendering-util/rendering-elements/createLabel.js
• packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.spec.ts

本文档全面介绍了社区驱动的 Mermaid 集成、其技术架构以及围绕 Mermaid.js 库发展起来的生态系统。这涵盖了将 Mermaid 扩展到各种平台和工具的第三方插件、扩展和集成。

有关官方 Mermaid Chart 平台的信息，请参阅Mermaid Chart。有关创建新集成、开发工作流程和贡献指南的详细信息，请参阅贡献指南。

社区生态系统概览

Mermaid 社区创建了一个广泛的集成生态系统，涵盖生产力工具、内容管理系统、开发环境和文档平台。这些集成利用核心 Mermaid API 将图表功能引入不同的软件环境。

来源：packages/mermaid/src/docs/ecosystem/integrations-community.md1-270 README.md80-83

集成架构模式

社区集成通常在与 Mermaid 库集成时遵循以下几种架构模式之一

客户端集成模式

服务器端生成模式

来源：packages/mermaid/src/mermaidAPI.ts README.md436-441

集成类别

生产力与协作工具

最大一类集成侧重于团队协作进行文档和项目规划的生产力平台

平台	集成类型	原生支持
GitHub	代码块	✅
GitLab	Markdown 渲染	✅
Azure DevOps	Wiki 页面	✅
Notion	块嵌入	✅
Obsidian	插件系统	✅
Confluence	应用商店应用	插件

Atlassian 生态系统：Atlassian 市场托管了多个 Mermaid 集成，包括 Mermaid for Confluence、Mermaid Integration for Confluence 和 Mermaid Charts & Diagrams for Jira。

来源：packages/mermaid/src/docs/ecosystem/integrations-community.md25-75

开发环境集成

来源：packages/mermaid/src/docs/ecosystem/integrations-community.md187-206

文档生成系统

文档平台通过插件或内置支持集成 Mermaid

• MkDocs：mkdocs-mermaid2-plugin 和内置图表支持的 mkdocs-material
• Sphinx：sphinxcontrib-mermaid 扩展
• Jekyll：jekyll-mermaid gem
• Docusaurus：原生 mermaid 图表支持 ✅
• VitePress：vitepress-plugin-mermaid

来源：packages/mermaid/src/docs/ecosystem/integrations-community.md221-234

浏览器扩展

浏览器扩展允许 Mermaid 在没有原生支持的 Web 环境中进行渲染

扩展	Chrome	Firefox	Opera	Edge
Markdown 图表	✅	✅	✅	✅
GitHub + Mermaid	-	✅	-	-
Mermaid Previewer	✅	-	-	-

来源：packages/mermaid/src/docs/ecosystem/integrations-community.md238-254

技术集成要求

文件扩展名和 MIME 类型

集成应遵循 Mermaid 内容的标准约定

• 文件扩展名：.mermaid 或 .mmd
• MIME 类型：text/vnd.mermaid（待 IANA 承认）

配置集成

许多集成通过 MermaidConfig 接口利用 Mermaid 配置系统

来源：packages/mermaid/src/docs/ecosystem/integrations-create.md7-16 packages/mermaid/src/config.type.ts packages/mermaid/src/defaultConfig.ts

集成开发模式

插件架构示例

许多平台使用包装核心 mermaidAPI 的插件架构

安全考量

集成必须处理核心文档中提到的安全隐患。antiscript 安全级别和沙盒 iframe 渲染对于接受用户生成内容的平台尤其重要。

来源：README.md448-455 packages/mermaid/src/mermaidAPI.ts

添加新集成

社区贡献流程

新集成可以通过以下流程添加到社区列表

1. 开发：按照 integrations-create.md 中的建议创建集成
2. 文档：准备集成文档
3. 提交：发起拉取请求，将集成添加到社区列表
4. 展示：在 Discord 的 #showcase 频道分享集成

集成类别

社区维护以下类别的集成

• 生产力工具（GitHub、GitLab、Notion 等）
• LLM 集成（AI 驱动的图表生成）
• CRM/ERP 系统
• 博客平台
• 内容管理系统
• 通讯平台
• Wiki 系统
• 编辑器插件
• 文档生成工具
• 浏览器扩展

来源：packages/mermaid/src/docs/ecosystem/integrations-create.md24-26 packages/mermaid/src/docs/ecosystem/integrations-community.md17-268