mermaid-diagram-specialist

# Mermaid 图表专家 ## 概述 **目的**：精通为文档、架构可视化和流程映射创建全面的 Mermaid 图表。 **分类**：技术 **主要用户**：技术文档工程师、架构验证者、产品技术人员、技术主管 ## 何时使用此技能 - 创建架构文档 - 可视化工作流和流程 - 记录数据模型 (ERD) - 解释时序流程 - 创建状态机 - 记录组件关系 - 创建决策树 - 可视化用户旅程 ## 前置条件 **必需：** - 理解需要记录的系统/流程 - 能够访问技术规范 - 了解所需的图表类型 **可选：** - 用于保持一致性的设计系统颜色 - 可供参考的现有文档 ## 输入 **技能所需内容：** - 流程/系统描述 - 实体和关系（用于 ERD） - 组件交互（用于时序图） - 架构层级（用于 C4 图） - 状态和转换（用于状态图） ## 工作流 ### 第 1 步：选择图表类型 **目标**：根据需求选择合适的图表类型 **可用图表类型：** 1. **流程图 (Flowchart)**：决策流、算法、流程 2. **时序图 (Sequence Diagram)**：API 交互、消息流 3. **ERD**：数据库模式、实体关系 4. **类图 (Class Diagram)**：面向对象设计 5. **状态图 (State Diagram)**：状态机、生命周期 6. **甘特图 (Gantt Chart)**：项目时间线、进度表 7. **C4 图 (C4 Diagram)**：不同层级的架构 8. **饼图/柱状图 (Pie/Bar Charts)**：数据可视化 9. **Git 图 (Git Graph)**：版本控制流 10. **用户旅程 (User Journey)**：用户体验流程 **决策矩阵：** - 带有决策的流程 → **流程图** - API/系统交互 → **时序图** - 数据库结构 → **ERD** - 系统架构 → **C4 图** - 对象关系 → **类图** - 状态转换 → **状态图** - 项目时间线 → **甘特图** **验证：** - [ ] 图表类型与内容匹配 - [ ] 复杂度适中 - [ ] 已考虑受众 - [ ] 目的明确 **输出**：选定的图表类型 ### 第 2 步：创建流程图 **目标**：创建流程和决策流图表 **语法：** mermaid flowchart TD Start([开始]) --> Input[/用户输入/] Input --> Validate{有效?} Validate -->|是| Process[处理数据] Validate -->|否| Error[显示错误] Error --> Input Process --> Save[(保存到数据库)] Save -->