文章以 Mermaid 绘图为核心，结合 AI 工具实操案例，详细拆解企业级登录模块的架构设计，涵盖流程图、状态机等多种可视化形式，提供可直接复用的代码与方案。从基础登录流程到安全增强架构，逐步讲解 Mermaid 绘图在产品与技术文档中的应用，展现 AI 辅助提升绘图效率的实践路径。

这是前面一篇文章《大模型+Mermaid：人工智能时代的职场绘图神器》的续篇。

大家可以先试试下面一句提示词，复制到元宝、豆包、ChatGPT、Gemini等大模型对话框，看看效果。

提示词：生成一段用Mermaid绘制APP用户登录模块设计的产品流程图的代码，并输出绘制图形。

下面用腾讯元宝举例，绘图效率特别高，如果绘制结果不满意，可以直接让AI修改，或者，学习前面的Meimaid文章，修改代码。

腾讯元宝回答

以下是根据您的要求，使用Mermaid语法绘制的APP用户登录模块设计的产品流程图代码。该代码综合了常见的登录流程，包括前端校验、后端验证、Token生成等关键步骤，并覆盖了正常流程与异常处理。flowchart TD A([启动APP]) –> B[进入登录界面] B –> C[用户输入账号/密码] C –> D{前端格式校验} D –>|格式错误| E[提示格式错误] E –> C D –>|格式正确| F[发送登录请求至后端] F –> G{后端验证用户信息} G –>|验证成功| H[生成访问Token] H –> I[记录登录日志] I –> J[返回登录成功响应] J –> K[前端保存Token] K –> L[跳转至首页] L –> M([登录成功]) G –>|验证失败| N[返回错误信息] N –> O[前端显示错误提示] O –> B

流程图说明流程起点：用户启动APP，进入登录界面。输入与校验：用户输入账号和密码后，系统会先进行前端格式校验（如非空、长度等），若格式错误会提示用户重新输入。后端验证：格式正确后，请求发送至后端。后端会查询数据库验证用户信息。验证成功则生成Token（用于维持登录状态），并记录登录日志；验证失败则返回错误信息。结果处理：前端根据后端返回的结果进行相应操作：成功则保存Token并跳转首页；失败则显示错误提示，用户可重新尝试或找回密码。如何渲染此图表元宝直接生成流程图：

Mermaid Live Editor（官方在线编辑器）：https://mermaid.live支持Mermaid的Markdown编辑器（如Typora、VS Code插件）绘图工具Draw.io：在菜单栏选择”调整图形 → 插入 → Mermaid”，粘贴代码即可关键设计特点覆盖完整路径：包含成功/失败分支、前端校验与后端验证的协同。用户友好反馈：在每个决策点（如格式校验、后端验证）均设置了明确的用户提示。安全性与可扩展性：体现了Token生成和日志记录，为后续权限管理和安全审计提供基础。如果需要调整（如增加“记住密码”选项、第三方登录等子流程），可以进一步扩展代码。再推荐一次这个Meimard编辑器，比官网好用：

https://www.lddgo.net/chart/mermaid-chart

把meimard代码复制到上面链接的编辑器，直接生成图形，在编辑框修改代码，图形同时改变，所见即所得。

字节跳动：豆包

同样的提示词，豆包出错，这也很正常，需要进行调整。

如果有豆包的产品或技术同事看到，可以用这个案例优化一下产品。下面是豆包的代码原稿，我再继续修订这个代码，后面给出修订后的代码：graph TD A[用户打开APP] –> B{是否已登录?}; B — 是 –> C[直接进入首页]; B — 否 –> D[展示登录页面]; D –> E{选择登录方式}; E — 账号密码登录 –> F[用户输入手机号/邮箱]; F –> G[用户输入密码]; G –> H[点击”登录”按钮]; H –> I{验证账号密码}; I — 验证通过 –> J{是否勾选”记住登录状态”?}; J — 是 –> K[保存登录凭证到本地]; J — 否 –> L[不保存登录凭证]; K –> M[进入首页]; L –> M; I — 验证失败 –> N[提示”账号或密码错误”]; N –> F; E — 第三方登录 –> O{选择第三方平台}; O — 微信 –> P[调用微信授权SDK]; O — QQ –> P; O — 苹果ID –> P; P –> Q{用户是否授权?}; Q — 是 –> R{授权信息验证}; R — 验证通过 –> S{是否首次登录?}; S — 是 –> T[引导完善用户信息]; T –> M; S — 否 –> M; R — 验证失败 –> U[提示”授权信息无效”]; U –> D; Q — 否 –> V[提示”授权失败，请重试”]; V –> D; E — 忘记密码 –> W[点击”忘记密码”按钮]; W –> X[输入手机号/邮箱]; X –> Y[点击”获取验证码”]; Y –> Z{验证码是否正确?}; Z — 是 –> AA[输入新密码]; AA –> AB[确认新密码]; AB –> AC[点击”重置密码”]; AC –> AD{重置是否成功?}; AD — 是 –> AE[提示”密码重置成功”]; AE –> D; AD — 否 –> AF[提示”重置失败，请重试”]; AF –> AA; Z — 否 –> AG[提示”验证码错误”]; AG –> Y;上面的代码错误的地方：是多输入了很多引号“”，Mermaid无法识别。修改后的代码如下：graph TD A[用户打开APP] –> B{是否已登录?}; B — 是 –> C[直接进入首页]; B — 否 –> D[展示登录页面]; D –> E{选择登录方式}; E — 账号密码登录 –> F[用户输入手机号/邮箱]; F –> G[用户输入密码]; G –> H[点击登录按钮]; H –> I{验证账号密码}; I — 验证通过 –> J{是否勾选记住登录状态?}; J — 是 –> K[保存登录凭证到本地]; J — 否 –> L[不保存登录凭证]; K –> M[进入首页]; L –> M; I — 验证失败 –> N[提示账号或密码错误]; N –> F; E — 第三方登录 –> O{选择第三方平台}; O — 微信 –> P[调用微信授权SDK]; O — QQ –> P; O — 苹果ID –> P; P –> Q{用户是否授权?}; Q — 是 –> R{授权信息验证}; R — 验证通过 –> S{是否首次登录?}; S — 是 –> T[引导完善用户信息]; T –> M; S — 否 –> M; R — 验证失败 –> U[提示授权信息无效]; U –> D; Q — 否 –> V[提示授权失败，请重试]; V –> D; E — 忘记密码 –> W[点击忘记密码按钮]; W –> X[输入手机号/邮箱]; X –> Y[点击获取验证码]; Y –> Z{验证码是否正确?}; Z — 是 –> AA[输入新密码]; AA –> AB[确认新密码]; AB –> AC[点击重置密码]; AC –> AD{重置是否成功?}; AD — 是 –> AE[提示密码重置成功]; AE –> D; AD — 否 –> AF[提示重置失败，请重试]; AF –> AA; Z — 否 –> AG[提示验证码错误]; AG –> Y;运行后，得到豆包绘制的用户登录APP流程图，可以对比元宝生成的流程图，看看二者的差异：

下面是编辑器的截图，真的很方便：

编辑器链接：

https://www.lddgo.net/chart/mermaid-chart

——————————————————

上的这个APP用户登录流程，基本比较清晰了。若果要达到企业级的登录模块架构设计，可以继续和AI进行互动。下面文章部分是我用AI探索过程，只要你本身具有一定的专业认知，AI真的是提效神器。

在做这个案例的过程，说几点我的感受：

AI绘图只是工具，认知才是关键

实践用AI学习 Mermaid 绘图 的方法。通过与AI的多轮互动，多数用户可以逐步掌握了如何用简单的语法描述复杂的流程图、思维导图和系统结构图。

AI的加入极大地提高了学习效率——过去需要查文档、试代码的过程，现在可以通过对话快速生成可视化结果。尤其在产品设计或课程结构梳理中，Mermaid图帮助我更清晰地表达逻辑关系，也让思维结构化的能力得到了训练。

AI只是工具，真正决定输出质量的，是使用者对领域的理解与洞察。

同样一句指令，不同的人让AI画出的图差别巨大。若使用者对系统逻辑、本质问题缺乏清晰认知，AI再强也只能画出表面结构；反之，当人能准确描述概念、层级和关系，AI就像一个高效的“画手”，能把思维即时可视化。换句话说，AI能放大人的思考，但无法替代思考。

实践中也遇到了一些具体问题。最常见的是 Mermaid 语法错误，导致图形无法渲染。

解决办法有两个：

其一，让AI重新绘制，通常它会自动修正语法并优化结构；

其二，自己手动检查错误，理解其语法逻辑并调整。

两种方法结合使用效果最好——AI帮我节省时间，而人工校对让我真正理解底层规则。

这一轮学习让我再次深刻体会：AI不是魔法，而是认知的放大镜。未来，无论是绘图、写作还是数据分析，唯有持续提升自己的思维模型和领域理解，才能真正让AI成为助力，而不是依赖。

下面是一个企业级的用户登录模块的产品架构设计过程和结果案例，所有的代码，我都逐一验证可用，建议收藏，以后直接学习抄作业。

Mermaid 三层架构登录状态机

这是一个非常典型也非常实用的「三层登录状态机」扩展版本——它结合了前端、后端与数据库三方的交互逻辑，能完整描述 登录请求的生命周期：从用户发起 → 后端验证 → 数据库校验 → 返回结果 → 状态更新。

graph TD    A[用户打开APP] --> B{是否已登录?};    B -- 是 --> C[直接进入首页];    B -- 否 --> D[展示登录页面];    D --> E{选择登录方式};    E -- 账号密码登录 --> F[用户输入手机号/邮箱];    F --> G[用户输入密码];    G --> H[点击"登录"按钮];    H --> I{验证账号密码};    I -- 验证通过 --> J{是否勾选"记住登录状态"?};    J -- 是 --> K[保存登录凭证到本地];    J -- 否 --> L[不保存登录凭证];    K --> M[进入首页];    L --> M;    I -- 验证失败 --> N[提示"账号或密码错误"];    N --> F;    E -- 第三方登录 --> O{选择第三方平台};    O -- 微信 --> P[调用微信授权SDK];    O -- QQ --> P;    O -- 苹果ID --> P;    P --> Q{用户是否授权?};    Q -- 是 --> R{授权信息验证};    R -- 验证通过 --> S{是否首次登录?};    S -- 是 --> T[引导完善用户信息];    T --> M;    S -- 否 --> M;    R -- 验证失败 --> U[提示"授权信息无效"];    U --> D;    Q -- 否 --> V[提示"授权失败，请重试"];    V --> D;    E -- 忘记密码 --> W[点击"忘记密码"按钮];    W --> X[输入手机号/邮箱];    X --> Y[点击"获取验证码"];    Y --> Z{验证码是否正确?};    Z -- 是 --> AA[输入新密码];    AA --> AB[确认新密码];    AB --> AC[点击"重置密码"];    AC --> AD{重置是否成功?};    AD -- 是 --> AE[提示"密码重置成功"];    AE --> D;    AD -- 否 --> AF[提示"重置失败，请重试"];    AF --> AA;    Z -- 否 --> AG[提示"验证码错误"];    AG --> Y;

图表逻辑说明

交互流程解读

1用户在前端输入账号密码 → 前端状态进入 “登录中”；

1前端调用后端 API → 后端进入 “验证中”；

1后端向数据库发起查询 → 数据库进入 “查询中”；

1数据库返回结果：

1匹配成功 → 后端进入 “验证成功”；

1匹配失败 → 后端进入 “验证失败”；

1后端将结果返回前端：

1成功 → 前端进入 “已登录”；

1失败 → 前端进入 “登录失败”；

1若会话超时、用户登出或网络异常 → 状态重新流转回 “未登录”。

可选进阶增强（推荐给产品经理/工程师）

如果你要把这个用于产品文档或技术设计，可以扩展：

增加 “安全验证层”：

Plain Text state “安全验证模块” as 安全 { [*] –> 检查Token 检查Token –> 有效 : 通过 检查Token –> 无效 : 重新登录 }

增加 “日志与监控模块”：

Plain Text state “监控系统” as Monitor { [*] –> 记录事件 记录事件 –> 告警 : 登录失败>3次 }

增加 “OAuth 第三方登录” 子状态：

Plain Text state OAuth { [*] –> 授权请求 授权请求 –> 授权成功 : 返回授权码 授权请求 –> 授权失败 : 用户取消 } 登录中 –> OAuth : 选择第三方登录 OAuth –> 已登录 : 授权成功

使用建议

1复杂系统可分模块绘制（前端、后端、数据库、监控、安全等），再通过跨模块箭头关联。

这是 产品经理和架构师最常用的高级系统图形融合表达 ——

通过 State Diagram（状态机） 表达“状态变化”，

通过 Sequence Diagram（时序图） 表达“交互顺序”。

系统登录全流程架构图（Mermaid 综合版）

下面这段 Mermaid 代码可以直接在 Mermaid Live Editor 或支持 Mermaid 的 Markdown 工具中运行：

一、Sequence Diagram：前端 <-> 后端 <-> 数据库 调用流程

Plain Text sequenceDiagram title 用户登录全流程交互图 participant User as 用户（前端） participant API as 后端认证服务 participant DB as 用户数据库 Note over User: 用户在登录页输入用户名与密码 User->>API: 提交登录请求（POST /login） activate API Note over API: 验证参数格式与安全性 API->>DB: 查询用户信息（SELECT * FROM user WHERE username=?） activate DB DB–>>API: 返回查询结果（成功或失败） deactivate DB alt 登录成功 API–>>User: 返回登录成功响应（Token + 用户信息） Note over User: 前端保存Token并跳转首页 else 密码错误 API–>>User: 返回错误信息（401 Unauthorized） Note over User: 显示“用户名或密码错误” else 网络异常 API–>>User: 返回网络错误提示 Note over User: 显示“请检查网络连接” end deactivate API Note over User,API: 用户后续请求携带Token访问受限资源

二、State Diagram：三层状态演化逻辑

Plain Text stateDiagram-v2 %% ========== 前端层 ========== state “前端（Client）” as Client { [*] –> 未登录 未登录 –> 登录中 : 用户提交凭证 登录中 –> 已登录 : 收到成功响应 登录中 –> 登录失败 : 密码错误 / 网络异常 登录失败 –> 未登录 : 重新输入 已登录 –> 登出中 : 点击登出 登出中 –> 未登录 : 登出完成 已登录 –> 超时退出 : Token过期 超时退出 –> 未登录 } %% ========== 后端层 ========== state “后端（Auth Service）” as Server { [*] –> 等待请求 等待请求 –> 验证中 : 收到登录请求 验证中 –> 调用数据库 : 验证用户凭证 调用数据库 –> 验证成功 : 用户名密码匹配 调用数据库 –> 验证失败 : 用户不存在或密码错误 验证成功 –> 等待请求 验证失败 –> 等待请求 } %% ========== 数据库层 ========== state “数据库（User DB）” as DB { [*] –> 空闲 空闲 –> 查询中 : 接收验证请求 查询中 –> 返回成功 : 匹配记录 查询中 –> 返回失败 : 无匹配 返回成功 –> 空闲 返回失败 –> 空闲 } %% ========== 三层交互 ========== 未登录 –> 等待请求 : 提交登录请求 等待请求 –> 调用数据库 : 后端发起查询 返回成功 –> 验证成功 返回失败 –> 验证失败 验证成功 –> 已登录 : 返回Token与用户信息 验证失败 –> 登录失败 : 返回错误信息

绘图结果：

三、整合逻辑解读

四、状态与时序融合图的优势

五、建议的使用方式

1在 产品需求文档（PRD） 中：

1用 Sequence Diagram 描述交互接口；

1用 State Diagram 表达系统状态；

1在交互说明章节附上链接或截图。

1在 技术设计文档（TDD） 中：

1配合接口字段表；

1标注异常处理逻辑（401、500、超时等）。

1在 开发与测试阶段：

1前端、后端、QA 团队可用同一图表快速对齐逻辑；

1可用于API调试、状态追踪、异常复盘。

「系统登录全景架构图（C4 + 时序 + 状态一体版）」

一个能直接放进 产品架构白皮书或系统方案设计文档 的高阶示意图：

它将整合三种视角：

1C4 模型：展示系统各层的架构组成（用户、前端、后端、数据库、外部认证服务）

1Sequence Diagram：展示交互时序（登录的完整请求/响应过程）

1State Diagram：展示状态变化逻辑（用户端、服务端、数据库三层状态机）

一、C4 总览图：系统登录架构层级

好，报错的原因是之前代码里用了 UpdateRelStyle(…) 这类非标准/不被当前 Mermaid C4 渲染器支持的调用，解析器在遇到额外参数 1 时就报错了。

我已把那些样式调整语句移除并修订了 C4 总览图代码 —— 现在应能被 Mermaid 正常解析并渲染。

下面是修订后的 C4 总览：系统登录架构层级（可直接复制到 Mermaid Live / 支持 C4 的渲染器中）：

Plain Text C4Context title 系统登录全景架构图（C4 总览） Person(user, “用户”, “通过浏览器或 App 发起登录请求”) System_Boundary(frontend, “前端系统”) { Container(ui, “登录界面”, “React / Vue”, “展示登录表单，收集凭证并显示结果”) Container(authClient, “登录模块”, “JavaScript SDK”, “封装登录逻辑与 Token 管理”) } System_Boundary(backend, “后端服务”) { Container(api, “认证服务 API”, “Node.js / Spring Boot”, “接收登录请求并验证用户凭证”) Container(token, “Token 服务”, “JWT Service”, “生成与验证 JWT / Session”) } System_Boundary(database, “数据层”) { ContainerDb(userdb, “用户数据库”, “MySQL / PostgreSQL”, “存储用户、密码哈希、权限等”) ContainerDb(redis, “缓存服务”, “Redis”, “存储短期会话、失败次数与速率限制数据”) } System_Ext(auth0, “第三方认证服务”, “OAuth2 / 微信/Apple”, “可选：第三方登录或联合认证”) Rel(user, ui, “在登录页输入并提交凭证”) Rel(ui, api, “POST /login”) Rel(api, userdb, “查询/校验用户凭证”) Rel(api, redis, “写入/读取会话与登录限流数据”) Rel(api, auth0, “可选：调用第三方认证以完成 OAuth 登录”) Rel(api, token, “生成/签发 Token”) Rel(ui, user, “显示登录结果并跳转”)

二、Sequence Diagram：全流程交互逻辑

Plain Text sequenceDiagram title 系统登录全流程（前端-后端-数据库） participant User as 用户 participant FE as 前端（Login模块） participant API as 后端认证服务 participant DB as 用户数据库 participant Redis as 缓存服务 participant Auth0 as 第三方认证 Note over User: 打开登录页并输入凭证 User->>FE: 输入用户名 / 密码 FE->>API: POST /login activate API API->>DB: 查询用户信息 DB–>>API: 返回密码哈希 API->>API: 校验密码（BCrypt / Argon2） alt 密码正确 API->>Redis: 记录登录Session API->>Auth0: （可选）同步OAuth登录 API->>FE: 返回JWT Token与用户信息 FE->>User: 显示登录成功并跳转主页 else 密码错误 API->>Redis: 记录失败次数 API–>>FE: 返回401错误（用户名或密码错误） FE->>User: 显示错误提示 end deactivate API

绘图效果：

三、State Diagram：系统状态机（三层协作）

Plain Text stateDiagram-v2 %% 前端层状态 state “前端（Client）” as Client { [*] –> 未登录 未登录 –> 登录中 : 用户提交凭证 登录中 –> 已登录 : 收到成功响应 登录中 –> 登录失败 : 返回错误信息 登录失败 –> 未登录 : 重新输入 已登录 –> 超时退出 : Token过期 超时退出 –> 未登录 } %% 后端层状态 state “后端（Auth Service）” as Server { [*] –> 等待请求 等待请求 –> 验证中 : 接收到登录请求 验证中 –> 验证成功 : 密码正确 验证中 –> 验证失败 : 密码错误 / 用户不存在 验证成功 –> 等待请求 验证失败 –> 等待请求 } %% 数据库层状态 state “数据库（User DB）” as DB { [*] –> 空闲 空闲 –> 查询中 : 收到查询请求 查询中 –> 返回成功 : 匹配记录 查询中 –> 返回失败 : 无匹配记录 返回成功 –> 空闲 返回失败 –> 空闲 } %% 三层交互映射 未登录 –> 等待请求 : 登录请求发起 等待请求 –> 查询中 : 调用数据库 返回成功 –> 验证成功 返回失败 –> 验证失败 验证成功 –> 已登录 : 返回Token 验证失败 –> 登录失败 : 返回错误

四、图形融合逻辑

五、使用建议

「系统安全登录全景图（C4 + Sequence + State + Threat Modeling）」

一份真正可以放进企业级安全架构方案白皮书的高阶可视图：

该图基于 C4 模型语法（C4Context），并在原登录体系上扩展了：

1验证码（Captcha Service）

1MFA 多因子认证（SMS / App）

1风控引擎（Risk Control Engine）

1日志与安全监控（Security Log / SIEM）

1外部安全接口（如反爬虫、设备指纹）

一、安全版 C4 总览图

Plain Text C4Context title 安全版系统登录全景架构图（C4 + 安全模块增强版） Person(user, “用户”, “通过浏览器或 App 发起登录请求”) System_Boundary(frontend, “前端系统”) { Container(ui, “登录界面”, “React / Vue”, “展示登录表单、验证码与 MFA 验证”) Container(authClient, “登录模块”, “JS SDK / App 模块”, “封装登录流程、Token 管理与安全校验”) } System_Boundary(backend, “后端服务”) { Container(api, “认证服务 API”, “Spring Boot / Node.js”, “处理登录请求、验证凭证、协调安全服务”) Container(token, “Token 服务”, “JWT / OAuth2”, “生成、验证与刷新 Token”) Container(risk, “风控引擎”, “Python / Go”, “检测登录风险（设备指纹、IP、黑名单、地理位置等）”) Container(captcha, “验证码服务”, “滑块 / 图形验证码”, “防止暴力破解与批量请求”) Container(mfa, “MFA 服务”, “SMS / Authenticator”, “提供多因子验证（短信 / 动态码）”) Container(logs, “安全日志与监控”, “ELK / SIEM”, “记录安全事件与告警”) } System_Boundary(database, “数据层”) { ContainerDb(userdb, “用户数据库”, “MySQL / PostgreSQL”, “存储用户凭证、密钥哈希、MFA 状态”) ContainerDb(redis, “缓存与会话库”, “Redis”, “存储 Session、验证码与登录尝试次数”) ContainerDb(auditdb, “审计日志库”, “ElasticSearch”, “记录安全与风控日志”) } System_Ext(auth0, “第三方认证服务”, “OAuth2 / 微信 / Apple”, “联合认证与第三方登录”) System_Ext(sms, “短信网关”, “SMS Provider”, “发送多因子验证码”) System_Ext(siema, “安全监控系统”, “SIEM / SOC”, “收集并分析安全日志”) System_Ext(fingerprint, “设备指纹服务”, “Anti-Fraud API”, “识别设备风险与可疑登录”) %% —- 系统内关系 —- Rel(user, ui, “输入用户名、密码、验证码”) Rel(ui, captcha, “请求图形验证码”) Rel(ui, api, “POST /login（附验证码结果）”) Rel(api, risk, “调用风控引擎检查设备/IP风险”) Rel(risk, fingerprint, “调用设备指纹API”) Rel(api, userdb, “验证用户名/密码”) Rel(api, redis, “读取/写入登录状态与限流信息”) Rel(api, captcha, “验证验证码结果”) Rel(api, mfa, “触发 MFA 验证（短信/APP）”) Rel(mfa, sms, “发送短信验证码”) Rel(api, auth0, “可选：第三方登录认证”) Rel(api, token, “生成 Token 返回前端”) Rel(api, logs, “记录登录与安全事件”) Rel(logs, auditdb, “存储安全日志”) Rel(logs, siema, “推送告警至安全监控系统”) Rel(ui, user, “展示登录结果与安全提示”)

二、图中核心逻辑说明

三、安全登录流程（简化时序图）

Plain Text sequenceDiagram title 安全登录时序（含验证码 + 风控 + MFA） participant User as 用户 participant FE as 前端 participant API as 后端认证服务 participant Captcha as 验证码服务 participant Risk as 风控引擎 participant MFA as 多因子认证 participant DB as 用户数据库 participant Redis as 缓存 User->>FE: 输入用户名、密码、验证码 FE->>Captcha: 校验验证码 Captcha–>>FE: 验证通过 FE->>API: 提交登录请求 activate API API->>Risk: 检查设备/IP 风控 Risk–>>API: 返回风险等级 API->>DB: 验证用户名/密码哈希 DB–>>API: 验证成功 alt 触发高风险 API->>MFA: 发送多因子验证请求 MFA–>>User: 短信 / 动态码验证 User->>API: 输入验证码 API->>Redis: 保存成功登录 Session API–>>FE: 返回 Token（登录成功） else 正常登录 API->>Redis: 保存 Session API–>>FE: 返回 Token end deactivate API FE->>User: 登录成功，进入系统主页

四、安全强化后的系统特点

五、放入企业白皮书时的建议章节结构

企业级《身份认证与安全体系设计说明书》的 状态机图（State Diagram）

基于前面的三层登录架构（前端 / 后端 / 数据层）， 并扩展了安全模块：验证码、风控、MFA、多次失败锁定、超时退出等逻辑， 是可直接用于企业级《身份认证与安全体系设计说明书》的 状态机图（State Diagram）。

一、安全版登录状态机（Mermaid代码）

Plain Text stateDiagram-v2 title 安全登录状态机（含验证码、风控、MFA、锁定机制） %% ========== 前端状态 ========== state “前端（Client）” as Client { [*] –> 未登录 未登录 –> 输入凭证 : 用户进入登录页 输入凭证 –> 验证码校验中 : 用户提交用户名/密码/验证码 验证码校验中 –> 风控检查中 : 验证码正确 验证码校验中 –> 验证码失败 : 验证码错误 验证码失败 –> 输入凭证 : 重新输入 风控检查中 –> MFA验证中 : 检测为高风险 风控检查中 –> 登录中 : 风控通过 MFA验证中 –> 登录中 : MFA 验证成功 MFA验证中 –> MFA失败 : 验证码错误或超时 MFA失败 –> 输入凭证 : 重新开始 登录中 –> 已登录 : 后端验证成功返回Token 登录中 –> 登录失败 : 密码错误 / 用户不存在 登录失败 –> 输入凭证 : 重新尝试 登录失败 –> 已锁定 : 达到失败上限 已锁定 –> 冻结等待 : 冻结计时中 冻结等待 –> 输入凭证 : 时间到自动解锁 已登录 –> 超时退出 : Token过期 / 长时间未操作 已登录 –> 主动登出 : 用户点击退出 超时退出 –> 未登录 主动登出 –> 未登录 } %% ========== 后端状态 ========== state “后端（Auth Service）” as Server { [*] –> 等待请求 等待请求 –> 验证中 : 收到登录请求 验证中 –> 验证码验证 : 校验验证码有效性 验证码验证 –> 风控检测 : 验证通过 验证码验证 –> 拒绝请求 : 验证失败 风控检测 –> MFA流程 : 检测为高风险 风控检测 –> 密码验证 : 风控通过 MFA流程 –> 密码验证 : MFA 验证成功 密码验证 –> 登录成功 : 密码正确 密码验证 –> 登录失败 : 密码错误 / 用户不存在 登录失败 –> 等待请求 登录成功 –> 等待请求 拒绝请求 –> 等待请求 } %% ========== 数据库/安全层状态 ========== state “数据层（DB + 安全服务）” as DB { [*] –> 空闲 空闲 –> 查询中 : 收到认证请求 查询中 –> 返回成功 : 匹配用户记录 查询中 –> 返回失败 : 无匹配 返回成功 –> 空闲 返回失败 –> 空闲 空闲 –> 写入锁定记录 : 达到失败阈值 写入锁定记录 –> 空闲 } %% ========== 交互映射 ========== 输入凭证 –> 等待请求 : 提交登录请求 等待请求 –> 查询中 : 后端验证用户信息 返回成功 –> 密码验证 返回失败 –> 登录失败 登录成功 –> 已登录 : 返回Token与用户信息 登录失败 –> 登录失败 : 返回错误信息 拒绝请求 –> 验证码失败 : 验证码错误反馈 MFA流程 –> MFA验证中 : 前端触发二次验证

二、状态逻辑结构说明

三、核心安全机制逻辑

四、系统级别安全状态转移总结

五、企业架构落地建议

可在企业安全方案中将此图拆为 3 页：

1登录主状态机（简版） —— 适合产品经理或业务团队；

1安全增强状态机（本图） —— 适合安全与后端架构团队；

1异常流转与防御策略表 —— 列出所有失败状态对应防御机制（验证码、MFA、锁定等）。

六、可进一步扩展为：

“统一身份认证系统（SSO + 安全态势融合版）”

增加：

1OAuth2 / OpenID Connect；

1单点登录（SSO）；

1风控模型反馈（AI检测）；

1设备信任度体系（Trusted Device Profile）。

企业级身份安全体系的统一身份认证状态机（SSO + OAuth2 + MFA + 风控反馈版）

这是企业级身份安全体系的“王炸版本”：

统一身份认证状态机（SSO + OAuth2 + MFA + 风控反馈版）

它融合了：

1多系统登录集成（SSO）

1第三方授权（OAuth2）

1多因子认证（MFA）

1智能风控（Risk Engine）

1安全日志与反馈机制（Security Feedback Loop）

此图可以直接用在安全架构设计、数字身份白皮书、或大型企业的零信任系统汇报中。

一、Mermaid代码（企业级安全状态机）

Plain Text stateDiagram-v2 title 统一身份认证状态机（SSO + OAuth2 + MFA + 风控反馈版） %% ========== 前端层 ========== state “用户端（Client / Browser / App）” as Client { [*] –> 未登录 未登录 –> 选择登录方式 : 用户访问系统 选择登录方式 –> 输入凭证 : 选择企业账户登录 选择登录方式 –> 第三方授权中 : 选择OAuth登录（如微信/Google） 第三方授权中 –> 获取授权码 : 用户在授权页同意 获取授权码 –> Token交换中 : 授权成功返回code Token交换中 –> 登录成功 : 获取access_token成功 Token交换中 –> 登录失败 : 授权失败 登录失败 –> 未登录 输入凭证 –> 验证码校验中 : 提交用户名/密码/验证码 验证码校验中 –> 风控检测中 : 验证码正确 验证码校验中 –> 验证码失败 : 验证码错误 验证码失败 –> 输入凭证 风控检测中 –> MFA验证中 : 风控判定高风险 风控检测中 –> 登录请求中 : 风控通过 MFA验证中 –> 登录请求中 : MFA成功 MFA验证中 –> MFA失败 : 验证失败或超时 MFA失败 –> 输入凭证 登录请求中 –> 登录成功 : 后端返回SSO Token 登录请求中 –> 登录失败 : 密码错误或用户不存在 登录失败 –> 输入凭证 登录成功 –> 已登录 : 跳转至目标系统 已登录 –> 主动登出 : 用户退出 已登录 –> Token过期 : 会话超时 Token过期 –> 未登录 主动登出 –> 未登录 } %% ========== 后端层 ========== state “认证中心（Auth Server / SSO Service）” as Auth { [*] –> 等待请求 等待请求 –> 验证码验证 : 收到登录请求 验证码验证 –> 风控引擎检测 : 验证通过 验证码验证 –> 拒绝请求 : 验证失败 风控引擎检测 –> MFA流程 : 高风险用户 风控引擎检测 –> 密码验证 : 正常风险 MFA流程 –> 密码验证 : MFA通过 密码验证 –> 登录成功 : 凭证验证成功 密码验证 –> 登录失败 : 密码错误 / 用户不存在 登录成功 –> 生成SSO Token : 下发全局Session 生成SSO Token –> 下发授权码 : 第三方登录回调 下发授权码 –> 等待请求 登录失败 –> 等待请求 拒绝请求 –> 等待请求 %% OAuth2专属流程 等待请求 –> 第三方授权 : 外部应用发起授权 第三方授权 –> 授权码生成 : 用户授权成功 授权码生成 –> Token签发 : 返回access_token / id_token Token签发 –> 等待请求 %% 风控反馈机制 登录失败 –> 风控反馈 : 连续失败触发 风控反馈 –> 等待请求 MFA失败 –> 风控反馈 拒绝请求 –> 风控反馈 } %% ========== 数据层 ========== state “数据与安全服务层（DB + Risk Engine + Log）” as Data { [*] –> 空闲 空闲 –> 用户查询 : 收到认证请求 用户查询 –> 返回匹配 : 找到用户记录 用户查询 –> 返回失败 : 无匹配 返回匹配 –> 空闲 返回失败 –> 空闲 空闲 –> 风控评估 : 登录请求到达风控引擎 风控评估 –> 高风险 : 异常行为识别 风控评估 –> 正常风险 : 正常行为 高风险 –> 空闲 正常风险 –> 空闲 空闲 –> 日志记录 : 写入认证日志 日志记录 –> 空闲 } %% ========== 状态映射关系 ========== 输入凭证 –> 等待请求 : 发起登录请求 验证码校验中 –> 验证码验证 : 后端验证 风控检测中 –> 风控引擎检测 : 后端调用风控引擎 MFA验证中 –> MFA流程 : 触发多因子 登录请求中 –> 密码验证 登录成功 –> 生成SSO Token 生成SSO Token –> 已登录 : 返回前端Token 登录失败 –> 登录失败 风控引擎检测 –> 风控评估 登录失败 –> 风控反馈 : 向风控系统报告 授权码生成 –> 获取授权码 : 回调前端

二、设计思路分层说明

三、核心安全机制一览

四、状态路径示例（标准登录流程）

Plain Text 用户访问系统 → 选择登录方式 → 输入凭证 → 验证码校验 → 风控检测 → MFA验证 → 登录请求 → 后端密码验证 → 生成SSO Token → 登录成功 → 跳转目标系统

五、异常与安全分支示例

六、可拓展方向（企业级安全体系）

1支持 OAuth + SAML 混合认证

1融合零信任架构（ZTNA）策略引擎

1引入行为建模与AI风险评分

1对接统一日志中心（SIEM）

1支持集中注销与设备信任管理

七、应用场景建议

《企业统一身份认证架构图（C4 + 时序 + 状态整合版）》

下面是一份可直接用于白皮书 / PPT / 技术方案的完整产出：

包含三部分 Mermaid 段落：

1C4 总览（系统与容器级别）

1Sequence 时序图（请求/响应与第三方/OAuth 流程）

1State 状态机（前端/认证中心/数据层/风控的状态流转）

1C4 总览：企业统一身份认证架构（容器/边界视角）

Plain Text C4Context title 企业统一身份认证架构（C4 总览） Person(user, “用户”, “通过浏览器 / App / 第三方客户端发起认证请求”) System_Boundary(frontend, “前端体系”) { Container(ui, “Web / App 登录页”, “React / Vue / Native”, “展示登录/SSO入口、收集凭证/验证码、显示结果”) Container(spa, “SP (Service Provider)”, “前端应用”, “依赖 SSO Token 访问业务系统”) } System_Boundary(auth, “认证中心（Auth / SSO）”) { Container(authApi, “认证服务 API”, “Spring Boot / Node.js”, “集中认证、OAuth2/OpenID Connect、SSO Token 签发”) Container(tokenSvc, “Token 服务”, “JWT / OAuth Token Service”, “签发/验证 Access/Refresh Token”) Container(mfa, “MFA 服务”, “OTP / Authenticator / SMS”, “执行二次认证”) Container(captcha, “Captcha 服务”, “滑块/图片/行为”, “防止暴力破解”) Container(risk, “风控引擎”, “Risk Engine / ML”, “实时评分与拦截策略”) Container(audit, “审计/日志服务”, “ELK / SIEM”, “收集认证与安全事件”) } System_Boundary(data, “数据与缓存”) { ContainerDb(userDb, “用户数据库”, “MySQL/Postgres”, “用户、凭证哈希、MFA状态、授权信息”) ContainerDb(redis, “Redis/Session/限流”, “Redis”, “会话缓存、验证码、失败计数、速率限制”) } System_Ext(authProvider, “第三方授权”, “OAuth2 Provider”, “微信/Google/企业IdP”) System_Ext(smsGateway, “短信网关”, “SMS Provider”, “发送 OTP 短信”) System_Ext(deviceFp, “设备指纹服务”, “Anti-Fraud API”, “设备指纹与信誉查询”) System_Ext(securityOps, “安全运营 (SIEM/SOC)”, “SIEM系统”, “接收告警与审计事件”) Rel(user, ui, “发起认证 / 选择登录方式”) Rel(ui, authApi, “POST /authorize 或 POST /login（携带验证码/凭证）”) Rel(authApi, userDb, “查询用户与凭证”) Rel(authApi, redis, “读写验证码、Session、失败计数”) Rel(authApi, captcha, “校验验证码”) Rel(authApi, risk, “请求风控评分（IP / 设备 / 历史）”) Rel(risk, deviceFp, “调用设备指纹与风险服务”) Rel(authApi, mfa, “触发 MFA（按风险或策略）”) Rel(mfa, smsGateway, “发送短信验证码（OTP）”) Rel(authApi, tokenSvc, “生成 Access/Refresh Token 或 SSO Token”) Rel(authApi, authProvider, “OAuth2 授权码流程（可选）”) Rel(authApi, audit, “写入认证/风控/审计日志”) Rel(audit, securityOps, “推送告警与安全事件”) Rel(spa, authApi, “使用 Token 访问受保护资源”) Rel(user, authProvider, “选择第三方授权（可选）”)

1Sequence Diagram：登录 & SSO & OAuth 全流程时序

Plain Text sequenceDiagram title SSO + OAuth + 风控 + MFA 的登录时序（简化） participant User as 用户 participant UI as 前端 (Login Page / SP) participant Auth as Auth Server (SSO) participant DB as User DB participant Redis as Cache / Session participant Risk as Risk Engine participant MFA as MFA Service participant SMS as SMS Gateway participant Token as Token Service participant Provider as Third-Party OAuth Provider participant Audit as Audit / SIEM Note over User,UI: 用户打开登录页并选择登录方式（企业账号 / 第三方） User->>UI: 提交凭证或选择 OAuth alt 用户选择 OAuth UI->>Provider: 重定向到第三方授权页 Provider–>>UI: 回调授权码 (code) UI->>Auth: POST /oauth/token (code)-> 交换 token else 用户使用企业凭证 UI->>Auth: POST /login (username, password, captcha) end activate Auth Auth->>Redis: 校验/取出验证码与速率限制 Auth->>Risk: 请求风控评分 (IP, device, history) Risk–>>Auth: 返回风险得分 alt 风险高 Auth->>MFA: 触发 MFA 验证（SMS/APP） MFA->>SMS: 发送 OTP SMS–>>User: 收到短信验证码 User->>UI: 输入 OTP UI->>Auth: POST /mfa/verify (otp) Auth->>MFA: 验证 OTP MFA–>>Auth: MFA OK / FAIL end Auth->>DB: 查询用户并校验密码哈希 DB–>>Auth: 返回匹配/不匹配 alt 验证通过 Auth->>Token: 请求签发 Access/Refresh / SSO Token Token–>>Auth: 返回 Token Auth->>Redis: 写入 Session / 登录记录 Auth->>Audit: 写入成功日志 Auth–>>UI: 返回 200 + Token / 用户信息 UI–>>User: 登录成功，跳转 SP else 验证失败 Auth->>Redis: 写入失败计数 Auth->>Audit: 写入失败日志 Auth–>>UI: 返回 401 错误（可能触发风控封禁） UI–>>User: 显示错误提示 end deactivate Auth

1State Diagram：统一身份认证状态机（整合 SSO / OAuth / 风控反馈）

Plain Text stateDiagram-v2 title 统一身份认证状态机（SSO / OAuth / MFA / 风控反馈） %% 前端 / 用户视角 state “用户端 (Client / SP)” as Client { [*] –> 未认证 未认证 –> 选择认证方式 : 访问受保护资源 选择认证方式 –> 跳转第三方授权 : 选择 OAuth 选择认证方式 –> 输入凭证 : 选择企业登录 跳转第三方授权 –> 授权回调 : 用户授权或拒绝 授权回调 –> Token交换中 : 交换 access_token Token交换中 –> 已认证 : 交换成功 Token交换中 –> 未认证 : 交换失败 输入凭证 –> 验证码校验中 : 提交凭证 + captcha 验证码校验中 –> 风控检测中 : 验证通过 验证码校验中 –> 验证码失败 : 验证失败 验证码失败 –> 未认证 风控检测中 –> MFA中 : 风控判高风险 风控检测中 –> 请求登录 : 风控通过 MFA中 –> 请求登录 : MFA 验证通过 MFA中 –> 未认证 : MFA 验证失败 请求登录 –> 已认证 : 后端返回 Token / SSO 会话 请求登录 –> 未认证 : 后端返回失败 已认证 –> 会话过期 : Token 过期或登出 会话过期 –> 未认证 } %% 认证中心内部状态 state “认证中心 (Auth Server)” as Auth { [*] –> 空闲 空闲 –> 接收请求 : 收到登录/授权请求 接收请求 –> 校验验证码 : 如需 captcha 则校验 校验验证码 –> 风控检查 : 校验通过 校验验证码 –> 拒绝请求 : 验证失败 风控检查 –> 强制MFA : 高风险 风控检查 –> 密码校验 : 低风险 强制MFA –> 密码校验 : MFA 通过 密码校验 –> 签发Token : 验证成功 密码校验 –> 拒绝请求 : 验证失败 签发Token –> 空闲 拒绝请求 –> 空闲 签发Token –> 通知审计 : 写入成功日志 拒绝请求 –> 通知审计 : 写入失败日志 } %% 风控 / 数据层状态 state “数据 & 风控 (DB / Risk / Audit)” as Data { [*] –> 待命 待命 –> 查询用户 : 接收验证查询 查询用户 –> 返回匹配 : 找到记录 查询用户 –> 返回不匹配 : 未找到或密码错 返回匹配 –> 待命 返回不匹配 –> 待命 待命 –> 风控评估 : 接收风控请求 风控评估 –> 正常风险 : 无异常 风控評估 –> 高风险 : 异常行为被检测 高风险 –> 写入黑名单/限流 : 如果策略要求 正常风险 –> 待命 待命 –> 写审计日志 : 记录所有动作 写审计日志 –> 待命 } %% 状态映射（跨模块） 输入凭证 –> 接收请求 : 前端发送登录请求 校验验证码 –> 风控評估 : 后端调用风控 风控检查 –> 风控評估 密码校验 –> 查询用户 签发Token –> 已认证 : 返回前端 拒绝请求 –> 未认证 : 返回前端错误 高风险 –> 强制MFA

渲染与使用建议

推荐工具：Mermaid Live Editor（https://mermaid.live）或支持 Mermaid 的 Markdown 编辑器（Typora、Obsidian、Notion 的部分集成、GitHub Pages 等）。

1若你的渲染环境不支持 C4Context，可将 C4 段转换为等效的 graph LR 可视化版本；我可以为你提供该等效版本。

导出：在 Mermaid Live 中渲染后可直接导出为 PNG / SVG，便于放入 PPT 或白皮书。

可视化优化：可以在 PPT展示 中用高亮色标注“关键安全点”（风控、MFA、Audit）并附上策略说明（比如失败阈值、MFA 策略、封禁时长）。

本文由人人都是产品经理作者【Blues】，微信公众号：【BLUES】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash，基于 CC0 协议。