Mermaid 图表生成

什么是 Mermaid？

Mermaid 是一种基于文本的图表描述语言，可以用简单的语法生成流程图、时序图、类图等。配合 AI，你可以快速将代码结构可视化。

Common Diagram Types

1. Entity Relationship Diagrams

适合数据库设计和数据模型：

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    PRODUCT ||--o{ LINE-ITEM : includes
    CUSTOMER {
        string name
        string email
    }
    ORDER {
        int orderNumber
        date created
    }

2. Flow Charts

适合流程和逻辑流：

flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Process]
    B -->|No| D[End]
    C --> E{Another Decision}
    E -->|Option 1| F[Action 1]
    E -->|Option 2| G[Action 2]
    F --> D
    G --> D

3. Sequence Diagrams

适合交互流程：

sequenceDiagram
    participant Client
    participant Server
    participant Database

    Client->>Server: HTTP Request
    Server->>Database: Query
    Database-->>Server: Result
    Server-->>Client: JSON Response

4. Class Diagrams

适合面向对象设计：

classDiagram
    class Animal {
        +name: string
        +age: int
        +makeSound()
    }
    class Dog {
        +breed: string
        +bark()
    }
    class Cat {
        +color: string
        +meow()
    }
    Animal <|-- Dog
    Animal <|-- Cat

Process for Generating Diagrams

1. Analyze source files (SQL, code, docs)
2. Extract entities and relationships
3. Generate appropriate diagram type
4. Include relevant properties/methods
5. Validate syntax with mermaid compiler
6. Save to specified location

Validation

npx -p @mermaid-js/mermaid-cli mmdc -i <input>.md -o test.md

Best Practices

• Keep diagrams focused and readable
• Use consistent naming conventions
• Group related entities
• Add labels to relationships
• Include cardinality where relevant
• Use subgraphs for organization
• Add styling for clarity

让 AI 生成图表

在 Cursor 或 Claude Code 中，你可以这样请求：

请分析 src/models/ 目录下的所有模型文件，
生成一个 Mermaid ER 图表，展示实体之间的关系。

AI 会：

1. 读取模型文件
2. 分析字段和关系
3. 生成 Mermaid 语法
4. 输出可渲染的图表代码

在文档中使用

大多数 Markdown 渲染器（GitHub、GitLab、Notion 等）都支持 Mermaid。只需在代码块中指定 mermaid 语言：

```mermaid
flowchart LR
    A --> B --> C
```

高级样式

flowchart TD
    subgraph Frontend
        A[React App]
        B[State Management]
    end

    subgraph Backend
        C[API Server]
        D[Database]
    end

    A --> C
    B --> A
    C --> D

    style A fill:#f9f,stroke:#333
    style C fill:#bbf,stroke:#333

下一步

学习 任务实施方法论 来系统化地规划和执行任务。