diff --git a/README.md b/README.md
index 29ca624..4a8d048 100644
--- a/README.md
+++ b/README.md
@@ -68,24 +68,36 @@ export default () => {
 ## 🛠 Custom renderer
 
 ```jsx
-import { GPTVis, withDefaultChartCode, VisText } from '@antv/gpt-vis';
+import { GPTVisLite, withChartCode, ChartType, Pie } from '@antv/gpt-vis';
 
 const markdownContent = `
-<vis-text type="time_desc">本月</vis-text>共产生<vis-text type="metric_name">决策数量</vis-text><vis-text type="metric_value">2,783</vis-text>个，环比<vis-text type="trend_desc">增长</vis-text><vis-text type="ratio_value_pos">15.2%</vis-text>。<vis-text type="dim_name">高优先级决策</vis-text>占比<vis-text type="proportion">56.2%</vis-text>，呈现稳定<vis-text type="trend_desc" origin="[1, 2, 6, 18, 24, 48]">上升</vis-text>趋势，预计<vis-text type="time_desc">下月</vis-text>将突破<vis-text type="metric_value">3,000</vis-text>大关。
-
 \`\`\`my-ui
 my data
 \`\`\`
+
+\`\`\`vis-chart
+{
+  "type": "pie",
+  "data": [
+    { "category": "category 1", "value": 27 },
+    { "category": "category 2", "value": 25 },
+    { "category": "category 3", "value": 18 },
+    { "category": "other", "value": 5 }
+  ]
+}
+\`\`\`
 `;
 
 const customRenderers = { 'my-ui': ({ children }) => <div>{children}</div> };
 const components = {
-  'vis-text': VisText,
-  code: withDefaultChartCode({ languageRenderers: customRenderers }),
+  code: withChartCode({
+    languageRenderers: customRenderers, // register custom block renderer
+    components: { [ChartType.Pie]: Pie }, // register a pie chart
+  }),
 };
 
 export default () => {
-  return <GPTVis components={components}>{markdownContent}</GPTVis>;
+  return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
 };
 ```
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 1ab5404..014ea59 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -68,24 +68,36 @@ export default () => {
 ## 🛠 定制渲染器
 
 ```jsx
-import { GPTVis, withDefaultChartCode, VisText } from '@antv/gpt-vis';
+import { GPTVisLite, withChartCode, ChartType, Pie } from '@antv/gpt-vis';
 
 const markdownContent = `
-<vis-text type="time_desc">本月</vis-text>共产生<vis-text type="metric_name">决策数量</vis-text><vis-text type="metric_value">2,783</vis-text>个，环比<vis-text type="trend_desc">增长</vis-text><vis-text type="ratio_value_pos">15.2%</vis-text>。<vis-text type="dim_name">高优先级决策</vis-text>占比<vis-text type="proportion">56.2%</vis-text>，呈现稳定<vis-text type="trend_desc" origin="[1, 2, 6, 18, 24, 48]">上升</vis-text>趋势，预计<vis-text type="time_desc">下月</vis-text>将突破<vis-text type="metric_value">3,000</vis-text>大关。
-
 \`\`\`my-ui
 my data
 \`\`\`
+
+\`\`\`vis-chart
+{
+  "type": "pie",
+  "data": [
+    { "category": "分类一", "value": 27 },
+    { "category": "分类二", "value": 25 },
+    { "category": "分类三", "value": 18 },
+    { "category": "其他", "value": 5 }
+  ]
+}
+\`\`\`
 `;
 
 const customRenderers = { 'my-ui': ({ children }) => <div>{children}</div> };
 const components = {
-  'vis-text': VisText,
-  code: withDefaultChartCode({ languageRenderers: customRenderers }),
+  code: withChartCode({
+    languageRenderers: customRenderers, // register custom block renderer
+    components: { [ChartType.Pie]: Pie }, // register a pie chart
+  }),
 };
 
 export default () => {
-  return <GPTVis components={components}>{markdownContent}</GPTVis>;
+  return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
 };
 ```
 
diff --git a/docs/guide/quick-start.md b/docs/guide/quick-start.md
index 97b2b26..f2be67f 100644
--- a/docs/guide/quick-start.md
+++ b/docs/guide/quick-start.md
@@ -23,7 +23,21 @@ const markdownContent = `
 Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years.
 
 \`\`\`vis-chart
-{ "type": "line","data": [{"time":2013,"value":59.3},{"time":2014,"value":64.4},{"time":2015,"value":68.9},{"time":2016,"value":74.4},{"time":2017,"value":82.7},{"time":2018,"value":91.9},{"time":2019,"value":99.1},{"time":2020,"value":101.6},{"time":2021,"value":114.4},{"time":2022,"value":121}] }
+{
+  "type": "line",
+  "data": [
+    { "time":2013,"value":59.3 },
+    { "time":2014,"value":64.4 },
+    { "time":2015,"value":68.9 },
+    { "time":2016,"value":74.4 },
+    { "time":2017,"value":82.7 },
+    { "time":2018,"value":91.9 },
+    { "time":2019,"value":99.1 },
+    { "time":2020,"value":101.6 },
+    { "time":2021,"value":114.4 },
+    { "time":2022,"value":121 }
+  ]
+}
 \`\`\`
 `;
 
@@ -37,25 +51,39 @@ export default () => {
 业务定制 UI 场景，提供方便的扩展机制，支持标签和代码块扩展。
 
 ```tsx | pure
-import { GPTVis, withDefaultChartCode, VisText } from '@antv/gpt-vis';
+import { GPTVisLite, withChartCode, ChartType, Pie } from '@antv/gpt-vis';
 
 const markdownContent = `
 \`\`\`my-ui
 my data
 \`\`\`
 
-<vis-text type="time_desc">本月</vis-text>共产生<vis-text type="metric_name">决策数量</vis-text><vis-text type="metric_value">2,783</vis-text>个，环比<vis-text type="trend_desc">增长</vis-text><vis-text type="ratio_value_pos">15.2%</vis-text>。<vis-text type="dim_name">高优先级决策</vis-text>占比<vis-text type="proportion">56.2%</vis-text>，呈现稳定<vis-text type="trend_desc" origin="[1, 2, 6, 18, 24, 48]">上升</vis-text>趋势，预计<vis-text type="time_desc">下月</vis-text>将突破<vis-text type="metric_value">3,000</vis-text>大关。
+\`\`\`vis-chart
+{
+  "type": "pie",
+  "data": [
+    { "category": "分类一", "value": 27 },
+    { "category": "分类二", "value": 25 },
+    { "category": "分类三", "value": 18 },
+    { "category": "其他", "value": 5 }
+  ]
+}
+\`\`\`
 `;
 
 const customRenderers = {
   'my-ui': ({ children }) => <div>{children}</div>,
 };
 const components = {
-  'vis-text': VisText,
-  code: withDefaultChartCode({ languageRenderers: customRenderers }),
+  code: withChartCode({
+    // register custom block renderer
+    languageRenderers: customRenderers,
+    // register a pie chart
+    components: { [ChartType.Pie]: Pie },
+  }),
 };
 
 export default () => {
-  return <GPTVis components={components}>{markdownContent}</GPTVis>;
+  return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
 };
 ```
diff --git a/eslint.config.js b/eslint.config.js
index b98192d..53bb8ca 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -77,6 +77,7 @@ export default tseslint.config(
       '@typescript-eslint/no-duplicate-enum-values': 0,
       '@typescript-eslint/no-use-before-define': 0,
       '@typescript-eslint/no-empty-object-type': 0,
+      '@typescript-eslint/no-unused-expressions': ['error', { allowShortCircuit: true }],
     },
   },
 
diff --git a/src/Area/demos/markdown.tsx b/src/Area/demos/markdown.tsx
index 66b109c..7c4e35f 100644
--- a/src/Area/demos/markdown.tsx
+++ b/src/Area/demos/markdown.tsx
@@ -1,6 +1,6 @@
 import type { BubbleProps } from '@ant-design/x';
 import { Bubble } from '@ant-design/x';
-import { Area, ChartType, GPTVis, withChartCode } from '@antv/gpt-vis';
+import { Area, ChartType, GPTVisLite, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -29,7 +29,7 @@ const CodeComponent = withChartCode({
   style: { width: 350 },
 });
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/Area/demos/stack.tsx b/src/Area/demos/stack.tsx
index c71ba1f..5022e8e 100644
--- a/src/Area/demos/stack.tsx
+++ b/src/Area/demos/stack.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { Area, ChartType, GPTVis, withChartCode } from '@antv/gpt-vis';
+import { Area, ChartType, GPTVisLite, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -91,7 +91,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/Bar/demos/group.tsx b/src/Bar/demos/group.tsx
index 9dc2be7..6ec40cc 100644
--- a/src/Bar/demos/group.tsx
+++ b/src/Bar/demos/group.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { Bar, ChartType, GPTVis, withChartCode } from '@antv/gpt-vis';
+import { Bar, ChartType, GPTVisLite, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -46,7 +46,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/Bar/demos/markdown.tsx b/src/Bar/demos/markdown.tsx
index e24da85..c22c7d3 100644
--- a/src/Bar/demos/markdown.tsx
+++ b/src/Bar/demos/markdown.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { Bar, ChartType, GPTVis, withChartCode } from '@antv/gpt-vis';
+import { Bar, ChartType, GPTVisLite, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -37,7 +37,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/Bar/demos/stack.tsx b/src/Bar/demos/stack.tsx
index 9255d9a..5de2069 100644
--- a/src/Bar/demos/stack.tsx
+++ b/src/Bar/demos/stack.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { Bar, ChartType, GPTVis, withChartCode } from '@antv/gpt-vis';
+import { Bar, ChartType, GPTVisLite, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -45,7 +45,7 @@ const CodeComponent = withChartCode({
   components: { [ChartType.Bar]: Bar },
 });
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/ChartCodeRender/demos/common.tsx b/src/ChartCodeRender/demos/common.tsx
index a68d42f..e879c4a 100644
--- a/src/ChartCodeRender/demos/common.tsx
+++ b/src/ChartCodeRender/demos/common.tsx
@@ -1,4 +1,4 @@
-import { ChartType, Column, GPTVis, withChartCode } from '@antv/gpt-vis';
+import { ChartType, Column, GPTVisLite, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -24,12 +24,12 @@ const CodeComponent = withChartCode({
 
 export default () => {
   return (
-    <GPTVis
+    <GPTVisLite
       components={{
         code: CodeComponent,
       }}
     >
       {markdownContent}
-    </GPTVis>
+    </GPTVisLite>
   );
 };
diff --git a/src/ChartCodeRender/demos/default.tsx b/src/ChartCodeRender/demos/default.tsx
index b3d543d..55a04ed 100644
--- a/src/ChartCodeRender/demos/default.tsx
+++ b/src/ChartCodeRender/demos/default.tsx
@@ -1,4 +1,4 @@
-import { GPTVis, withDefaultChartCode } from '@antv/gpt-vis';
+import { GPTVisLite, withDefaultChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const commonString = `
@@ -30,13 +30,13 @@ const CodeComponent = withDefaultChartCode({
 
 export default () => (
   <div>
-    <GPTVis>{commonString}</GPTVis>
-    <GPTVis
+    <GPTVisLite>{commonString}</GPTVisLite>
+    <GPTVisLite
       components={{
         code: CodeComponent,
       }}
     >
       {markdownContent}
-    </GPTVis>
+    </GPTVisLite>
   </div>
 );
diff --git a/src/ChartCodeRender/demos/extra.tsx b/src/ChartCodeRender/demos/extra.tsx
index 38a1ca1..41bf031 100644
--- a/src/ChartCodeRender/demos/extra.tsx
+++ b/src/ChartCodeRender/demos/extra.tsx
@@ -1,5 +1,5 @@
 import type { CodeBlockComponent } from '@antv/gpt-vis';
-import { GPTVis, withDefaultChartCode } from '@antv/gpt-vis';
+import { GPTVisLite, withDefaultChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 /**
@@ -16,14 +16,20 @@ my data ...
 
 \`\`\`vis-chart
 {
-  "type": "pie",
-  "data": [
-    { "category": "分类一", "value": 27 },
-    { "category": "分类二", "value": 25 },
-    { "category": "分类三", "value": 18 },
-    { "category": "分类四", "value": 15 },
-    { "category": "分类五", "value": 10 },
-    { "category": "其他", "value": 5 }
+   "type": "pin-map",
+   "data": [
+    { "label": "杨梅岭", "longitude": 120.118362, "latitude": 30.217175 },
+    { "label": "理安寺", "longitude": 120.112958, "latitude": 30.207319 },
+    { "label": "九溪烟树", "longitude": 120.11335, "latitude": 30.202395 },
+    { "label": "飞来峰", "longitude": 120.100549, "latitude": 30.236875 },
+    { "label": "灵隐寺", "longitude": 120.101406, "latitude": 30.240826 },
+    { "label": "天竺三寺", "longitude": 120.105337, "latitude": 30.236818 },
+    { "label": "杭州植物园", "longitude": 120.116979, "latitude": 30.252876 },
+    { "label": "杭州花圃", "longitude": 120.127654, "latitude": 30.245663 },
+    { "label": "苏堤", "longitude": 120.135764, "latitude": 30.251448 },
+    { "label": "虎跑公园", "longitude": 120.130095, "latitude": 30.207505 },
+    { "label": "玉皇飞云", "longitude": 120.145323, "latitude": 30.214993 },
+    { "label": "长桥公园", "longitude": 120.155057, "latitude": 30.232985 }
   ]
 }
 \`\`\`
@@ -38,12 +44,12 @@ const CodeComponent = withDefaultChartCode({
 
 export default () => (
   <div>
-    <GPTVis
+    <GPTVisLite
       components={{
         code: CodeComponent,
       }}
     >
       {markdownContent}
-    </GPTVis>
+    </GPTVisLite>
   </div>
 );
diff --git a/src/ChartCodeRender/demos/stream.tsx b/src/ChartCodeRender/demos/stream.tsx
index c125197..46ee6eb 100644
--- a/src/ChartCodeRender/demos/stream.tsx
+++ b/src/ChartCodeRender/demos/stream.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, Column, GPTVis, withChartCode } from '@antv/gpt-vis';
+import { ChartType, Column, GPTVisLite, withChartCode } from '@antv/gpt-vis';
 import React, { useEffect, useRef, useState } from 'react';
 
 const markdownContent = `
@@ -32,7 +32,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 const useStreamText = () => {
diff --git a/src/Column/demos/group.tsx b/src/Column/demos/group.tsx
index 74a2cff..eaa4a0d 100644
--- a/src/Column/demos/group.tsx
+++ b/src/Column/demos/group.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, Column, GPTVis, withChartCode } from '@antv/gpt-vis';
+import { ChartType, Column, GPTVisLite, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -40,7 +40,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/Column/demos/markdown.tsx b/src/Column/demos/markdown.tsx
index 43b497f..0d43ad2 100644
--- a/src/Column/demos/markdown.tsx
+++ b/src/Column/demos/markdown.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, Column, GPTVis, withChartCode } from '@antv/gpt-vis';
+import { ChartType, Column, GPTVisLite, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -29,7 +29,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/Column/demos/stack.tsx b/src/Column/demos/stack.tsx
index ec02f0c..aa70df2 100644
--- a/src/Column/demos/stack.tsx
+++ b/src/Column/demos/stack.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, Column, GPTVis, withChartCode } from '@antv/gpt-vis';
+import { ChartType, Column, GPTVisLite, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -40,7 +40,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/DualAxes/demos/markdown.tsx b/src/DualAxes/demos/markdown.tsx
index fc346ae..a9ae3fa 100644
--- a/src/DualAxes/demos/markdown.tsx
+++ b/src/DualAxes/demos/markdown.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, DualAxes, GPTVis, withChartCode } from '@antv/gpt-vis';
+import { ChartType, DualAxes, GPTVisLite, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -39,7 +39,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/DualAxes/demos/multiple.tsx b/src/DualAxes/demos/multiple.tsx
index 56ad3a0..3f50984 100644
--- a/src/DualAxes/demos/multiple.tsx
+++ b/src/DualAxes/demos/multiple.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, DualAxes, GPTVis, withChartCode } from '@antv/gpt-vis';
+import { ChartType, DualAxes, GPTVisLite, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -96,7 +96,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/FlowDiagram/demos/markdown.tsx b/src/FlowDiagram/demos/markdown.tsx
index 54fd245..7235a48 100644
--- a/src/FlowDiagram/demos/markdown.tsx
+++ b/src/FlowDiagram/demos/markdown.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, FlowDiagram, GPTVis, withChartCode } from '@antv/gpt-vis';
+import { ChartType, FlowDiagram, GPTVisLite, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -43,7 +43,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/GPTVis/Lite.tsx b/src/GPTVis/Lite.tsx
new file mode 100644
index 0000000..2ae3e60
--- /dev/null
+++ b/src/GPTVis/Lite.tsx
@@ -0,0 +1,32 @@
+import React, { memo } from 'react';
+import type { Options } from 'react-markdown';
+import Markdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+export interface GPTVisLiteProps extends Options {
+  /** 自定义 markdown components样式 */
+  components?:
+    | Options['components']
+    | {
+        [key: string]: (props: any) => React.ReactNode;
+      };
+}
+
+const GPTVisLite: React.FC<GPTVisLiteProps> = ({
+  children,
+  components,
+  rehypePlugins,
+  ...rest
+}) => {
+  return (
+    <Markdown
+      components={components}
+      rehypePlugins={[rehypeRaw, ...(rehypePlugins ? rehypePlugins : [])]}
+      {...rest}
+    >
+      {children}
+    </Markdown>
+  );
+};
+
+export default memo(GPTVisLite);
diff --git a/src/GPTVis/demos/code.tsx b/src/GPTVis/demos/code.tsx
index e3de201..5d71435 100644
--- a/src/GPTVis/demos/code.tsx
+++ b/src/GPTVis/demos/code.tsx
@@ -1,5 +1,5 @@
 import type { CodeBlockComponent } from '@antv/gpt-vis';
-import { ChartType, GPTVis, PinMap, withChartCode } from '@antv/gpt-vis';
+import { ChartType, GPTVisLite, Pie, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 /**
@@ -8,11 +8,11 @@ import React from 'react';
 const MyUIRenderer: CodeBlockComponent = ({ children }) => {
   return <div style={{ backgroundColor: '#f0f0f0', padding: '10px' }}>{children}</div>;
 };
-
+const customRenderers = { 'my-ui': MyUIRenderer };
 const components = {
   code: withChartCode({
-    languageRenderers: { kotlin: MyUIRenderer },
-    components: { [ChartType.PinMap]: PinMap },
+    languageRenderers: customRenderers, // register custom block renderer
+    components: { [ChartType.Pie]: Pie }, // register a pie chart
   }),
 };
 
@@ -23,22 +23,16 @@ my data ...
 
 \`\`\`vis-chart
 {
-   "type": "pin-map",
-   "data": [
-    { "label": "杨梅岭", "longitude": 120.118362, "latitude": 30.217175 },
-    { "label": "理安寺", "longitude": 120.112958, "latitude": 30.207319 },
-    { "label": "九溪烟树", "longitude": 120.11335, "latitude": 30.202395 },
-    { "label": "飞来峰", "longitude": 120.100549, "latitude": 30.236875 },
-    { "label": "灵隐寺", "longitude": 120.101406, "latitude": 30.240826 },
-    { "label": "天竺三寺", "longitude": 120.105337, "latitude": 30.236818 },
-    { "label": "杭州植物园", "longitude": 120.116979, "latitude": 30.252876 },
-    { "label": "杭州花圃", "longitude": 120.127654, "latitude": 30.245663 },
-    { "label": "苏堤", "longitude": 120.135764, "latitude": 30.251448 },
-    { "label": "虎跑公园", "longitude": 120.130095, "latitude": 30.207505 },
-    { "label": "玉皇飞云", "longitude": 120.145323, "latitude": 30.214993 },
-    { "label": "长桥公园", "longitude": 120.155057, "latitude": 30.232985 }
+  "type": "pie",
+  "data": [
+    { "category": "分类一", "value": 27 },
+    { "category": "分类二", "value": 25 },
+    { "category": "分类三", "value": 18 },
+    { "category": "分类四", "value": 15 },
+    { "category": "分类五", "value": 10 },
+    { "category": "其他", "value": 5 }
   ]
 }
 \`\`\`
 `;
-export default () => <GPTVis components={components}>{content}</GPTVis>;
+export default () => <GPTVisLite components={components}>{content}</GPTVisLite>;
diff --git a/src/GPTVis/demos/default.tsx b/src/GPTVis/demos/default.tsx
index aa340b6..800564b 100644
--- a/src/GPTVis/demos/default.tsx
+++ b/src/GPTVis/demos/default.tsx
@@ -10,8 +10,6 @@ const content = `# GPT-VIS \n\nComponents for GPTs, generative AI, and LLM proje
     { "category": "分类一", "value": 27 },
     { "category": "分类二", "value": 25 },
     { "category": "分类三", "value": 18 },
-    { "category": "分类四", "value": 15 },
-    { "category": "分类五", "value": 10 },
     { "category": "其他", "value": 5 }
   ]
 }
diff --git a/src/GPTVis/demos/tag.tsx b/src/GPTVis/demos/tag.tsx
index 489ff0c..5ea0a76 100644
--- a/src/GPTVis/demos/tag.tsx
+++ b/src/GPTVis/demos/tag.tsx
@@ -1,4 +1,4 @@
-import { GPTVis, withDefaultChartCode } from '@antv/gpt-vis';
+import { GPTVisLite, withDefaultChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const components = {
@@ -45,4 +45,4 @@ Here’s a visualization of [Haidilao](/)'s food delivery revenue from 2013 to 2
 }
 \`\`\`
 `;
-export default () => <GPTVis components={components}>{content}</GPTVis>;
+export default () => <GPTVisLite components={components}>{content}</GPTVisLite>;
diff --git a/src/GPTVis/index.md b/src/GPTVis/index.md
index 232d97a..291dc62 100644
--- a/src/GPTVis/index.md
+++ b/src/GPTVis/index.md
@@ -11,6 +11,8 @@ GPTVis 协议的 Markdown 渲染器，基于 Markdown 语法扩展 `vis-chart` 
 
 ## 基础使用
 
+`GPTVis` 组件内置了[默认的图表](https://github.com/antvis/GPT-Vis/tree/main/src/export.ts#L76)，接入简单
+
 <code src="./demos/default"></code>
 
 ## 自定义标签渲染
@@ -19,6 +21,8 @@ GPTVis 协议的 Markdown 渲染器，基于 Markdown 语法扩展 `vis-chart` 
 
 ## 自定义 code 渲染块
 
+自定义代码块渲染，`GPTVisLite` 不内置图表组件，使用图表组件需要注册。
+
 <code src="./demos/code"></code>
 
 ## API
diff --git a/src/HeatMap/index.md b/src/HeatMap/index.md
index 8bbcca6..1984622 100644
--- a/src/HeatMap/index.md
+++ b/src/HeatMap/index.md
@@ -52,7 +52,7 @@ export default () => <HeatMap data={data} />;
 
 ```tsx
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { HeatMap, withChartCode, ChartType, GPTVis } from '@antv/gpt-vis';
+import { HeatMap, withChartCode, ChartType, GPTVisLite } from '@antv/gpt-vis';
 
 const bgStyle = {
   display: 'grid',
@@ -157,7 +157,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => {
diff --git a/src/Histogram/demos/markdown.tsx b/src/Histogram/demos/markdown.tsx
index de7e0d9..7c07045 100644
--- a/src/Histogram/demos/markdown.tsx
+++ b/src/Histogram/demos/markdown.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, GPTVis, Histogram, withChartCode } from '@antv/gpt-vis';
+import { ChartType, GPTVisLite, Histogram, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -317,7 +317,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/IndentedTree/demos/markdown.tsx b/src/IndentedTree/demos/markdown.tsx
index 255326f..2bcbd49 100644
--- a/src/IndentedTree/demos/markdown.tsx
+++ b/src/IndentedTree/demos/markdown.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, GPTVis, IndentedTree, withChartCode } from '@antv/gpt-vis';
+import { ChartType, GPTVisLite, IndentedTree, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -53,7 +53,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/Line/demos/category.tsx b/src/Line/demos/category.tsx
index b6eac66..d7afb2e 100644
--- a/src/Line/demos/category.tsx
+++ b/src/Line/demos/category.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, GPTVis, Line, withChartCode } from '@antv/gpt-vis';
+import { ChartType, GPTVisLite, Line, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -88,7 +88,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/Line/demos/markdown.tsx b/src/Line/demos/markdown.tsx
index e1a1a1d..2810a1b 100644
--- a/src/Line/demos/markdown.tsx
+++ b/src/Line/demos/markdown.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, GPTVis, Line, withChartCode } from '@antv/gpt-vis';
+import { ChartType, GPTVisLite, Line, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -29,7 +29,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/MindMap/demos/markdown.tsx b/src/MindMap/demos/markdown.tsx
index c0cb9b5..84acb38 100644
--- a/src/MindMap/demos/markdown.tsx
+++ b/src/MindMap/demos/markdown.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, GPTVis, MindMap, withChartCode } from '@antv/gpt-vis';
+import { ChartType, GPTVisLite, MindMap, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -49,7 +49,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/NetworkGraph/demos/markdown.tsx b/src/NetworkGraph/demos/markdown.tsx
index e599b7b..5e28175 100644
--- a/src/NetworkGraph/demos/markdown.tsx
+++ b/src/NetworkGraph/demos/markdown.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, GPTVis, NetworkGraph, withChartCode } from '@antv/gpt-vis';
+import { ChartType, GPTVisLite, NetworkGraph, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -40,7 +40,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/OrganizationChart/demos/markdown.tsx b/src/OrganizationChart/demos/markdown.tsx
index 2aaf432..82c42a8 100644
--- a/src/OrganizationChart/demos/markdown.tsx
+++ b/src/OrganizationChart/demos/markdown.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, GPTVis, OrganizationChart, withChartCode } from '@antv/gpt-vis';
+import { ChartType, GPTVisLite, OrganizationChart, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -36,7 +36,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/PathMap/demos/markdown.tsx b/src/PathMap/demos/markdown.tsx
index def92e9..1e89b5b 100644
--- a/src/PathMap/demos/markdown.tsx
+++ b/src/PathMap/demos/markdown.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, ConfigProvider, GPTVis, PathMap, withChartCode } from '@antv/gpt-vis';
+import { ChartType, ConfigProvider, GPTVisLite, PathMap, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const bgStyle = {
@@ -121,7 +121,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => {
diff --git a/src/Pie/demos/markdown.tsx b/src/Pie/demos/markdown.tsx
index 6ba190b..4a00dbd 100644
--- a/src/Pie/demos/markdown.tsx
+++ b/src/Pie/demos/markdown.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, GPTVis, Pie, withChartCode } from '@antv/gpt-vis';
+import { ChartType, GPTVisLite, Pie, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -35,7 +35,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/PinMap/demos/markdown.tsx b/src/PinMap/demos/markdown.tsx
index f40734e..fb979b3 100644
--- a/src/PinMap/demos/markdown.tsx
+++ b/src/PinMap/demos/markdown.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, ConfigProvider, GPTVis, PinMap, withChartCode } from '@antv/gpt-vis';
+import { ChartType, ConfigProvider, GPTVisLite, PinMap, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const bgStyle = {
@@ -11,7 +11,7 @@ const bgStyle = {
 };
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 const markdownContent = `
diff --git a/src/Radar/demos/category.tsx b/src/Radar/demos/category.tsx
index dcc0612..bdaf4e7 100644
--- a/src/Radar/demos/category.tsx
+++ b/src/Radar/demos/category.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, GPTVis, Radar, withChartCode } from '@antv/gpt-vis';
+import { ChartType, GPTVisLite, Radar, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -39,7 +39,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/Radar/demos/markdown.tsx b/src/Radar/demos/markdown.tsx
index 3fe498f..fa55cc6 100644
--- a/src/Radar/demos/markdown.tsx
+++ b/src/Radar/demos/markdown.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, GPTVis, Radar, withChartCode } from '@antv/gpt-vis';
+import { ChartType, GPTVisLite, Radar, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -33,7 +33,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/Scatter/demos/markdown.tsx b/src/Scatter/demos/markdown.tsx
index 3aaa2d8..dd17174 100644
--- a/src/Scatter/demos/markdown.tsx
+++ b/src/Scatter/demos/markdown.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, GPTVis, Scatter, withChartCode } from '@antv/gpt-vis';
+import { ChartType, GPTVisLite, Scatter, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -79,7 +79,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/Treemap/demos/markdown.tsx b/src/Treemap/demos/markdown.tsx
index 79b343f..4e5e4cd 100644
--- a/src/Treemap/demos/markdown.tsx
+++ b/src/Treemap/demos/markdown.tsx
@@ -1,5 +1,5 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { ChartType, GPTVis, Treemap, withChartCode } from '@antv/gpt-vis';
+import { ChartType, GPTVisLite, Treemap, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 const markdownContent = `
@@ -37,7 +37,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => (
diff --git a/src/WordCloud/index.md b/src/WordCloud/index.md
index 484ae0b..a9ba2b3 100644
--- a/src/WordCloud/index.md
+++ b/src/WordCloud/index.md
@@ -123,7 +123,7 @@ export default () => <WordCloud data={data} containerStyle={{ height: 300 }} />;
 
 ```tsx
 import { Bubble, type BubbleProps } from '@ant-design/x';
-import { WordCloud, withChartCode, ChartType, GPTVis } from '@antv/gpt-vis';
+import { WordCloud, withChartCode, ChartType, GPTVisLite } from '@antv/gpt-vis';
 
 const bgStyle = {
   display: 'grid',
@@ -170,7 +170,7 @@ const CodeComponent = withChartCode({
 });
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ code: CodeComponent }}>{content}</GPTVis>
+  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
 );
 
 export default () => {
diff --git a/src/index.ts b/src/index.ts
index 9ca8e80..1216fcf 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -4,5 +4,6 @@ export { default as version } from './version';
 export { withChartCode, withDefaultChartCode } from './ChartCodeRender';
 export type { CodeBlockComponent, WithChartCodeOptions } from './ChartCodeRender/type';
 export { default as GPTVis, type GPTVisProps } from './GPTVis';
+export { default as GPTVisLite, type GPTVisLiteProps } from './GPTVis/Lite';
 
 export * from './types';