本文档解释了 Mermaid 如何从输入文本中检测图表类型并处理不同的语法格式。图表检测和处理是渲染管线中关键的早期步骤,它们决定了使用哪个解析器和渲染器来处理给定的图表定义,而语法处理则负责指令、注释和各种文本格式。
有关渲染管线整体的信息,请参阅渲染管线。有关特定图表类型的详细信息,请参阅图表类型。
Mermaid 支持许多不同的图表类型,每种类型都有其自身的语法和渲染逻辑。当用户提供文本定义时,Mermaid 必须先确定它属于哪种图表类型,然后才能正确地解析和渲染它。
来源:packages/mermaid/src/diagram-api/detectType.ts35-51 packages/mermaid/src/Diagram.ts17-46
图表类型检测的核心实现在 detectType 函数中,该函数会
true 的图表类型UnknownDiagramError 异常每种图表类型都有一个检测器函数,该函数会检查文本并确定它是否匹配该图表的语法。
来源:packages/mermaid/src/diagram-api/detectType.ts35-51 packages/mermaid/src/diagram-api/detectType.ts11-13
检测前,文本会进行预处理
这可以确保 YAML front matter、指令(如 %%{init...}%%)和注释不会干扰检测过程。
来源:packages/mermaid/src/diagram-api/detectType.ts37-40
Mermaid 拥有一个全面的系统,用于注册内置和外部的图表类型。
内置图表通过 addDiagrams 函数在库启动时注册
图表检测器的注册顺序很重要——第一个返回 true 的将被使用。更具体的检测器应该先注册。
来源:packages/mermaid/src/diagram-api/diagram-orchestration.ts32-101 packages/mermaid/src/diagram-api/detectType.ts65-70
每个图表检测器都存储在一个注册表中
来源:packages/mermaid/src/diagram-api/detectType.ts12 packages/mermaid/src/diagram-api/types.ts94-97
Mermaid 允许通过公共 API 注册外部(第三方)图表。
可以使用 mermaid.registerExternalDiagrams() 来注册外部图表
这使得第三方开发者能够通过自定义图表类型来扩展 Mermaid。
来源:packages/mermaid/src/mermaid.ts250-266 packages/mermaid/src/diagram-api/detectType.ts66-70
出于性能考虑,图表可以被懒加载
这种方法通过仅在图表实现实际使用时加载它们,从而减少了初始加载时间和内存使用。
来源:packages/mermaid/src/Diagram.ts23-32 packages/mermaid/src/mermaid.ts250-263
图表类型检测按如下方式集成到渲染管线中
这表明图表类型检测是渲染过程中的关键第一步,它决定了哪个特定实现会处理文本输入。
来源:packages/mermaid/src/mermaidAPI.ts306-475 packages/mermaid/src/Diagram.ts17-46 packages/mermaid/src/mermaid.ts392-416
Mermaid 包含多种内置图表类型,每种都有自己的检测器
| 图表类型 | 检测模式 | 文件 |
|---|---|---|
| 流程图 | 以 graph 或 flowchart 开头的文本 | ../diagrams/flowchart/flowDetector.js |
| 流程图 v2 | 匹配更特定流程图模式的文本 | ../diagrams/flowchart/flowDetector-v2.js |
| 顺序图 | 以 sequenceDiagram 开头的文本 | ../diagrams/sequence/sequenceDetector.js |
| 类图 | 以 classDiagram 开头的文本 | ../diagrams/class/classDetector.js |
| 状态图 | 以 stateDiagram 开头的文本 | ../diagrams/state/stateDetector.js |
| 实体关系图 | 以 erDiagram 开头的文本 | ../diagrams/er/erDetector.js |
| 用户旅程 | 以 journey 开头的文本 | ../diagrams/user-journey/journeyDetector.js |
| 甘特图 | 以 gantt 开头的文本 | ../diagrams/gantt/ganttDetector.js |
| 饼图 | 以 pie 开头的文本 | ../diagrams/pie/pieDetector.js |
| ... 以及更多 |
检测器注册顺序很重要——更具体的检测器会先于更通用的检测器注册。
来源:packages/mermaid/src/diagram-api/diagram-orchestration.ts72-100
如果没有任何图表类型匹配输入文本,Mermaid 会抛出 UnknownDiagramError 异常
此异常随后会被客户端代码捕获和处理,客户端代码可以向用户显示适当的错误消息。
来源:packages/mermaid/src/diagram-api/detectType.ts47-50
Mermaid 还注册了一个特殊的 error 图表类型,用于在图表解析失败时显示错误消息
这使得整个系统都能保持一致的错误处理机制。
来源:packages/mermaid/src/diagram-api/diagram-orchestration.ts39-41
为确保可靠的图表类型检测
graph、sequenceDiagram 等)开始您的图表定义%%{init...}%%)与图表语法分开--- 正确包围遵循这些指南有助于 Mermaid 正确识别您的图表类型。