65 lines
2.2 KiB
Markdown
65 lines
2.2 KiB
Markdown
---
|
||
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]]
|