From 6af5c584f45bef6d82192a91c1d51cb2b58a1b82 Mon Sep 17 00:00:00 2001
From: qixinbo <qixinbo@gmail.com>
Date: Sat, 18 Apr 2026 22:21:04 +0800
Subject: [PATCH] docs: update arch

---
 README.md    | 28 +++++++++++++++++++++++++++-
 README_en.md | 28 +++++++++++++++++++++++++++-
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 9950beb..acff494 100644
--- a/README.md
+++ b/README.md
@@ -49,13 +49,39 @@
 
 ## 🏗️ 项目架构
 
-DataClaw 的架构主要分为三只“大钳子”：
+DataClaw 的架构主要由四个核心部分组成：
 
 1. **`frontend/`** 🎨: 闪亮的外壳。基于 **React 19**、**Vite**、**TailwindCSS** 和 **Zustand** 构建。拥有类似微信/ChatGPT的对话界面、支持流式思考过程渲染以及交互式图表展示。
 2. **`backend/`** ⚙️: 强健的肌肉。一个 **FastAPI** 后端服务，负责管理项目、数据源连接、用户会话持久化以及作为 API 网关。
 3. **`nanobot/`** 🧠: 智慧的大脑。核心的 AI Agent 框架，负责处理意图路由、NL2SQL 转换、Schema 缓存管理以及与 LLM 的底层交互。
 4. **`data/`** 🗄️: 运行时数据目录。与代码目录解耦，存放上传文件、会话、技能工作区、报告与配置缓存。
 
+```mermaid
+graph TD
+    User([👤 用户 / 浏览器]) -->|HTTP / WebSocket| Frontend
+    
+    subgraph DataClaw 系统
+        Frontend[🎨 frontend<br/>React / Vite / Zustand]
+        Backend[⚙️ backend<br/>FastAPI / 会话 / 数据源管理]
+        Nanobot[🧠 nanobot<br/>AI Agent / NL2SQL / RAG]
+        Data[🗄️ data<br/>运行时文件 / 产物缓存]
+        
+        Frontend -->|REST API / SSE| Backend
+        Backend <-->|任务委派 / 函数调用| Nanobot
+        Backend -->|读写| Data
+        Nanobot -->|读写| Data
+    end
+    
+    subgraph 外部服务与数据
+        LLM([🤖 LLM 供应商<br/>OpenAI, DeepSeek, 智谱等])
+        DB[(📊 数据源<br/>PostgreSQL, CSV, Supabase等)]
+    end
+    
+    Nanobot <-->|Prompt / Completion| LLM
+    Backend <-->|连接 / 查询| DB
+    Nanobot -.->|Schema 检索 / SQL 执行| DB
+```
+
 ***
 
 ## 🚀 快速开始
diff --git a/README_en.md b/README_en.md
index d778865..12fbfeb 100644
--- a/README_en.md
+++ b/README_en.md
@@ -49,13 +49,39 @@ Whether you're querying a massive Supabase/PostgreSQL database or just tossing i
 
 ## 🏗️ Architecture
 
-DataClaw is divided into three main claws (components):
+DataClaw's architecture mainly consists of four core components:
 
 1. **`frontend/`** 🎨: The shiny shell. Built with **React 19**, **Vite**, **TailwindCSS**, and **Zustand**. It features a chat-like interface, streaming AI responses, and interactive Vega charts.
 2. **`backend/`** ⚙️: The muscle. A **FastAPI** application managing projects, data source connections, user sessions, and API gateways.
 3. **`nanobot/`** 🧠: The brain. The core AI agent framework handling NL2SQL, schema caching, prompt injection, and LLM routing.
 4. **`data/`** 🗄️: Runtime data root. Decoupled from code directories and used for uploads, sessions, workspace skills, reports, and cached configs.
 
+```mermaid
+graph TD
+    User([👤 User / Browser]) -->|HTTP / WebSocket| Frontend
+    
+    subgraph DataClaw System
+        Frontend[🎨 frontend<br/>React / Vite / Zustand]
+        Backend[⚙️ backend<br/>FastAPI / Session / Data Sources]
+        Nanobot[🧠 nanobot<br/>AI Agent / NL2SQL / RAG]
+        Data[🗄️ data<br/>Runtime Files / Artifacts]
+        
+        Frontend -->|REST API / SSE| Backend
+        Backend <-->|Task Delegation / Calling| Nanobot
+        Backend -->|Read / Write| Data
+        Nanobot -->|Read / Write| Data
+    end
+    
+    subgraph External Services
+        LLM([🤖 LLM Providers<br/>OpenAI, DeepSeek, etc.])
+        DB[(📊 Data Sources<br/>PostgreSQL, CSV, Supabase)]
+    end
+    
+    Nanobot <-->|Prompt / Completion| LLM
+    Backend <-->|Connect / Query| DB
+    Nanobot -.->|Schema Retrieval / Exec| DB
+```
+
 ***
 
 ## 🚀 Quick Start