架构

相关源文件

• cypress/integration/rendering/errorDiagram.spec.js
• demos/error.html
• packages/mermaid-layout-elk/src/find-common-ancestor.ts
• packages/mermaid-layout-elk/src/render.ts
• packages/mermaid/src/Diagram.ts
• packages/mermaid/src/__mocks__/mermaidAPI.ts
• packages/mermaid/src/diagram-api/detectType.ts
• packages/mermaid/src/diagram-api/diagram-orchestration.ts
• packages/mermaid/src/diagram-api/diagramAPI.spec.ts
• packages/mermaid/src/diagram-api/diagramAPI.ts
• packages/mermaid/src/diagram-api/types.ts
• packages/mermaid/src/diagram.spec.ts
• packages/mermaid/src/diagrams/error/errorDiagram.ts
• packages/mermaid/src/diagrams/error/errorRenderer.ts
• packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
• packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
• packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
• packages/mermaid/src/mermaid.spec.ts
• packages/mermaid/src/mermaid.ts
• packages/mermaid/src/mermaidAPI.spec.ts
• packages/mermaid/src/mermaidAPI.ts
• packages/mermaid/src/rendering-util/insertElementsForSize.js
• packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
• packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js
• packages/mermaid/src/rendering-util/render.ts
• packages/mermaid/src/rendering-util/rendering-elements/clusters.js
• packages/mermaid/src/rendering-util/rendering-elements/edges.js
• packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts
• packages/mermaid/src/styles.ts
• scripts/tsc-check.ts

本文档阐述了 Mermaid 的高层系统架构，包括核心渲染管道、布局算法和图表类型系统。它涵盖了文本图表定义如何通过检测、解析、布局和渲染阶段，最终生成交互式 SVG 输出。

有关特定图表类型及其实现的更多信息，请参阅图表类型。有关开发工作流程和构建系统的详细信息，请参阅开发。

核心系统架构

Mermaid 架构遵循一个多阶段管道，将基于文本的图表定义转换为交互式 SVG 图表。该系统围绕三个主要阶段设计：检测与解析、布局计算和渲染。

高层系统流程

来源: packages/mermaid/src/mermaidAPI.ts305-474 packages/mermaid/src/Diagram.ts17-46 packages/mermaid/src/diagram-api/detectType.ts36-51

核心API组件

该系统围绕 mermaidAPI 对象构建，该对象提供了图表渲染的主要接口

来源: packages/mermaid/src/mermaidAPI.ts534-550 packages/mermaid/src/mermaid.ts442-457

图表检测与注册系统

Mermaid 使用灵活的图表检测系统，支持内置和外部图表类型。该系统维护一个检测器注册表，用于检查输入文本以确定适当的图表类型。

图表类型检测流程

来源: packages/mermaid/src/diagram-api/detectType.ts36-51 packages/mermaid/src/diagram-api/diagram-orchestration.ts33-104

图表注册架构

该系统通过 addDiagrams() 函数和外部图表注册支持图表类型的预加载和懒加载。

来源: packages/mermaid/src/diagram-api/diagram-orchestration.ts33-104 packages/mermaid/src/diagram-api/diagramAPI.ts44-70

渲染管道架构

渲染管道协调解析、布局计算和 SVG 生成。它采用基于插件的布局系统，支持多种算法。

布局算法系统

来源: packages/mermaid/src/rendering-util/render.ts47-57 packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js271-379 packages/mermaid-layout-elk/src/render.ts21-38

SVG 生成与样式

渲染系统通过一系列专门的组件生成 SVG 元素，这些组件处理节点、边、集群和样式。

来源: packages/mermaid/src/mermaidAPI.ts415-474 packages/mermaid/src/mermaidAPI.ts159-172 packages/mermaid/src/rendering-util/rendering-elements/edges.js442-647

安全架构

Mermaid 实现了具有不同安全级别和净化策略的多层安全模型。

安全级别与沙盒化

来源: packages/mermaid/src/mermaidAPI.ts33-47 packages/mermaid/src/mermaidAPI.ts212-220 packages/mermaid/src/mermaidAPI.ts452-459

配置系统架构

配置系统提供分层配置合并功能，支持全局默认值、站点特定设置和图表特定覆盖。

配置层次结构与处理

来源: packages/mermaid/src/mermaidAPI.ts53-58 packages/mermaid/src/mermaidAPI.ts479-506 packages/mermaid/src/config.js

这种架构通过其分层设计和基于插件的布局算法，为文本到图表的生成提供了灵活、可扩展的系统，同时保持了安全性和性能。