菜单

概述

相关源文件

本文档全面概述了 Mermaid 存储库,这是一款基于 JavaScript 的图表工具,可将基于文本的图表定义渲染为交互式 SVG 图表。本概述涵盖了存储库结构、核心架构以及实现 Mermaid 文本到图表生成功能的关键系统。

有关特定图表类型及其实现的信息,请参阅图表类型。有关开发工作流和贡献指南,请参阅开发。有关包括集成和社区工具在内的更广泛的生态系统,请参阅生态系统

仓库目的与范围

Mermaid 是一个 JavaScript 库,可将类似 Markdown 的文本语法转换为复杂的图表。该存储库采用单体仓库(monorepo)结构,包含核心库、解析基础设施、文档系统和全面的测试套件。主要目标是使开发人员能够将图表作为代码创建和维护,从而解决随着代码库演进而图表过时的问题。

来源: README.md69-76 packages/mermaid/package.json3-4

系统架构

下图展示了 Mermaid 系统的高层架构,显示了文本输入如何流经解析、渲染和输出生成过程

核心渲染流程

核心管道通过类型检测、解析、数据库存储、API 处理以及使用可配置的布局引擎和主题进行渲染来处理文本输入。

来源: packages/mermaid/src/mermaidAPI.ts packages/mermaid/package.json79 packages/mermaid/package.json74-76

单体仓库包结构

该存储库采用单体仓库(monorepo)结构,其中主 mermaid 包包含核心库、用于解析和布局引擎的独立包以及全面的文档基础设施。

来源: packages/mermaid/package.json packages/parser/package.json packages/mermaid-example-diagram/package.json packages/mermaid/src/docs/package.json

关键系统组件

配置和类型系统

配置系统采用模式驱动的方法,并生成 TypeScript 类型

组件目的位置
config.schema.yamlJSON Schema 定义packages/mermaid/src/schemas/
config.type.ts生成的TypeScript类型packages/mermaid/src/
defaultConfig.ts默认配置值packages/mermaid/src/
mermaidAPI.ts配置处理packages/mermaid/src/

来源: packages/mermaid/package.json48-49

构建系统和工具

构建系统使用 Vite 进行打包,并带有用于 Jison 语法处理和 JSON schema 处理的自定义插件,生成 ESM 模块和 TypeScript 定义。

来源: .vite/build.ts1-141 packages/mermaid/package.json6-15

测试基础设施

该存储库采用多层次的全面测试策略

测试类型工具目的位置
单元测试Vitest核心逻辑测试src/**/*.spec.ts
端到端测试Cypress浏览器集成测试cypress/
视觉回归Applitools/Argos截图对比CI/CD流水线
类型检查TypeScript静态分析构建过程

来源: pnpm-lock.yaml214-216 pnpm-lock.yaml94-99 README.md86-94

文档系统

文档系统使用 VitePress 和 Vue.js 组件,TypeDoc 用于 API 文档,并自动生成模式文档。

来源: packages/mermaid/src/docs/package.json6-16 packages/mermaid/package.json37-44

开发工作流集成

该存储库通过全面的脚本和自动化支持多种开发工作流

核心开发命令

命令目的实现
pnpm dev开发服务器带热重载的 Vite 开发服务器
pnpm test单元测试Vitest 测试运行器
pnpm e2e端到端测试Cypress 测试执行
pnpm docs:dev文档开发VitePress 开发服务器
pnpm build生产构建带类型生成的 Vite 构建

来源: packages/mermaid/package.json34-51

CI/CD集成

该存储库集成了 GitHub Actions,用于自动化测试、构建和部署,并通过 Argos 和 Applitools 服务支持视觉回归测试,以在更改时保持图表渲染质量。

来源: README.md86-94 pnpm-lock.yaml19-21

这种架构使 Mermaid 既可以作为独立的库使用,也可以作为大型文档和开发生态系统中的集成组件,并提供用于开发、测试和部署工作流的全面工具。