Style preview · v3
明亮一点，仍然克制
保持干净的冷白与墨蓝背景，进一步提亮天青蓝和蜂蜜琥珀，让冷暖色形成更清楚的对比，同时维持低面积柔和填充。
显式样式约束
背景层级冷白蓝灰画布 → 纯净纸面 → 淡蓝灰凹层；深色使用墨蓝，不使用灰绿黑。
分类配色仅从 4 个清亮柔和色槽按顺序取色；同一区域始终同色。
Mermaid 分工调用图、依赖图、时序图优先使用；质量块、横截面与固定布局交给 CSS / SVG。
红色预算单图最多一个红色强调组；普通提醒优先使用琥珀色。
图内允许的分类色范围
01 · 天青蓝入口 / 第一轨 / 主流程
02 · 鸢尾紫核心行为 / 第二轨
03 · 蜂蜜琥珀第三分区 / 影响带
04 · 湖水青状态 / 外部效果 / 第四轨
CSS / SVG 图形
Architecture · 固定轨道
category 1–3Entry
HTTP adapter注册路由并规范化输入
Core behavior
Order intakevalidate · price · commit
Pricing返回报价
State
Order store持久化已提交订单
Flow · 有序轨道
category 1 only- 1Register绑定入口与依赖
- 2Validate检查请求边界
- 3Commit写入并发布结果
Sequence · 参与者生命线
neutral onlyHTTP adapter
Order intake
Pricing
Impact · 影响带
category 1–4Direct
Order intake直接读取状态
Strong
Indirect
Invoice job消费已提交事件
Source
Validate
Retry worker需聚焦检查
Explore
No evidence
Archive尚无支持证据
Speculative
Verification · 结论行
evidence only并非所有写入都经过 StoreContradicted rebuild 路径直接写入
重试是否保序仍未知Unresolved 需要运行时检查
主路径在提交后发布事件Confirmed 来源与测试一致
Interface depth · 质量块
category 1 + neutralcaller knowledge
implementation
interface
implementation
Inline SVG · 拓扑异常
neutral + one red findingMermaid 允许类型
Flowchart / Graph + Subgraph
neutral + one finding
flowchart LR
subgraph Entry
HTTP[HTTP adapter]
end
subgraph Core
Intake[Order intake]
Price[Pricing]
end
HTTP --> Intake --> Price
Price -.->|leak| Intake
linkStyle 2 stroke:#a85b54,color:#a85b54
Sequence Diagram
neutral only
sequenceDiagram
participant HTTP as HTTP adapter
participant Intake as Order intake
participant Pricing
HTTP->>Intake: submit(cart) · validate
activate Intake
Intake->>Pricing: price(cart) · execute
Pricing-->>Intake: quote · return
alt valid quote
Intake->>Intake: commit(order)
else rejected
Intake-->>HTTP: validation error
end
deactivate Intake
State Diagram
neutral only
stateDiagram-v2
[*] --> Draft
Draft --> Validating: submit
Validating --> Committed: valid
Validating --> Rejected: invalid
Rejected --> Draft: revise
Committed --> [*]
Class Diagram
neutral only
classDiagram
class OrderIntake {
+submit(cart) Order
-validate(cart)
-commit(order)
}
class Pricing {
+price(cart) Quote
}
class OrderStore {
+save(order)
}
OrderIntake --> Pricing : requests quote
OrderIntake --> OrderStore : persists
ER Diagram
neutral only
erDiagram
ORDER ||--|{ ORDER_LINE : contains
ORDER ||--o| PAYMENT : settles
ORDER {
string id PK
string status
}
ORDER_LINE {
string sku
int quantity
}
PAYMENT {
string provider_ref
string state
}
Block Diagram
category 1–4
block-beta
columns 4
Entry["Entry"] Core["Core behavior"] State["State"] Effects["Effects"]
Entry --> Core
Core --> State
State --> Effects
Timeline
neutral only
timeline
title Investigation arc
Baseline : Pin revision
Question : Frame one reading question
Investigate : Read bounded slices
Verify : Check from another direction
Report : Render findings
Mindmap
category 1–4
mindmap
root((Codebase Lens))
Orient
Entry points
Core modules
Trace
Calls
Effects
Impact
Callers
Checks
Verify
Claims
Evidence
Journey
evidence range
journey
title Confidence through investigation
section Initial model
Guess architecture: 2: Agent
Identify landmarks: 3: Agent
section Evidence
Trace representative flow: 4: Agent
Verify independently: 5: Agent
Gantt
neutral + restrained alerts
gantt
title Bounded investigation
dateFormat YYYY-MM-DD
axisFormat %m-%d
section Reading
Baseline :done, base, 2026-09-01, 1d
Trace path :active, trace, after base, 2d
section Verification
Resolve contradiction :crit, verify, after trace, 1d
Render report :report, after verify, 1d