生态系统

相关源文件

• .cspell/code-terms.txt
• .cspell/libraries.txt
• .github/lychee.toml
• docs/config/setup/README.md
• docs/ecosystem/integrations-community.md
• docs/ecosystem/mermaid-chart.md
• docs/news/announcements.md
• docs/news/blog.md
• packages/mermaid/src/diagrams/c4/c4Db.js
• packages/mermaid/src/diagrams/timeline/timelineDb.js
• packages/mermaid/src/docs/.vitepress/components/TopBar.vue
• packages/mermaid/src/docs/ecosystem/integrations-community.md
• packages/mermaid/src/docs/ecosystem/mermaid-chart.md
• packages/mermaid/src/docs/news/announcements.md
• packages/mermaid/src/docs/news/blog.md
• packages/mermaid/src/rendering-util/rendering-elements/createLabel.js
• packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.spec.ts

本页面记录了更广泛的 Mermaid 生态系统，包括官方集成、社区创建的工具以及支持该项目的文档基础设施。它涵盖了 Mermaid.js 如何与外部平台和工具集成、商业 Mermaid Chart 平台以及广泛的社区驱动集成网络。

有关 Mermaid.js 核心 API 和配置的信息，请参阅核心 API。有关贡献和开发工作流程的详细信息，请参阅开发。

官方生态系统

Mermaid Chart 平台

Mermaid Chart 平台架构

Mermaid Chart 是基于开源 Mermaid.js 库构建的官方商业平台。该平台提供了增强的图表绘制功能，同时与开源项目保持着紧密联系。

核心平台功能

• 编辑器：用于创建和编辑 Mermaid 图表的网络界面
• Mermaid AI：使用嵌入式 AI 聊天进行自然语言图表生成
• 白板：用于图表创建的虚拟协作工作区
• 实时协作：多用户编辑功能（专业版/企业版）
• 评论系统：协作式注释和反馈工具
• 演示模式：图表演示的幻灯片功能

定价层级

• 免费版：限制为三张图表
• 专业版：无限图表，带协作功能
• 企业版：完整功能集，带高级安全和管理

来源：packages/mermaid/src/docs/ecosystem/mermaid-chart.md1-58 docs/ecosystem/mermaid-chart.md1-64

社区集成生态系统

集成类别和平台

社区集成概况

平台集成矩阵

平台类型	原生支持	需要插件	值得关注的集成
Git 平台	✅ GitHub, GitLab, Gitea	-	原生代码块支持
IDE/编辑器	部分 VS Code	大多数需要插件	15+ 编辑器集成
文档	✅ Docusaurus, VitePress	部分需要插件	10+ 文档生成器
企业工具	✅ Notion, Obsidian	大多数需要插件	25+ 生产力工具
CMS 平台	有限	大多数需要插件	8+ 内容管理系统
通信	有限	大多数需要插件	5+ 聊天/论坛平台

开发者工具集成

开发者工作流集成点

社区已开发出涵盖多个开发工作流阶段的集成

编辑器集成模式

• 语法高亮：对.mmd文件的语言支持
• 实时预览：Mermaid 图表的实时渲染
• 导出功能：将图表转换为各种格式
• IntelliSense：代码补全和验证

热门编辑器扩展

• vscode-mermaid-editor：功能齐全的 VS Code 扩展
• mermaid-plugin：JetBrains IDE 支持
• vim-mermaid：Vim 语法高亮和预览
• mermaid-mode：Emacs Mermaid 文件主模式

来源：packages/mermaid/src/docs/ecosystem/integrations-community.md153-207

企业和生产力平台集成

企业平台集成架构

Atlassian 生态系统集成

• mermaid-for-confluence：官方 Confluence 集成
• mermaid-integration-for-confluence：备用 Confluence 插件
• mermaid-charts-diagrams-confluence：市场应用
• mermaid-for-jira-cloud：Jira 图表支持

知识管理平台支持

• Notion, Obsidian, Outline 的原生支持
• Slab, NotesHub 的基于插件的支持
• 集成模式通常涉及 Markdown 代码块识别

来源：packages/mermaid/src/docs/ecosystem/integrations-community.md23-81 packages/mermaid/src/docs/ecosystem/integrations-community.md120-139

文档生成生态系统

文档工具集成模式

集成实现模式

1. 原生支持：Docusaurus 和 Quarto 等平台内置 Mermaid 渲染
2. 插件架构：Jekyll、Gatsby 和 MkDocs 等工具使用专用插件
3. Markdown 处理器扩展：通过 markdown-it、remark 和 rehype 插件进行更底层的集成

热门文档集成

• docusaurus：通过@docusaurus/theme-mermaid原生支持 Mermaid
• mkdocs-mermaid2-plugin：全面的 MkDocs 集成
• vitepress-plugin-mermaid：VitePress 图表渲染
• sphinxcontrib-mermaid：Python 文档生态系统支持

来源：packages/mermaid/src/docs/ecosystem/integrations-community.md203-240

文档基础设施

VitePress 文档系统

文档生成流程

该文档系统使用 VitePress 从 Markdown 源文件生成静态文档。主要组件包括

文档结构

• 源文件位于packages/mermaid/src/docs/
• 生成输出位于docs/目录
• 源文件和输出之间的自动化同步

VitePress 组件

• TopBar.vue：带 A/B 测试的动态推广横幅系统
• Mermaid 特定样式的自定义主题
• 新闻和公告的博客集成

内容管理

• 生态系统集成目录维护
• 自动化文件生成警告
• 通过 lychee 配置进行链接验证

来源：packages/mermaid/src/docs/.vitepress/components/TopBar.vue1-154 docs/ecosystem/integrations-community.md1-6

社区集成管理

集成目录维护流程

生态系统通过以下方式维护全面的社区集成目录

目录组织

• 生产力工具：Atlassian、Microsoft、Git 平台
• LLM 集成：AI 驱动的图表生成工具
• CRM/ERP 系统：商业软件集成
• 博客平台：内容管理和发布
• 编辑器插件：开发环境支持
• 浏览器扩展：基于网络的图表查看
• 文档生成：静态站点和文档工具

集成贡献流程

1. 贡献者将条目添加到packages/mermaid/src/docs/ecosystem/integrations-community.md
2. 自动生成系统将其复制到公共文档并附带警告
3. 原生支持以 ✅ 标记表示
4. 链接包含可用的源仓库

来源：packages/mermaid/src/docs/ecosystem/integrations-community.md16-26 docs/ecosystem/integrations-community.md1-6

博客和公告系统

内容分发架构

该生态系统包括复杂的内容分发机制

动态推广系统

• 通过TopBar.vue组件变体进行 A/B 测试
• 推广不同功能的轮播标语
• UTM 营销活动追踪，用于衡量转化率
• 推广信息每 5 秒定时轮换

内容分类

• 产品公告和功能发布
• 社区集成亮点
• 技术博客文章和教程
• 资金和公司新闻

来源：packages/mermaid/src/docs/.vitepress/components/TopBar.vue9-113 packages/mermaid/src/docs/news/blog.md1-266