mermaidjs-v11

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mermaid.js v11

Overview

概述

Create text-based diagrams using Mermaid.js v11 declarative syntax. Convert code to SVG/PNG/PDF via CLI or render in browsers/markdown files.

使用Mermaid.js v11的声明式语法创建基于文本的图表。可通过CLI将代码转换为SVG/PNG/PDF格式，或在浏览器/Markdown文件中渲染。

Quick Start

快速入门

Basic Diagram Structure:

{diagram-type}
  {diagram-content}

Common Diagram Types:

```
flowchart
```
- Process flows, decision trees
```
sequenceDiagram
```
- Actor interactions, API flows
```
classDiagram
```
- OOP structures, data models
```
stateDiagram
```
- State machines, workflows
```
erDiagram
```
- Database relationships
```
gantt
```
- Project timelines
```
journey
```
- User experience flows

See

references/diagram-types.md

for all 24+ types with syntax.

基本图表结构:

{diagram-type}
  {diagram-content}

常见图表类型:

```
flowchart
```
- 流程图、决策树
```
sequenceDiagram
```
- 参与者交互、API流程
```
classDiagram
```
- 面向对象结构、数据模型
```
stateDiagram
```
- 状态机、工作流
```
erDiagram
```
- 数据库关系
```
gantt
```
- 项目时间线
```
journey
```
- 用户体验流程

查看

references/diagram-types.md

获取所有24余种图表类型的语法说明。

Creating Diagrams

创建图表

Inline Markdown Code Blocks:

markdown

```mermaid
flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]
```

Configuration via Frontmatter:

markdown

```mermaid
---
theme: dark
---
flowchart LR
    A --> B
```

Comments: Use

%%

prefix for single-line comments.

Markdown内联代码块:

markdown

```mermaid
flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]
```

通过Frontmatter配置:

markdown

```mermaid
---
theme: dark
---
flowchart LR
    A --> B
```

注释: 使用

%%

前缀添加单行注释。

CLI Usage

CLI使用方法

Convert

.mmd

files to images:

bash

undefined

将

.mmd

文件转换为图片：

bash

undefined

Installation

npm install -g @mermaid-js/mermaid-cli

Basic conversion

mmdc -i diagram.mmd -o diagram.svg

With theme and background

mmdc -i input.mmd -o output.png -t dark -b transparent

Custom styling

mmdc -i diagram.mmd --cssFile style.css -o output.svg


See `references/cli-usage.md` for Docker, batch processing, and advanced workflows.

mmdc -i diagram.mmd --cssFile style.css -o output.svg


查看`references/cli-usage.md`获取Docker、批量处理及高级工作流相关内容。

JavaScript Integration

JavaScript集成

HTML Embedding:

html

<pre class="mermaid">
  flowchart TD
    A[Client] --> B[Server]
</pre>
<script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
<script>mermaid.initialize({ startOnLoad: true });</script>

See

references/integration.md

for Node.js API and advanced integration patterns.

HTML嵌入:

html

<pre class="mermaid">
  flowchart TD
    A[Client] --> B[Server]
</pre>
<script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
<script>mermaid.initialize({ startOnLoad: true });</script>

查看

references/integration.md

获取Node.js API及高级集成模式相关内容。

Configuration & Theming

配置与主题设置

Common Options:

```
theme
```
: "default", "dark", "forest", "neutral", "base"
```
look
```
: "classic", "handDrawn"
```
fontFamily
```
: Custom font specification
```
securityLevel
```
: "strict", "loose", "antiscript"

See

references/configuration.md

for complete config options, theming, and customization.

常用选项:

```
theme
```
: "default", "dark", "forest", "neutral", "base"
```
look
```
: "classic", "handDrawn"
```
fontFamily
```
: 自定义字体设置
```
securityLevel
```
: "strict", "loose", "antiscript"

查看

references/configuration.md

获取完整的配置选项、主题设置及自定义内容。

Practical Patterns

实用模式

Load

references/examples.md

for:

Architecture diagrams
API documentation flows
Database schemas
Project timelines
State machines
User journey maps

查看

references/examples.md

获取以下内容：

架构图
API文档流程
数据库架构
项目时间线
状态机
用户旅程图

Resources

资源

```
references/diagram-types.md
```
- Syntax for all 24+ diagram types
```
references/configuration.md
```
- Config, theming, accessibility
```
references/cli-usage.md
```
- CLI commands and workflows
```
references/integration.md
```
- JavaScript API and embedding
```
references/examples.md
```
- Practical patterns and use cases

```
references/diagram-types.md
```
- 24余种图表类型的语法说明
```
references/configuration.md
```
- 配置、主题设置、无障碍功能
```
references/cli-usage.md
```
- CLI命令与工作流
```
references/integration.md
```
- JavaScript API与嵌入方式
```
references/examples.md
```
- 实用模式与使用场景