Mermaid 是一款强大的基于文本的图表生成工具，支持多种图表类型，能够很好地应用于产品设计中，帮助产品经理、设计师和开发团队更直观地表达和沟通想法。
1、流程图 (Flowchart)
流程图是用图形符号描述步骤、决策及逻辑关系的可视化工具。以开始/结束框、处理步骤矩形、判断菱形等符号，通过箭头连接形成流程路径，直观展示任务顺序、分支与循环。常用于算法设计、业务流程分析、项目管理，帮助理清复杂操作逻辑，识别效率瓶颈，确保执行标准化。其核心价值在于将抽象流程具象化，提升沟通效率，支持持续改进。
- 应用场景：用于描述产品功能的工作流程、用户操作路径或系统逻辑。
- 优势：清晰地展示步骤和决策点，便于团队理解业务流程。
- 示例：用户注册流程、订单处理流程。
DeepSeek指令：
生成用户注册流程图，输出Mermaid代码。
输出代码：
graph LR
A[开始注册] --> B[输入用户名]
B --> C{用户名是否有效?}
C -->|是| D[输入密码]
C -->|否| E[提示用户名无效，重新输入]
E --> B
D --> F[输入确认密码]
F --> G{两次密码是否一致?}
G -->|是| H[输入邮箱]
G -->|否| I[提示密码不一致，重新输入]
I --> F
H --> J{邮箱格式是否正确?}
J -->|是| K[输入验证码]
J -->|否| L[提示邮箱格式错误，重新输入]
L --> H
K --> M{验证码是否正确?}
M -->|是| N[注册成功]
M -->|否| O[提示验证码错误，重新输入]
O --> K
N --> P[结束]
效果：
2、需求图（Requirement Diagram）
需求图是一种结构化工具，用于直观呈现复杂需求的层级、关联与优先级。它通过节点表示单个需求，连线展示依赖或冲突关系，辅以颜色或符号标注紧急度、来源（如用户/法规），帮助团队理清需求脉络。常用于需求分析阶段，辅助优先级排序、识别矛盾点，确保开发目标与业务战略对齐，是需求管理和跨部门协作的高效沟通载体。
- 应用场景：用于详细呈现产品需求及需求之间的关联，还能展示需求与其他文档化元素（如功能模块、用户故事等）的连接。
- 优势：通过直观的可视化形式，将复杂的需求关系清晰地展示出来，使团队成员能够快速理解需求的层次结构、依赖关系以及影响范围。
- 示例：不同类型商品的需求（如服装类、电子产品类等），以及这些需求与商品展示、购物车、支付等功能的关联。
DeepSeek指令：
根据如下需求生成Requirement Diagram，生成Mermaid代码。 不同类型商品的需求（如服装类、电子产品类等），以及这些需求与商品展示、购物车、支付等功能的关联
输出代码：
requirementDiagram
requirement "功能需求" {
id: FR
text: "电商平台核心功能需求"
risk: high
}
requirement "商品分类需求" {
id: FR1
text: "支持差异化商品类型需求"
}
requirement "服装类需求" {
id: FR11
text: "服装商品特殊需求"
}
requirement "电子产品需求" {
id: FR12
text: "电子产品特殊需求"
}
requirement "商品展示" {
id: FR2
text: "商品详情展示系统"
}
requirement "购物车" {
id: FR3
text: "购物车管理系统"
}
requirement "支付系统" {
id: FR4
text: "订单支付处理系统"
}
requirement "尺寸可视化" {
id: FR111
text: "在线试穿效果模拟与尺码推荐"
}
requirement "材质展示" {
id: FR112
text: "布料材质3D可视化展示"
}
requirement "技术参数" {
id: FR121
text: "详细技术规格参数对比表"
}
requirement "保修服务" {
id: FR122
text: "保修期计算与售后政策展示"
}
requirement "多图展示" {
id: FR21
text: "支持360度产品图片展示"
}
requirement "视频演示" {
id: FR22
text: "嵌入产品使用演示视频"
}
requirement "库存预警" {
id: FR31
text: "实时库存数量显示与预警"
}
requirement "组合优惠" {
id: FR32
text: "跨品类商品组合优惠计算"
}
requirement "分期支付" {
id: FR41
text: "支持12期免息分期付款"
}
requirement "跨境支付" {
id: FR42
text: "多币种结算与汇率转换"
}
%% "尺寸可视化" - satisfies -> "多图展示"
%% "材质展示" - satisfies -> "多图展示"
%% "技术参数" - satisfies -> "视频演示"
%% "保修服务" - refines -> "商品展示"
%% "尺寸可视化" - traces -> "库存预警"
%% "保修服务" - traces -> "支付系统"
%% "库存预警" - derives -> "分期支付"
"功能需求" - contains -> "商品分类需求"
"功能需求" - contains -> "商品展示"
"功能需求" - contains -> "购物车"
"功能需求" - contains -> "支付系统"
"商品分类需求" - contains -> "服装类需求"
"商品分类需求" - contains -> "电子产品需求"
"服装类需求" - contains -> "尺寸可视化"
"服装类需求" - contains -> "材质展示"
"电子产品需求" - contains -> "技术参数"
"电子产品需求" - contains -> "保修服务"
"商品展示" - contains -> "多图展示"
"商品展示" - contains -> "视频演示"
"购物车" - contains -> "库存预警"
"购物车" - contains -> "组合优惠"
"支付系统" - contains -> "分期支付"
"支付系统" - contains -> "跨境支付"
requirement "非功能需求" {
id: NFR
text: "系统质量属性需求"
}
requirement "性能需求" {
id: NFR1
text: "商品图片加载时间≤800ms"
}
requirement "安全需求" {
id: NFR2
text: "支付系统PCI DSS认证"
}
%% "性能需求" - verifies -> "多图展示"
%% "安全需求" - verifies -> "支付系统"
%% "安全需求" - verifies -> "分期支付"
%% "安全需求" - verifies -> "跨境支付"
"非功能需求" - contains -> "性能需求"
"非功能需求" - contains -> "安全需求"
效果：
3、用户旅程图 (User Journey Map)
用户旅程图（User Journey Map）是一种可视化工具，通过时间轴描绘用户与产品或服务互动的全流程。它划分用户阶段（如认知、使用、忠诚），标注关键接触点，分析行为路径和情感波动（如满意度、痛点），帮助设计者换位思考，优化体验流程。常用于服务设计、产品迭代，能直观识别用户需求断层，提升服务效率和品牌忠诚度，是用户中心思维的重要实践工具。
- 应用场景：用于描述用户与产品交互的全过程，包括触点、情感和痛点。
- 优势：帮助团队从用户角度理解产品体验，发现改进点。
- 示例：用户从注册到完成购买的全流程体验。
DeepSeek指令：
针对用户从注册到完成购买商品的全流程，生成用户旅程图，输出Mermaid代码。
输出代码：
journey
title 用户购物旅程图
section 注册与登录
注册账号: 5: 用户
填写注册信息: 5: 用户
邮箱验证: 3: 系统
登录账户: 4: 用户
section 商品浏览
浏览首页推荐: 5: 用户
搜索目标商品: 4: 用户
筛选商品分类: 4: 用户
查看商品详情: 5: 用户
section 购物决策
加入购物车: 4: 用户
比较同类商品: 3: 用户
查看用户评价: 5: 用户
咨询在线客服: 2: 用户
section 订单处理
进入购物车: 5: 用户
编辑商品数量: 4: 用户
选择配送方式: 4: 用户
使用优惠券: 3: 用户
section 支付流程
跳转支付页面: 5: 系统
选择支付方式: 5: 用户
输入支付信息: 4: 用户
完成支付验证: 3: 系统
section 订单完成
显示支付成功: 5: 系统
生成电子发票: 4: 系统
发送订单确认: 5: 系统
查看物流信息: 4: 用户
section 售后服务
申请退换货: 2: 用户
进行商品评价: 3: 用户
联系客服咨询: 2: 用户
查看购物历史: 4: 用户
效果：
4、思维导图 (Mindmap)
思维导图是一种可视化思维工具，由托尼·巴赞提出，通过中心主题与分支结构模拟人脑神经网络，以非线性方式呈现信息。其核心是运用关键词、图像和色彩，建立层级化或放射状的知识关联，帮助理清复杂问题的逻辑关系，激发创造力。广泛应用于学习笔记、项目规划、头脑风暴等领域，通过视觉化整合碎片信息，提升记忆效率与问题解决能力，是提升思维条理性与创新性的高效工具。
- 应用场景：用于头脑风暴、需求梳理或功能规划。
- 优势：帮助团队整理思路，快速生成和分享想法。
- 示例：产品功能模块的层级结构。
DeepSeek指令：
针对登录需求进行头脑风暴，生成思维导图，输出Mermaid代码。
输出代码：
mindmap
root((登录需求))
认证方式
传统认证
用户名+密码
邮箱+密码
第三方登录
Google登录
微信登录
Apple ID
生物识别
指纹识别
面部识别
声纹验证
无密码登录
短信验证码
邮件魔法链接
TOTP动态令牌
安全防护
二次验证
2FA双因素
MFA多因素
风险控制
异地登录检测
异常行为分析
设备指纹识别
密码策略
复杂度要求
定期强制更换
历史密码比对
加密传输
HTTPS强制
端到端加密
JWT令牌
用户体验
登录入口
全局导航栏
结账快捷入口
深度链接直达
流程优化
记住我功能
自动填充
跨设备同步
异常处理
友好错误提示
密码找回流程
账户锁定解封
界面设计
暗黑模式适配
无障碍访问
多语言支持
技术实现
认证协议
OAuth 2.0
OpenID Connect
SAML 2.0
服务架构
分布式会话管理
无状态认证
微服务鉴权
日志监控
登录成功日志
失败审计追踪
实时告警系统
性能指标
<500ms响应
99.99%可用性
百万级并发
合规要求
数据隐私
GDPR加密存储
CCPA删除权
最小权限原则
认证标准
ISO/IEC 27001
FIDO2认证
PCI DSS合规
法律义务
年龄验证
用户协议确认
电子签名
创新扩展
智能认证
行为生物识别
风险自适应认证
AI反欺诈
跨平台整合
Web3.0钱包登录
元宇宙身份互通
物联网设备认证
增值服务
登录历史可视化
安全评分系统
防护周报推送
效果：
5、桑基图（Sankey diagram）
桑基图是一种能量流可视化工具，由箭头宽度表示流量大小，直观展示系统资源分配、转化与损耗路径。通过节点连接形成动态流动效果，常用于能源效率分析、财务预算追踪或用户行为路径研究。其核心价值在于揭示关键贡献因素与损耗点，辅助决策优化，如识别供应链瓶颈或网页跳出率问题，是数据驱动分析的高效表达形式。
- 应用场景：
- 用户行为分析：在产品设计中，桑基图可用于展示用户在产品中的行为流动情况。
- 资源分配与流动：对于一些涉及资源分配的产品，如供应链管理系统、项目管理工具等，桑基图可以展示资源（如人力、物力、资金等）在不同环节或项目之间的分配和流动情况。
- 数据转换与处理：在数据处理相关的产品中，桑基图可用于展示数据从原始数据源到最终处理结果的流动和转换过程。
- 优势：
- 直观展示流动关系。
- 便于发现关键路径和瓶颈。
- 支持多维度分析。
- 示例：在一个在线教育产品中，使用桑基图分析学生的学习行为。
DeepSeek指令：
针对在线教育产品中学生的学习行为，生成桑基图，输出Mermaid代码。
输出代码：
sankey-beta
Platform_Access, Course_Selection,80
Platform_Access, Immediate_Exit, 20
Course_Selection, Video_Learning, 60
Course_Selection, Material_Review, 30
Course_Selection, Learning_Abandonment, 10
Video_Learning, Assignment_Completion, 45
Video_Learning, Assignment_Skipping, 15
Material_Review, Assignment_Completion, 20
Material_Review, Assignment_Skipping, 10
Assignment_Completion, Exam_Participation, 55
Assignment_Completion, Exam_Postponement, 10
Assignment_Skipping, Exam_Participation, 20
Assignment_Skipping, Exam_Abandonment, 5
Exam_Participation, Certification_Earned, 65
Exam_Participation, Retake_Request, 10
Exam_Postponement, Certification_Earned, 8
Exam_Postponement, Certification_Abandonment, 2
%% Supplementary flows
Certification_Earned, Course_Repurchase, 50
Certification_Earned, Learning_Completion, 25
Retake_Request, Certification_Earned, 7
Retake_Request, Certification_Abandonment, 3
效果：
