flowchart TD A([🚀 开始]) --> B["1️⃣ 用户打开网站或应用
点击「注册」按钮进入注册页面"] B --> C[/"2️⃣ 用户填写注册信息
📧 邮箱/手机号 · 👤 用户名 · 🔒 密码"/] C --> D{"3️⃣ 前端基础校验
格式 · 长度 · 必填"} D -- "❌ 不通过" --> E["提示错误信息
返回修改"] E --> C D -- "✅ 通过" --> F["4️⃣ 前端发送 HTTPS 请求
将注册信息发送到服务器"] F --> G{"5️⃣ 服务器端校验
重复 · 强度 · 安全策略"} G -- "❌ 不通过" --> H["返回错误信息
如:邮箱已注册"] H --> C G -- "✅ 通过" --> I["6️⃣ 服务器发送验证码
📧 邮件验证码 / 📱 短信验证码"] I --> J[/"7️⃣ 用户输入验证码"/] J --> K{"8️⃣ 验证码是否正确?"} K -- "❌ 错误" --> L["验证失败
请重新输入"] L --> J K -- "✅ 正确" --> M["9️⃣ 服务器处理注册
🔐 密码加密哈希(bcrypt)
💾 用户信息存入数据库"] M --> N["🎉 1️⃣0️⃣ 注册成功
服务器返回成功结果"] N --> O{"系统选择"} O -- "选项 A" --> P["🔓 自动登录用户
直接进入系统"] O -- "选项 B" --> Q["🔑 跳转登录页面
提示用户登录"] P --> R([🏁 结束]) Q --> R classDef startEnd fill:#10b981,stroke:#059669,color:#fff,stroke-width:2px,font-weight:bold classDef process fill:#eff6ff,stroke:#3b82f6,color:#1e40af,stroke-width:2px classDef decision fill:#fffbeb,stroke:#f59e0b,color:#92400e,stroke-width:2px classDef ioNode fill:#f5f3ff,stroke:#8b5cf6,color:#5b21b6,stroke-width:2px classDef errorNode fill:#fef2f2,stroke:#ef4444,color:#dc2626,stroke-width:2px classDef successNode fill:#f0fdf4,stroke:#22c55e,color:#15803d,stroke-width:2px class A,R startEnd class B,F,I,M,P,Q process class D,G,K,O decision class C,J ioNode class E,H,L errorNode class N successNode

📌 图例说明

开始 / 结束
处理过程
判断条件
输入 / 输出
错误处理

本流程图使用 Mermaid.js 渲染引擎生成