From c2bd0f938e2b6789941a70d5b032489ba321fa36 Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Thu, 9 Oct 2025 15:54:07 +0800 Subject: [PATCH] docs: update en docs --- docs/en/guide/chart/mermaid.md | 231 ++++++++++++++++----------------- 1 file changed, 115 insertions(+), 116 deletions(-) diff --git a/docs/en/guide/chart/mermaid.md b/docs/en/guide/chart/mermaid.md index c5eb837f..9c0bfd1f 100644 --- a/docs/en/guide/chart/mermaid.md +++ b/docs/en/guide/chart/mermaid.md @@ -1,21 +1,21 @@ --- -title: mermaid +title: Mermaid createTime: 2025/10/08 19:34:16 icon: file-icons:mermaid permalink: /en/guide/chart/mermaid/ --- -## 概述 +## Overview -主题支持在 文章中 嵌入由 [Mermaid](https://mermaid.js.org/) 。 +The theme supports embedding diagrams generated by [Mermaid](https://mermaid.js.org/) within articles. -该功能由 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/) 提供支持。 +This feature is powered by [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/). -## 配置 +## Configuration -主题默认不启用该功能。 +This feature is not enabled by default in the theme. -你需要在你的项目中安装 [mermaid](https://mermaid.js.org/) 库。 +You need to install the [mermaid](https://mermaid.js.org/) library in your project. ::: npm-to @@ -25,7 +25,7 @@ npm install mermaid ::: -然后在 `.vuepress/config.ts` 配置文件中，启用该功能： +Then, enable the feature in your `.vuepress/config.ts` configuration file: ```ts title=".vuepress/config.ts" export default defineUserConfig({ @@ -38,21 +38,20 @@ export default defineUserConfig({ ``` ::: note -以下文档 Fork 自 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/mermaid.html), -遵循 [MIT](https://github.com/vuepress/ecosystem/blob/main/LICENSE) 许可证。 +The following documentation is forked from [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/mermaid.html) and is provided under the [MIT](https://github.com/vuepress/ecosystem/blob/main/LICENSE) license. ::: -## 语法 +## Syntax ````md ```mermaid - + ``` ```` -除了使用 mermaid 代码块，你也可以直接使用以下代码块： +In addition to using the `mermaid` code block, you can also directly use the following code block types: - class: `classDiagram` - c4c: `C4Context` @@ -70,30 +69,30 @@ export default defineUserConfig({ - timeline: `timeline` - xy: `xychart-beta` -你不需要再声明图表类型，也不需要缩进图表代码。 +You do not need to declare the diagram type again, nor do you need to indent the diagram code. -当图表支持设置标题时，你可以直接在代码块信息后添加标题: +When the diagram supports setting a title, you can add the title directly after the code block info: ````md -```sequence 代码标题 - ``` ```` -配置文档详见 [Mermaid 文档](https://mermaid.js.org/) +Refer to the [Mermaid documentation](https://mermaid.js.org/) for configuration details. -## 高级 +## Advanced Usage -你可以在 [客户端配置文件](https://vuejs.press/zh/guide/configuration.html#%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6) -中导入并使用 `defineMermaidConfig` 来自定义 Mermaid 配置: +You can import and use `defineMermaidConfig` in the +[Client Configuration File](https://vuejs.press/guide/configuration.html#client-configuration-file) to customize Mermaid settings: ```ts import { defineMermaidConfig } from '@vuepress/plugin-markdown-chart/client' import { defineClientConfig } from 'vuepress/client' defineMermaidConfig({ - // 在此设置 mermaid 选项 + // Set mermaid options here }) export default defineClientConfig({ @@ -101,83 +100,83 @@ export default defineClientConfig({ }) ``` -## 示例 +## Examples -### 流程图 +### Flowchart -**输入：** +**Input:** - + -**输出：** +**Output:** - + -### 循序图 +### Sequence Diagram -**输入：** +**Input:** - + -**输出：** +**Output:** - + -### 类图 +### Class Diagram -**输入：** +**Input:** - + -**输出：** +**Output:** - + -### 状态图 +### State Diagram -**输入：** +**Input:** - + -**输出：** +**Output:** - + -### 关系图 +### Entity Relationship Diagram -**输入：** +**Input:** - + -**输出：** +**Output:** - + -### 用户日记图 +### User Journey Diagram -**输入：** +**Input:** - + -**输出：** +**Output:** - + -### 甘特图 +### Gantt Chart -**输入：** +**Input:** -:::: details 查看代码 - +:::: details View Code + :::: -**输出：** +**Output:** - + -### 饼图 +### Pie Chart -**输入：** +**Input:** ````md ```pie @@ -188,7 +187,7 @@ title What Voldemort doesn't have? ``` ```` -**输出：** +**Output:** ```pie title What Voldemort doesn't have? @@ -197,110 +196,110 @@ title What Voldemort doesn't have? "NOSE" : 45 ``` -### Git 图表 +### Git Graph -**输入：** +**Input:** -:::: details 查看代码 - +:::: details View Code + :::: -**输出：** +**Output:** - + -### C4C 图表 +### C4 Diagram -**输入：** +**Input:** -:::: details 查看代码 - +:::: details View Code + :::: -**输出：** +**Output:** - + -### 思维导图 +### Mindmap -**输入：** +**Input:** - + -**输出：** +**Output:** - + -### 时序图 +### Timeline Diagram -**输入：** +**Input:** - + -**输出：** +**Output:** - + -### 桑基图 +### Sankey Diagram -**输入：** +**Input:** -:::: details 查看代码 - +:::: details View Code + :::: -**输出：** +**Output:** - + -### 依赖图 +### Requirement Diagram -**输入：** +**Input:** - + -**输出：** +**Output:** - + -### 象限图 +### Quadrant Chart -**输入：** +**Input:** - + -**输出：** +**Output:** - + -### XY图 +### XY Chart -**输入：** +**Input:** - + -**输出：** +**Output:** - + -### 块图 +### Block Diagram -**输入：** +**Input:** - + -**输出：** +**Output:** - + -### 复杂例子 +### Complex Example -**输入：** +**Input:** -:::: details 查看代码 - +:::: details View Code + :::: -**输出：** +**Output:** - +