---
title: "Mermaid"
type: concept
tags: [图表, 文本绘图, 产品经理, 文档工具]
sources: [不会gemini的产品经理真的要被淘汰了-附保姆级prd生成指南]
last_updated: 2025-12-18
---

## Aliases
- Mermaid.js
- Mermaid 图表

## Definition

**Mermaid** 是一种基于文本描述生成图表的标记语言，通过简单的代码语法描述图表结构，由 JSeqTeam 开发维护。支持 ER 图、时序图、甘特图、流程图、状态图等多种图表类型。

## 核心优势

1. **文本可存储**：图表以文本形式存储，便于 Git 版本管理
2. **AI 友好**：大模型可以直接生成 Mermaid 代码，无需图形界面操作
3. **多工具支持**：飞书文档（输入 `/mermaid`）、Typora、GitHub README 等均支持渲染

## 常用图表类型

|| 图表类型 | 用途 | Mermaid 关键字 |
||---------|------|---------------|
|| ER图 | 描述实体、属性、数据表关系 | `erDiagram` |
|| 时序图 | 描述角色/模块间交互顺序 | `sequenceDiagram` |
|| 甘特图 | 描述项目时间计划和里程碑 | `gantt` |
|| 流程图 | 描述线性/分支流程 | `flowchart` |
|| 状态机图 | 描述状态转换逻辑 | `stateDiagram` |
|| 类图 | 描述面向对象类结构 | `classDiagram` |

## 在 PRD 工作流中的应用

```
FeatureList 定义数据结构
     ↓
要求 Gemini 生成 Mermaid ER图代码
     ↓
复制代码到飞书文档（/mermaid → 文本画图组件）
     ↓
实时预览可视化图表
```

```
工作流描述
     ↓
要求 Gemini 生成 Mermaid 时序图代码
     ↓
同样方式预览
```

## 常见问题

- **理解偏差**：大模型对图表类型名称（如"泳道图"）的理解可能与标准术语不同
- **解决方式**：提供一段能正确生成期望效果的 Mermaid 代码示例，大模型会快速学会
- **飞书报错**：Mermaid 在部分平台支持度不同，飞书支持较好

## Connections
- [[PRD生成工作流]] ← 使用工具 ← [[Mermaid]]
- [[FeatureList]] ← 协同工具 ← [[Mermaid]]
- [[14种UML图]] ← 上位概念 ← [[Mermaid]]
- [[不会gemini的产品经理真的要被淘汰了-附保姆级prd生成指南]] ← 来源 ← [[Mermaid]]