Boost Diagram Creation with DeepSeek: Generate Mermaid Flowcharts, Sequence & Class Diagrams

1 DeepSeek + Mermaid

DeepSeek is an open‑source transformer‑based large language model that can understand natural language and generate high‑quality text. Mermaid is a JavaScript library that uses a Markdown‑like syntax to generate charts from text, often replacing traditional tools such as Visio, Draw.io, ExcaliDraw, or PlantUML.

1.1 Advantages over traditional tools

Collaboration: Text + version control (Git) vs. manual drag‑and‑drop with file sharing.

Learning cost: Low (Markdown‑like syntax) vs. need to master graphical UI.

Cross‑platform: Works in any text editor on any platform vs. depends on desktop software.

Automation support: Can be scripted to generate charts in bulk vs. manual layout adjustments.

1.2 Getting started and resources

Quick try: use the Mermaid Live Editor (https://mermaid.live/).

Official documentation: Mermaid guide (https://mermaid.js.org/intro/).

Now we will let DeepSeek generate diagram source code for us.

2 Generating a flowchart

2.1 Prompt

Prompt: “Please generate a flowchart describing the complete process from user registration to login, and output it in Mermaid format.”

2.2 Mermaid source for the flowchart

<code>flowchart TD
    A[开始] --> B{选择操作}
    B -->|登录| C[输入邮箱/密码]
    B -->|注册| D[输入注册邮箱]

    %% 登录流程
    C --> E[验证邮箱格式]
    E -->|无效| F[显示邮箱错误]
    E -->|有效| G[验证密码]
    G -->|错误| H[显示密码错误]
    G -->|正确| I[进入主页]

    %% 注册流程
    D --> J[验证邮箱格式]
    J -->|无效| K[显示邮箱错误]
    J -->|有效| L[检查邮箱是否已存在]
    L -->|已存在| M[显示邮箱已注册]
    L -->|不存在| N[输入密码]
    N --> O[确认密码]
    O -->|不匹配| P[显示密码不匹配]
    O -->|匹配| Q[创建账户]
    Q --> R[显示注册成功]

    %% 公共路径
    F --> C
    H --> C
    K --> D
    M --> D
    P --> N</code>

2.3 Export to Draw.io

Copy the Mermaid source and paste it into the Draw.io tool.

3 Generating a sequence diagram

3.1 Prompt

Prompt: “Please generate a sequence diagram describing the complete process from user registration to login, and output it in Mermaid format.”

<code>sequenceDiagram
    actor 用户 as 用户
    participant 前端 as 前端界面
    participant 后端 as 后端服务器
    participant 数据库 as 数据库

    %% 登录流程
    用户->>前端: 输入邮箱/密码
    前端->>后端: POST /login {email, password}
    后端->>后端: 验证邮箱格式
    alt 邮箱格式无效
        后端-->>前端: 返回400错误(邮箱格式错误)
        前端-->>用户: 显示错误提示
    else 邮箱格式有效
        后端->>数据库: SELECT 用户 WHERE email=?
        数据库-->>后端: 返回用户数据
        alt 用户不存在
            后端-->>前端: 返回404错误(用户未注册)
            前端-->>用户: 显示错误提示
        else 密码验证失败
            后端-->>前端: 返回401错误(密码错误)
            前端-->>用户: 显示错误提示
        else 验证成功
            后端-->>前端: 返回200成功 + JWT令牌
            前端-->>用户: 跳转至主页
        end
    end

    %% 注册流程
    用户->>前端: 输入注册邮箱
    前端->>后端: POST /check-email {email}
    后端->>后端: 验证邮箱格式
    alt 邮箱格式无效
        后端-->>前端: 返回400错误(邮箱格式错误)
        前端-->>用户: 显示错误提示
    else 邮箱格式有效
        后端->>数据库: SELECT 用户 WHERE email=?
        数据库-->>后端: 返回查询结果
        alt 邮箱已存在
            后端-->>前端: 返回409错误(邮箱已注册)
            前端-->>用户: 显示错误提示
        else 允许注册
            用户->>前端: 输入密码/确认密码
            前端->>后端: POST /register {email, password}
            后端->>数据库: INSERT 新用户记录
            数据库-->>后端: 返回创建结果
            后端-->>前端: 返回201成功
            前端-->>用户: 显示注册成功
        end
    end</code>

3.2 Export to Draw.io

Paste the Mermaid source into Draw.io.

4 Generating a class diagram

4.1 Prompt

Prompt: “Please generate a class diagram that includes all classes used from user registration to login, and output it in Mermaid format.”

4.2 Mermaid source for the class diagram

<code>classDiagram
    %% 用户实体类
    class User {
        +String id
        +String email
        +String passwordHash
        +DateTime createdAt
        +Boolean isActive
        +Boolean validatePassword(input: String): Boolean
    }

    %% 认证控制器（处理HTTP请求）
    class AuthController {
        +register(request: RegisterRequest): ResponseEntity
        +login(request: LoginRequest): ResponseEntity
        +handleValidationErrors(): ErrorResponse
    }

    %% 用户服务（业务逻辑）
    class UserService {
        +registerUser(email: String, password: String): User
        +authenticateUser(email: String, password: String): User
        +generateAccessToken(user: User): String
    }
    ...</code>

4.3 Export to Draw.io

Paste the Mermaid source into Draw.io.

5 Pie & Bar Charts

Examples of pie and bar charts generated with Mermaid.

6 Summary

This article demonstrates how DeepSeek can assist developers in automatically generating Mermaid code for flowcharts, sequence diagrams, class diagrams, and other visualizations, highlighting the efficiency gains of AI‑assisted diagramming while reminding readers to review generated code for security and correctness.