本文档全面概述了 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.yaml | JSON 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
该存储库集成了 GitHub Actions,用于自动化测试、构建和部署,并通过 Argos 和 Applitools 服务支持视觉回归测试,以在更改时保持图表渲染质量。
来源: README.md86-94 pnpm-lock.yaml19-21
这种架构使 Mermaid 既可以作为独立的库使用,也可以作为大型文档和开发生态系统中的集成组件,并提供用于开发、测试和部署工作流的全面工具。