Auto-sync: 2026-04-28 04:02

wiki/concepts/Mermaid.md

@@ -0,0 +1,64 @@
+---
+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]]