name: mermaidjs-v11 description: 使用Mermaid.js v11语法创建图表和可视化。适用于生成流程图、序列图、类图、状态图、ER图、甘特图、用户旅程图、时间线、架构图或任何24种以上的图表类型。支持JavaScript API集成、CLI渲染为SVG/PNG/PDF、主题设置、配置和可访问性功能。对文档、技术图表、项目规划、系统架构和视觉交流至关重要。

Mermaid.js v11

概述

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

快速开始

基本图表结构:

{diagram-type}
  {diagram-content}

常见图表类型:

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

查看references/diagram-types.md以获取所有24种以上类型的语法。

创建图表

内联Markdown代码块:

```mermaid
flowchart TD
    A[开始] --> B{决策}
    B -->|是| C[动作]
    B -->|否| D[结束]
```

通过Frontmatter配置:

```mermaid
---
theme: 暗黑
---
flowchart LR
    A --> B
```

注释: 使用%% 前缀进行单行注释。

CLI用法

将.mmd文件转换为图像:

# 安装
npm install -g @mermaid-js/mermaid-cli

# 基本转换
mmdc -i diagram.mmd -o diagram.svg

# 带主题和背景
mmdc -i input.mmd -o output.png -t dark -b transparent

# 自定义样式
mmdc -i diagram.mmd --cssFile style.css -o output.svg

查看references/cli-usage.md以获取Docker、批处理和高级工作流程。

JavaScript集成

HTML嵌入:

<pre class="mermaid">
  flowchart TD
    A[客户端] --> B[服务器]
</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和高级集成模式。

配置与主题

常见选项:

theme: “默认”, “暗黑”, “森林”, “中性”, “基础”
look: “经典”, “手绘”
`fontFamily": 自定义字体规范
securityLevel: “严格”, “宽松”, “反脚本”

查看references/configuration.md以获取完整的配置选项、主题和自定义。

实用模式

加载references/examples.md以获取:

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

资源

references/diagram-types.md - 所有24种以上图表类型的语法
references/configuration.md - 配置、主题、可访问性
references/cli-usage.md - CLI命令和工作流程
references/integration.md - JavaScript API和嵌入
references/examples.md - 实用模式和用例