diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index de532c39e..d21b2386a 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -193,6 +193,12 @@ export default defineConfig({
           },
         ],
       },
+      {
+        text: "开发",
+        items: [
+          { text: "组件架构", link: "/develop/comp-arch" },
+        ],
+      },
     ],
 
     // 编辑链接
diff --git a/docs/assets/image/develop_comp_arch_1.png b/docs/assets/image/develop_comp_arch_1.png
new file mode 100644
index 000000000..cbc790f42
Binary files /dev/null and b/docs/assets/image/develop_comp_arch_1.png differ
diff --git a/docs/develop/comp-arch.md b/docs/develop/comp-arch.md
new file mode 100644
index 000000000..60e128d79
--- /dev/null
+++ b/docs/develop/comp-arch.md
@@ -0,0 +1,3 @@
+# 组件架构
+
+![组件架构图](/assets/image/develop_comp_arch_1.png)
\ No newline at end of file
diff --git a/docs/plugin/dev/extension.md b/docs/plugin/dev/extension.md
index 0d80fde25..073ef47da 100644
--- a/docs/plugin/dev/extension.md
+++ b/docs/plugin/dev/extension.md
@@ -14,6 +14,8 @@
 
 ## 可扩展的组件
 
+![组件扩展图](/assets/image/develop_comp_arch_1.png)
+
 扩展一个组件的方法，新建一个类，继承于组件的基类，然后在类上使用对应的装饰器，再根据使用方式来配置使用该实现的组件。
 
 大部分组件中包含了`ap: pkg.core.app.Application`对象，可以用这个对象来与整个程序的各个部分进行交互。