本文档介绍了使用 Mermaid.js 代码库进行开发的安装和设置过程。它包括先决条件、仓库设置、开发环境配置以及为贡献者和维护者提供的基本工作流程指南。
有关如何在应用程序中使用 Mermaid 的信息，请参阅 mermaid.js.org 上的官方文档。有关整体架构的详细信息，请参阅架构。有关包结构的详细信息，请参阅包结构。
Mermaid 使用现代 JavaScript 开发技术栈，并有特定的工具要求
| 要求 | 版本 | 目的 |
|---|---|---|
| Node.js | 最新 LTS | JavaScript 运行时 |
| pnpm | 10.4.1+ | monorepo 的包管理器 |
| Git | 最新版 | 版本控制 |
该仓库通过 packageManager 字段在 package.json7 中强制使用 pnpm。由于 monorepo 工作区配置，不支持 npm 或 yarn 等其他包管理器。
Mermaid 被组织为包含多个包和开发工具的 monorepo
该仓库使用 pnpm workspaces 管理跨包的依赖项。主要的 mermaid 包位于 packages/mermaid/ 中，包含核心库代码。
来源：package.json1-8 README.md1-6
此命令使用锁文件和工作区配置安装整个 monorepo 的所有依赖项。
构建过程运行 package.json18 中定义的两个主要步骤
pnpm build:esbuild - 编译 JavaScript 包pnpm build:types - 生成 TypeScript 声明文件启动开发服务器以进行实时重载和测试
这将运行 .esbuild/server.ts 中定义的基于 esbuild 的开发服务器。也可以使用基于 Vite 的替代服务器。
| 命令 | 目的 | 配置 |
|---|---|---|
pnpm dev | 开发服务器 | .esbuild/server.ts |
pnpm dev:vite | 备用开发服务器 | .vite/server.ts |
pnpm build | 生产构建 | .esbuild/build.ts |
pnpm test | 单元测试 + 代码检查 | Vitest + ESLint |
pnpm e2e | 端到端测试 | Cypress |
构建系统使用 esbuild 进行快速编译，并支持多种输出格式
构建系统通过以下几个文件进行配置
Mermaid 采用包含多个测试框架的全面测试策略
| 命令 | 框架 | 目的 |
|---|---|---|
pnpm test | Vitest + ESLint | 单元测试和代码检查 |
pnpm test:watch | Vitest | 开发模式下的监听模式 |
pnpm test:coverage | Vitest | 覆盖率报告 |
pnpm e2e | Cypress | 端到端测试 |
pnpm cypress:open | Cypress | 交互式测试运行器 |
pnpm lint | ESLint + Prettier | 代码质量检查 |
该仓库使用 Husky 进行 Git 钩子，并使用 lint-staged 进行预提交验证
克隆并安装依赖项后，运行设置命令
此命令在 package.json46 中定义，用于设置 Husky 钩子并运行初始构建，以确保一切正常运行。
开发设置的关键配置文件
| 文件 | 目的 | 框架 |
|---|---|---|
package.json | 主包配置 | npm/pnpm |
tsconfig.json | TypeScript 配置 | TypeScript |
vitest.config.ts | 单元测试配置 | Vitest |
cypress.config.js | 端到端测试配置 | Cypress |
eslint.config.js | 代码检查规则 | ESLint |
.prettierrc | 代码格式化 | Prettier |
开发环境现已准备就绪，可以为 Mermaid.js 做出贡献。有关详细的贡献指南，请参阅贡献指南。