diff --git a/README.md b/README.md
index 0eeca1b..f24daf2 100644
--- a/README.md
+++ b/README.md
@@ -1,17 +1,20 @@
 # CTPhysics
 
-简体中文说明 | English version below
+[简体中文](#概述) | [English](#overview)
 
-——
+---
 
 ## 概述
+
 CTPhysics 是一个用于学习与演示计算机断层扫描（CT）成像物理的交互式平台。项目聚焦成像链路的关键环节（采样、重建、噪声和剂量等），通过轻量的前端可视化与实验模块，帮助学习者和从业者理解核心物理概念及工程权衡。
 
 ## 在线站点
+
 - 生产/演示站点：https://www.ct-physics.xyz
   - 若链接更新，请在此处同步维护。
 
 ## 功能特性
+
 - 交互式模块：采样与滤波、卷积核（重建滤波器）对图像的影响、剂量与噪声的权衡等
 - 可视化解释：图表/曲线/示意图，直观展示物理量与图像质量指标的关系
 - 多语言支持：中/英文内容（可拓展 i18n）
@@ -19,6 +22,7 @@ CTPhysics 是一个用于学习与演示计算机断层扫描（CT）成像物
 - 可访问性：尽量遵循可访问性规范（ARIA、键盘可操作）
 
 ## 技术栈
+
 - 前端框架：React / Next.js（TypeScript 严格模式）
 - 样式与组件：Tailwind CSS + Radix UI（或等价组件库）
 - 可视化：Canvas/WebGL（必要时），可使用 D3/Plotly 等
@@ -26,6 +30,7 @@ CTPhysics 是一个用于学习与演示计算机断层扫描（CT）成像物
 - 代码质量：ESLint + Prettier（CI 中强制）
 
 ## 快速开始
+
 1) 环境准备
    - Node.js >= 18
    - 推荐使用 pnpm（或 npm / yarn）
@@ -40,6 +45,7 @@ CTPhysics 是一个用于学习与演示计算机断层扫描（CT）成像物
    - pnpm build && pnpm start
 
 ## 测试（Vitest / Playwright）
+
 - 单元与集成测试（Vitest）
   - 运行：pnpm test
   - 覆盖率报告：pnpm test --coverage
@@ -50,15 +56,17 @@ CTPhysics 是一个用于学习与演示计算机断层扫描（CT）成像物
   - 数据与网络：尽量使用可复现数据与网络模拟，避免外部依赖造成不稳定
 
 ## CI 概述
+
 - GitHub Actions（示例）
   - 触发：PR / push 到 master
-  - 阶段：lint → type-check → unit tests（Vitest）→ e2e（Playwright，可选）→ 构建
+  - 阶段：lint → type-check → 单元测试（Vitest）→ e2e（Playwright，可选）→ 构建
   - 覆盖率阈值：在 CI 中强制（失败则拒绝合并）
   - 预览部署：Vercel PR preview（自动）
   - 可选：Sentry release（仅 master）
   - 安全：GitHub Secret Scanning & Push Protection
 
 ## 部署（Vercel）
+
 - 步骤
   - 连接 Git 仓库（picspin/CTPhysics）
   - 配置环境变量（参考 docs/ENV.md）
@@ -69,6 +77,7 @@ CTPhysics 是一个用于学习与演示计算机断层扫描（CT）成像物
   - Production URL（合并到 master 后自动更新）
 
 ## 可观测性（可选：Sentry）
+
 - 启用方式
   - 创建 Sentry 项目与 DSN
   - 在环境变量中配置 SENTRY_DSN（参考 docs/ENV.md）
@@ -78,35 +87,46 @@ CTPhysics 是一个用于学习与演示计算机断层扫描（CT）成像物
   - 注意隐私和合规要求，避免上传敏感数据
 
 ## PCD 路线图摘要
+
 - 详见 docs/PCD_ROADMAP.md
   - 里程碑 M1～M4
   - QA 指标：MTF（调制传递函数）、NPS（噪声功率谱）、NEQ（等效量子数）
   - 测试目标：单元/端到端覆盖率
 
 ## 贡献
+
 - 欢迎贡献！请先阅读 CONTRIBUTING.md
   - 分支与提交流程（PR）
   - 代码风格与提交信息规范
   - 测试与环境管理要求
 
 ## 许可证
+
 - License：参见仓库根目录的 LICENSE 文件（例如 MIT）
 
 ## 相关文档
+
 - 环境变量：docs/ENV.md
 - 架构与设计：docs/ARCHITECTURE.md
 
-——
+## 架构图
+
+项目架构图使用 Mermaid 渲染，查看 [diagrams/architecture.html](../../diagrams/architecture.html)。
 
-English
+> **提示**：在 GitHub 上查看时，需要安装 [Mermaid Markdown Preview](https://marketplace.visualstudio.com/items?itemName=sporiley.mermaid-markdown) 等扩展；或访问在线渲染版本。
+
+---
 
 ## Overview
+
 CTPhysics is an interactive learning and demonstration platform for CT (Computed Tomography) imaging physics. It focuses on key parts of the imaging pipeline (sampling, reconstruction, noise and dose trade-offs) and uses lightweight visualizations and hands-on labs to clarify core physical concepts and engineering decisions.
 
 ## Live site
+
 - Production / demo: https://www.ct-physics.xyz
 
 ## Features
+
 - Interactive modules: sampling and filtering, reconstruction kernels, dose vs. noise trade-offs
 - Visual explanations: charts/curves/diagrams for relationships between physical quantities and image quality metrics
 - Multilingual: CN/EN content (i18n-ready)
@@ -114,6 +134,7 @@ CTPhysics is an interactive learning and demonstration platform for CT (Computed
 - Accessibility: strive for ARIA compliance and keyboard operability
 
 ## Tech stack
+
 - Frontend: React / Next.js with strict TypeScript
 - UI/Styling: Tailwind CSS + Radix UI (or similar)
 - Visualization: Canvas/WebGL as needed; D3/Plotly optional
@@ -121,6 +142,7 @@ CTPhysics is an interactive learning and demonstration platform for CT (Computed
 - Code quality: ESLint + Prettier (enforced in CI)
 
 ## Quick start
+
 1) Prerequisites
    - Node.js >= 18
    - Prefer pnpm (or npm / yarn)
@@ -135,6 +157,7 @@ CTPhysics is an interactive learning and demonstration platform for CT (Computed
    - pnpm build && pnpm start
 
 ## Testing (Vitest / Playwright)
+
 - Unit & integration with Vitest
   - Run: pnpm test
   - Coverage: pnpm test --coverage
@@ -145,6 +168,7 @@ CTPhysics is an interactive learning and demonstration platform for CT (Computed
   - Data & network: prefer reproducible fixtures and network mocks to avoid flakiness
 
 ## CI overview
+
 - GitHub Actions (example)
   - Triggers: PR / push to master
   - Stages: lint → type-check → unit tests (Vitest) → e2e (Playwright, optional) → build
@@ -154,6 +178,7 @@ CTPhysics is an interactive learning and demonstration platform for CT (Computed
   - Security: GitHub Secret Scanning & Push Protection
 
 ## Deployment (Vercel)
+
 - Steps
   - Connect repo (picspin/CTPhysics)
   - Configure environment variables (see docs/ENV.md)
@@ -164,6 +189,7 @@ CTPhysics is an interactive learning and demonstration platform for CT (Computed
   - Production URL (auto after merge to master)
 
 ## Observability (optional Sentry)
+
 - Enable
   - Create Sentry project and DSN
   - Configure SENTRY_DSN in env (see docs/ENV.md)
@@ -173,20 +199,30 @@ CTPhysics is an interactive learning and demonstration platform for CT (Computed
   - Respect privacy/compliance; avoid sensitive data
 
 ## PCD roadmap summary
+
 - See docs/PCD_ROADMAP.md
   - Milestones M1–M4
   - QA metrics: MTF (Modulation Transfer Function), NPS (Noise Power Spectrum), NEQ (Noise Equivalent Quanta)
   - Test coverage targets (unit/e2e)
 
 ## Contributing
+
 - Contributions are welcome! Please read CONTRIBUTING.md
   - Branch & PR workflow
   - Code style & commit message conventions
   - Testing & environment management requirements
 
 ## License
+
 - See LICENSE file at the repo root (e.g., MIT)
 
 ## Documentation links
+
 - Environment variables: docs/ENV.md
 - Architecture & design: docs/ARCHITECTURE.md
+
+## Architecture Diagram
+
+The project architecture is rendered with Mermaid. View [diagrams/architecture.html](../../diagrams/architecture.html).
+
+> **Tip**: When viewing on GitHub, install a Mermaid preview extension like [Mermaid Markdown Preview](https://marketplace.visualstudio.com/items?itemName=sporiley.mermaid-markdown), or visit the online rendered version.
diff --git a/diagrams/architecture.html b/diagrams/architecture.html
new file mode 100644
index 0000000..f9228bd
--- /dev/null
+++ b/diagrams/architecture.html
@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CTPhysics Architecture</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+  <style>
+    :root {
+      --bg: #f8f9fa;
+      --surface: #ffffff;
+      --border: rgba(0,0,0,0.08);
+      --text: #1a1a2e;
+      --text-dim: #6b7280;
+      --accent-teal: #0d9488;
+      --accent-teal-dim: rgba(13,148,136,0.1);
+      --accent-amber: #d97706;
+      --accent-amber-dim: rgba(217,119,6,0.1);
+      --accent-rose: #be123c;
+      --accent-rose-dim: rgba(190,18,60,0.1);
+      --accent-blue: #0369a1;
+      --accent-blue-dim: rgba(3,105,161,0.1);
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --bg: #0f1419;
+        --surface: #1a1f2e;
+        --border: rgba(255,255,255,0.08);
+        --text: #e7e9ea;
+        --text-dim: #8b98a5;
+        --accent-teal-dim: rgba(13,148,136,0.15);
+        --accent-amber-dim: rgba(217,119,6,0.15);
+        --accent-rose-dim: rgba(190,18,60,0.15);
+        --accent-blue-dim: rgba(3,105,161,0.15);
+      }
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: 'IBM Plex Sans', system-ui, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.6;
+      min-height: 100vh;
+    }
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+    header {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+    h1 {
+      font-size: 2rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+      letter-spacing: -0.02em;
+    }
+    .subtitle {
+      color: var(--text-dim);
+      font-size: 1rem;
+    }
+    .mermaid-wrap {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 1.5rem;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+    }
+    .zoom-controls {
+      display: flex;
+      gap: 0.5rem;
+      margin-bottom: 1rem;
+      justify-content: flex-end;
+    }
+    .zoom-controls button {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      color: var(--text);
+      padding: 0.375rem 0.75rem;
+      border-radius: 6px;
+      cursor: pointer;
+      font-family: 'IBM Plex Mono', monospace;
+      font-size: 0.75rem;
+      transition: all 0.15s ease;
+    }
+    .zoom-controls button:hover {
+      background: var(--accent-teal-dim);
+      border-color: var(--accent-teal);
+    }
+    .mermaid {
+      display: flex;
+      justify-content: center;
+      overflow: auto;
+    }
+    footer {
+      text-align: center;
+      margin-top: 2rem;
+      color: var(--text-dim);
+      font-size: 0.875rem;
+    }
+    footer a {
+      color: var(--accent-teal);
+      text-decoration: none;
+    }
+    footer a:hover {
+      text-decoration: underline;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>CTPhysics Architecture</h1>
+      <p class="subtitle">Interactive CT Imaging Physics Learning Platform</p>
+    </header>
+    
+    <div class="mermaid-wrap">
+      <div class="zoom-controls">
+        <button onclick="zoomIn()">+</button>
+        <button onclick="zoomOut()">−</button>
+        <button onclick="resetZoom()">Reset</button>
+      </div>
+      <div class="mermaid" id="architecture"></div>
+    </div>
+
+    <footer>
+      <p>Built with <a href="https://mermaid.js.org/">Mermaid</a> • <a href="https://github.com/picspin/CTPhysics">View on GitHub</a></p>
+    </footer>
+  </div>
+
+  <script>
+    mermaid.initialize({
+      startOnLoad: true,
+      theme: 'base',
+      themeVariables: {
+        primaryColor: '#0d9488',
+        primaryTextColor: '#fff',
+        primaryBorderColor: '#0f766e',
+        lineColor: '#6b7280',
+        secondaryColor: '#d97706',
+        tertiaryColor: '#f3f4f6',
+        background: 'transparent',
+        mainBkg: '#0d9488',
+        secondBkg: '#d97706',
+        nodeBorder: '#0f766e',
+        clusterBkg: '#f8f9fa',
+        clusterBorder: '#e5e7eb',
+        titleColor: '#1a1a2e',
+        edgeLabelBackground: '#ffffff',
+      },
+      flowchart: {
+        useMaxWidth: true,
+        htmlLabels: true,
+        curve: 'basis',
+        padding: 20,
+      }
+    });
+
+    const diagram = `
+graph TD
+    subgraph Client["Frontend (React/Next.js)"]
+        UI["UI Components<br/>Tailwind + Radix"]
+        Pages["Pages/Modules<br/>Sampling, Reconstruction<br/>Dose, Noise, MTF/NPS"]
+        Viz["Visualization Layer<br/>Canvas/WebGL/D3"]
+        State["State Management<br/>React Context/Zustand"]
+    end
+    
+    subgraph Core["Core Layer"]
+        Physics["Physics Library<br/>Pure Functions<br/>MTF, NPS, NEQ"]
+        Utils["Utilities<br/>i18n, Storage"]
+    end
+    
+    subgraph Data["Data & Testing"]
+        Fixtures["Test Fixtures<br/>Deterministic Data"]
+        E2E["E2E Tests<br/>Playwright"]
+        Unit["Unit Tests<br/>Vitest"]
+    end
+    
+    subgraph Ops["CI/CD & Ops"]
+        CI["GitHub Actions<br/>Lint → Test → Build"]
+        Deploy["Vercel<br/>Preview/Production"]
+        Sentry["Sentry<br/>Observability"]
+    end
+    
+    UI --> Viz
+    Pages --> UI
+    Pages --> State
+    State --> Physics
+    Viz --> Physics
+    Physics --> Fixtures
+    Fixtures --> Unit
+    Fixtures --> E2E
+    Unit --> CI
+    E2E --> CI
+    CI --> Deploy
+    Deploy --> Sentry
+    
+    classDef primary fill:#0d9488,stroke:#0f766e,color:#fff;
+    classDef secondary fill:#d97706,stroke:#b45309,color:#fff;
+    classDef tertiary fill:#f3f4f6,stroke:#e5e7eb,color:#374151;
+    classDef accent fill:#be123c,stroke:#9f1239,color:#fff;
+    
+    class Client,Pages,UI,Viz primary;
+    class Core,Physics,Utils secondary;
+    class Data,Fixtures,Unit,E2E tertiary;
+    class Ops,CI,Deploy,Sentry accent;
+    `;
+
+    document.getElementById('architecture').innerHTML = mermaid.render('arch-graph', diagram);
+
+    let scale = 1;
+    const container = document.querySelector('.mermaid');
+
+    function zoomIn() {
+      scale = Math.min(scale + 0.2, 3);
+      applyZoom();
+    }
+    function zoomOut() {
+      scale = Math.max(scale - 0.2, 0.3);
+      applyZoom();
+    }
+    function resetZoom() {
+      scale = 1;
+      applyZoom();
+    }
+    function applyZoom() {
+      container.style.transform = \`scale(\${scale})\`;
+      container.style.transformOrigin = 'top left';
+    }
+
+    container.addEventListener('wheel', (e) => {
+      if (e.ctrlKey) {
+        e.preventDefault();
+        if (e.deltaY < 0) zoomIn();
+        else zoomOut();
+      }
+    });
+  </script>
+</body>
+</html>