菜单

图表检测与处理

相关源文件

目的与范围

本文档解释了 Mermaid 如何从输入文本中检测图表类型并处理不同的语法格式。图表检测和处理是渲染管线中关键的早期步骤,它们决定了使用哪个解析器和渲染器来处理给定的图表定义,而语法处理则负责指令、注释和各种文本格式。

有关渲染管线整体的信息,请参阅渲染管线。有关特定图表类型的详细信息,请参阅图表类型

概述

Mermaid 支持许多不同的图表类型,每种类型都有其自身的语法和渲染逻辑。当用户提供文本定义时,Mermaid 必须先确定它属于哪种图表类型,然后才能正确地解析和渲染它。

来源:packages/mermaid/src/diagram-api/detectType.ts35-51 packages/mermaid/src/Diagram.ts17-46

检测实现

图表类型检测的核心实现在 detectType 函数中,该函数会

  1. 清理输入文本,移除 front matter、指令和注释
  2. 遍历已注册的图表检测器
  3. 返回第一个其检测器返回 true 的图表类型
  4. 如果找不到匹配的检测器,则抛出 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

图表懒加载

出于性能考虑,图表可以被懒加载

  1. 最初只注册检测器函数
  2. 当检测到图表类型时,仅在需要时加载其实现
  3. 加载器函数返回一个包含图表定义的 Promise

这种方法通过仅在图表实现实际使用时加载它们,从而减少了初始加载时间和内存使用。

来源: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 包含多种内置图表类型,每种都有自己的检测器

图表类型检测模式文件
流程图graphflowchart 开头的文本../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

图表定义的最佳实践

为确保可靠的图表类型检测

  1. 始终以适当的关键字(graphsequenceDiagram 等)开始您的图表定义
  2. 将指令语句(%%{init...}%%)与图表语法分开
  3. 将任何 YAML front matter 放在文本开头,并用 --- 正确包围

遵循这些指南有助于 Mermaid 正确识别您的图表类型。