docs: update en docs
This commit is contained in:
pengzhanbo
parent
385059f214
commit
c2bd0f938e
@ -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 代码 -->
|
||||
<!-- Place mermaid code here -->
|
||||
|
||||
```
|
||||
````
|
||||
|
||||
除了使用 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 代码标题
|
||||
<!-- 顺序图代码内容
|
||||
```sequence Diagram Title
|
||||
<!-- Sequence diagram code
|
||||
... -->
|
||||
```
|
||||
````
|
||||
|
||||
配置文档详见 [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:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-1.snippet.md -->
|
||||
<!-- @include: ../../../snippet/mermaid-1.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
**Output:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-1.snippet.md{2-20} -->
|
||||
<!-- @include: ../../../snippet/mermaid-1.snippet.md{2-20} -->
|
||||
|
||||
### 循序图
|
||||
### Sequence Diagram
|
||||
|
||||
**输入：**
|
||||
**Input:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-2.snippet.md -->
|
||||
<!-- @include: ../../../snippet/mermaid-2.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
**Output:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-2.snippet.md{2-11} -->
|
||||
<!-- @include: ../../../snippet/mermaid-2.snippet.md{2-11} -->
|
||||
|
||||
### 类图
|
||||
### Class Diagram
|
||||
|
||||
**输入：**
|
||||
**Input:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-3.snippet.md -->
|
||||
<!-- @include: ../../../snippet/mermaid-3.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
**Output:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-3.snippet.md{2-25} -->
|
||||
<!-- @include: ../../../snippet/mermaid-3.snippet.md{2-25} -->
|
||||
|
||||
### 状态图
|
||||
### State Diagram
|
||||
|
||||
**输入：**
|
||||
**Input:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-4.snippet.md -->
|
||||
<!-- @include: ../../../snippet/mermaid-4.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
**Output:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-4.snippet.md{2-9} -->
|
||||
<!-- @include: ../../../snippet/mermaid-4.snippet.md{2-9} -->
|
||||
|
||||
### 关系图
|
||||
### Entity Relationship Diagram
|
||||
|
||||
**输入：**
|
||||
**Input:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-5.snippet.md -->
|
||||
<!-- @include: ../../../snippet/mermaid-5.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
**Output:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-5.snippet.md{2-15} -->
|
||||
<!-- @include: ../../../snippet/mermaid-5.snippet.md{2-15} -->
|
||||
|
||||
### 用户日记图
|
||||
### User Journey Diagram
|
||||
|
||||
**输入：**
|
||||
**Input:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-6.snippet.md -->
|
||||
<!-- @include: ../../../snippet/mermaid-6.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
**Output:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-6.snippet.md{2-11} -->
|
||||
<!-- @include: ../../../snippet/mermaid-6.snippet.md{2-11} -->
|
||||
|
||||
### 甘特图
|
||||
### Gantt Chart
|
||||
|
||||
**输入：**
|
||||
**Input:**
|
||||
|
||||
:::: details 查看代码
|
||||
<!-- @include: ../../snippet/mermaid-7.snippet.md -->
|
||||
:::: details View Code
|
||||
<!-- @include: ../../../snippet/mermaid-7.snippet.md -->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
**Output:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-7.snippet.md{2-31} -->
|
||||
<!-- @include: ../../../snippet/mermaid-7.snippet.md{2-31} -->
|
||||
|
||||
### 饼图
|
||||
### 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 查看代码
|
||||
<!-- @include: ../../snippet/mermaid-8.snippet.md-->
|
||||
:::: details View Code
|
||||
<!-- @include: ../../../snippet/mermaid-8.snippet.md-->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
**Output:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-8.snippet.md{2-44} -->
|
||||
<!-- @include: ../../../snippet/mermaid-8.snippet.md{2-44} -->
|
||||
|
||||
### C4C 图表
|
||||
### C4 Diagram
|
||||
|
||||
**输入：**
|
||||
**Input:**
|
||||
|
||||
:::: details 查看代码
|
||||
<!-- @include: ../../snippet/mermaid-9.snippet.md -->
|
||||
:::: details View Code
|
||||
<!-- @include: ../../../snippet/mermaid-9.snippet.md -->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
**Output:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-9.snippet.md{2-34} -->
|
||||
<!-- @include: ../../../snippet/mermaid-9.snippet.md{2-34} -->
|
||||
|
||||
### 思维导图
|
||||
### Mindmap
|
||||
|
||||
**输入：**
|
||||
**Input:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-10.snippet.md -->
|
||||
<!-- @include: ../../../snippet/mermaid-10.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
**Output:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-10.snippet.md{2-19} -->
|
||||
<!-- @include: ../../../snippet/mermaid-10.snippet.md{2-19} -->
|
||||
|
||||
### 时序图
|
||||
### Timeline Diagram
|
||||
|
||||
**输入：**
|
||||
**Input:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-11.snippet.md -->
|
||||
<!-- @include: ../../../snippet/mermaid-11.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
**Output:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-11.snippet.md{2-11} -->
|
||||
<!-- @include: ../../../snippet/mermaid-11.snippet.md{2-11} -->
|
||||
|
||||
### 桑基图
|
||||
### Sankey Diagram
|
||||
|
||||
**输入：**
|
||||
**Input:**
|
||||
|
||||
:::: details 查看代码
|
||||
<!-- @include: ../../snippet/mermaid-12.snippet.md -->
|
||||
:::: details View Code
|
||||
<!-- @include: ../../../snippet/mermaid-12.snippet.md -->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
**Output:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-12.snippet.md{2-71} -->
|
||||
<!-- @include: ../../../snippet/mermaid-12.snippet.md{2-71} -->
|
||||
|
||||
### 依赖图
|
||||
### Requirement Diagram
|
||||
|
||||
**输入：**
|
||||
**Input:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-13.snippet.md -->
|
||||
<!-- @include: ../../../snippet/mermaid-13.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
**Output:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-13.snippet.md{2-15} -->
|
||||
<!-- @include: ../../../snippet/mermaid-13.snippet.md{2-15} -->
|
||||
|
||||
### 象限图
|
||||
### Quadrant Chart
|
||||
|
||||
**输入：**
|
||||
**Input:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-14.snippet.md -->
|
||||
<!-- @include: ../../../snippet/mermaid-14.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
**Output:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-14.snippet.md{2-16} -->
|
||||
<!-- @include: ../../../snippet/mermaid-14.snippet.md{2-16} -->
|
||||
|
||||
### XY图
|
||||
### XY Chart
|
||||
|
||||
**输入：**
|
||||
**Input:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-15.snippet.md -->
|
||||
<!-- @include: ../../../snippet/mermaid-15.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
**Output:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-15.snippet.md{2-8} -->
|
||||
<!-- @include: ../../../snippet/mermaid-15.snippet.md{2-8} -->
|
||||
|
||||
### 块图
|
||||
### Block Diagram
|
||||
|
||||
**输入：**
|
||||
**Input:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-16.snippet.md -->
|
||||
<!-- @include: ../../../snippet/mermaid-16.snippet.md -->
|
||||
|
||||
**输出：**
|
||||
**Output:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-16.snippet.md{2-12} -->
|
||||
<!-- @include: ../../../snippet/mermaid-16.snippet.md{2-12} -->
|
||||
|
||||
### 复杂例子
|
||||
### Complex Example
|
||||
|
||||
**输入：**
|
||||
**Input:**
|
||||
|
||||
:::: details 查看代码
|
||||
<!-- @include: ../../snippet/mermaid-17.snippet.md -->
|
||||
:::: details View Code
|
||||
<!-- @include: ../../../snippet/mermaid-17.snippet.md -->
|
||||
::::
|
||||
|
||||
**输出：**
|
||||
**Output:**
|
||||
|
||||
<!-- @include: ../../snippet/mermaid-17.snippet.md{2-24} -->
|
||||
<!-- @include: ../../../snippet/mermaid-17.snippet.md{2-24} -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user