Carbon Note Logo

Carbon Note 核心学堂 Carbon Note Academy

系统且严谨的排版与图表工程技术指南 Professional Markup and Chart Engineering Guide
Markdown 专栏 Markdown Articles Mermaid 专栏 Mermaid Diagrams LaTeX 专栏 LaTeX Formulas
返回工作区 Back to Workspace
2026-05-10 | 预计阅读：8 分钟 Read Time: 8 min read | mermaid

实战：绘制企业级用户登录架构图

在设计安全可靠的企业级应用时，用户登录与权限鉴权（OAuth2 / JWT）是最容易遭受攻击和出现逻辑漏洞的环节。仅通过文字描述这些步骤不仅低效，还容易让前后台研发产生对接偏差。本实战教程将教您利用 Mermaid 编写一个包含密码加密、双因子校验与异常回滚的完整企业级登录鉴权交互时序图。

一、企业登录全链路时序源码

下面是标准的鉴权架构图，您可直接复制到 Carbon Note 编辑器中实时编译修改：

sequenceDiagram
    autonumber
    actor User as 平台端用户
    participant App as 前端应用 (Client)
    participant Auth as 鉴权微服务 (Auth)
    participant DB as 安全数据库 (MySQL)

    User->>App: 1. 输入邮箱 & 密码并点击登录
    activate App
    Note over App: 前端执行基础格式校验
    App->>Auth: 2. 传输哈希加密凭证 (POST /api/login)
    activate Auth
    Auth->>DB: 3. 查询用户哈希及盐值 (Salt)
    activate DB
    DB-->>Auth: 4. 返回完整凭证记录
    deactivate DB
    
    alt 密码校验匹配成功
        Auth->>Auth: 5. 签发 JWT 加密凭证 (Token)
        Auth-->>App: 6. 状态 200: 下发 JSON Web Token
        App->>User: 7. 引导至用户工作区主页
    else 密码验证失败
        Auth-->>App: 8. 状态 401: 登录失败凭证有误
        App->>User: 9. 界面红字提示密码错误并解锁重试
    end
    deactivate Auth
    deactivate App

登录鉴权架构时序图关键点深度解析： 在这套企业级鉴权交互图表中，我们首先利用 sequenceDiagram 与 autonumber 建立了一个干净、自增步骤序号的时序大纲。为了提升阅读体验，我们使用了 actor 代表最终用户，participant 定义前端和后台服务。 最核心的逻辑集中在 alt ... else ... end 条件分支语句。这一语法非常完美地在时序图上隔开两个完全不同的逻辑路线——正常登录（密码验证成功）与异常捕获（状态 401 并红字提示）。在实际的系统设计交流中，用这一分支图能确保前后端对异常流有一致的捕获机制。另外，Note over App 指令在前端客户端生命线上方叠加了一层浅色的文字公告板，专门用来强调说明在发出网络请求前必须先进行前端基础校验。

二、常见问题与避坑指南（FAQ）

  1. 问题：条件分支 alt 语句编译报错，提示 Unexpected end of file？
    • 解决方法：请严格检查您的条件分支缩进与关闭指令。每一个 alt 或 opt 条件块，都必须在其对应的最下方以 end 指令闭合。如果嵌套了多层条件块，每一个层级都必须有自己独立的 end。
  2. 问题：时序图中的备注框 Note 太宽，遮挡住了相邻的生命线调用箭头？
    • 解决方法：您可以将 Note over App, Auth（跨多实体的备注框）缩小为仅在单侧显示的备注，如 Note left of Auth 或 Note right of DB，这能极大地释放中间的纵向空间，让连线和箭头清晰可辨。

Practice: Building Enterprise User Authentication Sequence

When designing secure applications, authenticating users (via OAuth2 or JWT) represents a critical design phase. Relying on simple text checklists is risky. This tutorial utilizes Mermaid to code an end-to-end user login authentication sequence with conditional exceptions.

1. Enterprise Auth Sequence Blueprint

Copy this high-concurrency authentication sequence into your live canvas to compile and customize it:

sequenceDiagram
    autonumber
    actor User as Client User
    participant App as Frontend Client
    participant Auth as Auth Microservice
    participant DB as User Database

    User->>App: 1. Input Email / Password & Submit
    activate App
    Note over App: Client performs basic format checks
    App->>Auth: 2. Send Hashed Credentials (POST /api/login)
    activate Auth
    Auth->>DB: 3. Query Hashed Record & Jitter Salt
    activate DB
    DB-->>Auth: 4. Return Encrypted Credentials
    deactivate DB
    
    alt Credentials Match Successfully
        Auth->>Auth: 5. Generate secure JWT Token
        Auth-->>App: 6. Status 200: Deliver Token Payload
        App->>User: 7. Redirect to Workspace Dashboard
    else Invalid Password Exception
        Auth-->>App: 8. Status 401: Unauthorized error
        App->>User: 9. Display Password Error Alert
    end
    deactivate Auth
    deactivate App

Authentication Flow Syntax Analysis: This blueprint initiates with sequenceDiagram and autonumber to index transaction calls. The vital logic block uses the alt ... else ... end syntax, which splits the sequence diagram into alternative execution paths: the green success path and the red exception path. The Note over annotation box details specific validation prerequisites before requesting API servers.

2. FAQ

  1. Why does my conditional branch alt block throw syntax compiling errors?
    • Solution: Check that your nested conditions are terminated. Every alt, opt or loop block must end with a corresponding end keyword.
  2. How do I prevent my Note over overlays from crowding the central sequence lines?
    • Solution: Switch from wide container-spanning notes to single-line offset notes by writing Note left of Auth or Note right of DB instead.