ASCII流程图（ASCII Flowchart）
ASCII流程图（ASCII Flowchart）使用纯文本字符绘制，无需特殊渲染器，适用于代码注释、终端显示、纯文本文档等场景
1. 基础流程图（Basic Flowchart）
垂直流程图
┌─────────────┐
│ 开始 │
└──────┬──────┘
│
▼
┌─────────────┐
│ 输入数据 │
└──────┬──────┘
│
▼
┌────────────┐
╱ 条件判断？ ╲
╱________________╲
│
┌───┴───┐
│ │
Yes No
│ │
▼ ▼
┌──────┐ ┌──────┐
│处理A │ │处理B │
└──┬───┘ └──┬───┘
│ │
└───┬────┘
│
▼
┌─────────────┐
│ 结束 │
└─────────────┘
水平流程图
┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐
│ 开始 │───▶│ 步骤1 │───▶│ 步骤2 │───▶│ 结束 │
└───────┘ └───────┘ └───────┘ └───────┘
简化版本
+-------+ +-------+ +-------+ | Start | --> | Step1 | --> | End | +-------+ +-------+ +-------+
2. 条件分支图（Decision Flowchart）
标准菱形判断
┌──────────┐ │ 输入 X │ └────┬─────┘ │ ▼ ╱╲ ╱ ╲ ╱ ╲ ╱ X>0? ╲ ╲ ╱ ╲ ╱ ╲ ╱ ╲╱ ┌────┴────┐ │ │ Yes No │ │ ▼ ▼ ┌────────┐ ┌────────┐ │ 正数 │ │ 非正数 │ └────────┘ └────────┘
简化菱形
+--------+
| Input |
+---+----+
|
v
+---+---+
/ \
/ X > 0? \
\ /
\ /
+---+---+
| |
Yes No
| |
v v
+------+ +------+
| 正数 | | 负数 |
+------+ +------+
多分支判断
┌─────────┐ │ 输入分数 │ └────┬────┘ │ ▼ ┌─────────┐ ╱ 分数>=90 ╲───Yes──▶ [A 优秀] ╲ ╱ └────┬────┘ │No ▼ ┌─────────┐ ╱ 分数>=80 ╲───Yes──▶ [B 良好] ╲ ╱ └────┬────┘ │No ▼ ┌─────────┐ ╱ 分数>=60 ╲───Yes──▶ [C 及格] ╲ ╱ └────┬────┘ │No ▼ [D 不及格]
3. 循环结构图（Loop Flowchart）
While 循环
┌─────────┐ │ i = 0 │ └────┬────┘ │ ▼ ┌─────────┐ │ │◀──────────┐ ╱ i < 10? ╲ │ ╲ ╱ │ └────┬────┘ │ │ │ ┌───┴───┐ │ Yes No │ │ │ │ ▼ │ │ ┌─────────┐ │ │ │ print i │ │ │ └────┬────┘ │ │ │ │ │ ▼ │ │ ┌─────────┐ │ │ │ i++ │──┘ │ └────┬────┘ │ │ │ └────────────────────┘ │ ▼ ┌─────────┐ │ 结束 │ └─────────┘
For 循环（简化）
┌──────────────────┐ │ for i = 0 to 9 │ └────────┬─────────┘ │ ▼ ┌────────┐ │ 循环体 │◀───┐ └────┬───┘ │ │ │ ▼ │ ┌───────┐ │ ╱ i < 10? ╲───┘ ╲ ╱ Yes └───┬───┘ │ No ▼ ┌────────┐ │ 结束 │ └────────┘
4. 系统架构图（Architecture Diagram）
三层架构
┌─────────────────────────────────────────────────────┐
│ 表现层 (UI) │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Web │ │ Mobile │ │ Desktop │ │
│ └─────────┘ └─────────┘ └─────────┘ │
└─────────────────────────┬───────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────┐
│ 业务逻辑层 │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 用户服务 │ │ 订单服务 │ │ 支付服务 │ │
│ └──────────┘ └──────────┘ └──────────┘ │
└─────────────────────────┬───────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────┐
│ 数据访问层 │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ MySQL │ │ Redis │ │ MQ │ │
│ └──────────┘ └──────────┘ └──────────┘ │
└─────────────────────────────────────────────────────┘
微服务架构
┌─────────────┐
│ Gateway │
└──────┬──────┘
│
┌───────────────────┼───────────────────┐
│ │ │
▼ ▼ ▼
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ User Service│ │Order Service│ │ Pay Service │
└──────┬──────┘ └──────┬──────┘ └──────┬──────┘
│ │ │
▼ ▼ ▼
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ User DB │ │ Order DB │ │ Pay DB │
└─────────────┘ └─────────────┘ └─────────────┘
5. 时序图（Sequence Diagram）
基本时序
Client Server Database
│ │ │
│ Request │ │
│───────────────▶│ │
│ │ Query │
│ │───────────────▶│
│ │ │
│ │ Result │
│ │◀───────────────│
│ Response │ │
│◀───────────────│ │
│ │ │
详细时序
┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ User │ │ Web │ │ API │ │ DB │ └──┬───┘ └──┬───┘ └──┬───┘ └──┬───┘ │ │ │ │ │ 1. 点击登录 │ │ │ │────────────────▶│ │ │ │ │ │ │ │ │ 2. POST /login │ │ │ │────────────────▶│ │ │ │ │ │ │ │ │ 3. SELECT user │ │ │ │────────────────▶│ │ │ │ │ │ │ │ 4. user data │ │ │ │◀────────────────│ │ │ │ │ │ │ 5. JWT Token │ │ │ │◀────────────────│ │ │ │ │ │ │ 6. 登录成功 │ │ │ │◀────────────────│ │ │ │ │ │ │
带条件的时序
Client Server Database
│ │ │
│ Login Request │ │
│───────────────────▶│ │
│ │ Query User │
│ │───────────────────▶│
│ │ │
│ │ User Data │
│ │◀───────────────────│
│ │ │
│ │ │
│ ┌─────────────┴─────────────┐ │
│ │ [密码正确] │ │
│ │ │ │
│ │ Return Token │ │
│◀─────┼───────────────────────────│ │
│ │ │ │
│ ├───────────────────────────┤ │
│ │ [密码错误] │ │
│ │ │ │
│ │ Return Error │ │
│◀─────┼───────────────────────────│ │
│ │ │ │
│ └───────────────────────────┘ │
│ │ │
6. 数据流图（Data Flow Diagram）
┌─────────────┐
│ 用户 │
└──────┬──────┘
│
订单信息 │ 订单确认
┌───────────────┼───────────────┐
│ │ │
▼ ▼ │
┌─────────────┐ ┌─────────────┐ │
│ 订单处理 │─▶│ 库存检查 │ │
└──────┬──────┘ └──────┬──────┘ │
│ │ │
│ ▼ │
│ ┌─────────────┐ │
│ │ 库存数据 │ │
│ └─────────────┘ │
│ │
▼ │
┌─────────────┐ │
│ 支付处理 │────────────────────────┘
└──────┬──────┘
│
▼
┌─────────────┐
│ 订单数据 │
└─────────────┘
7. 状态机图（State Machine）
基本状态机
┌─────────────────────────────────────┐
│ │
▼ │
┌───┐ ┌─────────┐ ┌─────────┐ ┌───────┴───┐
│ ● │─────▶│ 待机 │─────▶│ 运行 │─────▶│ 暂停 │
└───┘ └────┬────┘ └────┬────┘ └───────────┘
开始 │ │
│ │
│ ┌───────────┘
│ │
▼ ▼
┌─────────────┐
│ 停止 │─────▶ ◉
└─────────────┘ 结束
订单状态机
┌───┐
│ ● │
└─┬─┘
│ 创建订单
▼
┌─────────┐ 支付超时 ┌─────────┐
│ 待支付 │────────────▶│ 已取消 │──▶ ◉
└────┬────┘ └─────────┘
│
│ 支付成功
▼
┌─────────┐ 申请退款 ┌─────────┐
│ 已支付 │────────────▶│ 退款中 │
└────┬────┘ └────┬────┘
│ │
│ 发货 │ 退款成功
▼ ▼
┌─────────┐
8. 代码里面的ASCII Diagrams
https://asciidiagrams.github.io/
Aw Metrics Service Client Diagram
chromium/android_webview/.../aw_metrics_service_client.h#L48-L111
// WebView metrics set up happens like so: // // startup // │ // ├────────────┐ // │ ▼ // │ query GMS for consent // ▼ │ // Initialize() │ // │ ▼ // │ SetHaveMetricsConsent() // │ │ // │ ┌──────────┘ // ▼ ▼ // MaybeStartMetrics() // │ // ▼ // MetricsService::Start() // // All the named functions in this diagram happen on the UI thread. Querying GMS // happens in the background, and the result is posted back to the UI thread, to // SetHaveMetricsConsent(). Querying GMS is slow, so SetHaveMetricsConsent() // typically happens after Initialize(), but it may happen before.
Safebrowsing Allowlist Trie
chromium/android_webview/.../aw_safe_browsing_allowlist_manager.cc#L24-L51
// It is easy to visualize the trie edges as hostname components of a url in // reverse order. For example an allowlist of google.com will have a tree // tree structure as below. // root // | com // Node1 // google/ \ example // Node2 Node3 // // Normally, a search in the tree should end in a leaf node for a positive // match. For example in the tree above com.google and com.example are matches. // However, the allowlisting also allows matching subdomains if there is a // leading dot, for example, see ."google.com" and a.google.com below: // root // | com // Node1 // | google // Node2 // | a // Node3 // Here, both Node2 and Node3 are valid terminal nodes to terminate a match. // The boolean is_terminal indicates whether a node can successfully terminate // a search (aka. whether this rule was entered to the allowlist) and // match_prefix indicate if this should match exactly, or just do a prefix // match.
Twa Payment Service
chromium/ash/.../payment_app.mojom#L123-L137
// The service that runs in ARC and allows the browser to invoke the TWA payment // app that is installed in ARC, if it implements payment intents as described // in https://web.dev/android-payment-apps-overview/. At first, only // "https://play.google.com/billing" payment method is supported. // // -------------------- -------------------------------------------------- // | Browser | | ARC | // | | | | // | --------------- | | -------------- ------- ---------------- | // | | Web Payment |<-|------|->| PaymentApp |<-->| TWA |<-->| Play Billing | | // | --------------- | | -------------- ------- ---------------- | // | | | | // -------------------- -------------------------------------------------- // // Next method ID: 3
。。。 。。。
其他详见官网
浙公网安备 33010602011771号