2.2 KiB
2.2 KiB
title, type, tags, sources, last_updated
| title | type | tags | sources | last_updated | |||||
|---|---|---|---|---|---|---|---|---|---|
| Mermaid | concept |
|
|
2025-12-18 |
Aliases
- Mermaid.js
- Mermaid 图表
Definition
Mermaid 是一种基于文本描述生成图表的标记语言，通过简单的代码语法描述图表结构，由 JSeqTeam 开发维护。支持 ER 图、时序图、甘特图、流程图、状态图等多种图表类型。
核心优势
- 文本可存储：图表以文本形式存储，便于 Git 版本管理
- AI 友好：大模型可以直接生成 Mermaid 代码，无需图形界面操作
- 多工具支持：飞书文档（输入
/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