diff --git a/docs/architecture/01_architecture.md b/docs/architecture/01_architecture.md
index c0e47a8d..6b5b0ae0 100644
--- a/docs/architecture/01_architecture.md
+++ b/docs/architecture/01_architecture.md
@@ -16,10 +16,10 @@ Go+ Community is a community for Go+ developers. It provides a platform for deve
    - Interfaces: Includes create article interface (input article information, output creation result and article ID), read article interface (input article ID, output article information), update article interface (input article ID and new article information, output update result), delete article interface (input article ID, output deletion result), etc.
    - Behavior: Handles article CRUD requests, maintains article status, provides article search and sorting functions, etc.
 
-3. **Markdown Component**: (/cmd/gopcomm/yap)
+3. **Markdown Component**: (/markdown)
    - Description: Provides Markdown editor functionality.
    - Interfaces: Includes input for Markdown text, output for rendered HTML text, etc.
-   - Behavior: Converts Markdown text into HTML text, provides text editing and preview functions, etc.
+   - Behavior: Converts Markdown text into HTML text, provides text editing and preview functions, etc. Support load as UMD UI module.
 
 4. **Translate Package**: (/translation)
    - Description: Responsible for the translation of Markdown text and videos.
diff --git a/docs/architecture/04_markdown_component.md b/docs/architecture/04_markdown_component.md
index 7c788a68..d8b09c71 100644
--- a/docs/architecture/04_markdown_component.md
+++ b/docs/architecture/04_markdown_component.md
@@ -4,6 +4,8 @@
 
 The markdown module uses cherry-markdown to implement a markdown online editor, with an editing area on the left and a preview area on the right. Added highlighting for go+ languages.
 
+We export the markdown module with the UMD format, which can be used as a UI component in the browser.
+
 ## Module scope
 
 Module outputs user-edited markdown text, and inputs existing user markdown text.
@@ -14,61 +16,82 @@ None.
 
 ## Module Interface
 
-Provides details of the module's public interface, including function names, parameters, return values and possible errors.
+Provides a markdown editor and a markdown viewer. Use the markdown editor to edit markdown text, and use the markdown viewer to preview the markdown text as HTML.
+
 ```js
-submit_markdown () {
+import {MarkdownEditor, MarkdownViewer} from './GoplusMarkdown.js';
+
+const { createApp } = Vue
+
+createApp({
+  data() {
     return {
-        FormData {
-            title : String,
-            content: String,
-            content: String, trans.
-        }
+      message: 'Hello Goplus Markdown!'
     }
-}
+  },
+  components: {
+    MarkdownEditor: MarkdownEditor,
+    MarkdownViewer: MarkdownViewer
+  }
+}).mount('#app')
 ```
 
 ## Functions
 
-### gop rendering
+### Markdown editor
+
+- Function: Submits a user-edited markdown document.
+- input: None
+- Returns: None
+- Error: None
 
 Example:
 
-```gop
-// go+ code
-println ""
+```html
+<markdown-editor></markdown-editor>
+
+<script type="module">
+import {MarkdownEditor, MarkdownViewer} from './GoplusMarkdown.js';
+
+createApp({
+  data() {
+    return {
+      message: 'Hello Goplus markdown!'
+    }
+  },
+  components: {
+    MarkdownEditor: MarkdownEditor,
+  }
+}).mount('#app')
+
+</script>
 ```
 
-### submit_markdown
+### Markdown viewer
 
-- Function: Submits a user-edited markdown document.
-- input: none
-- Returns: None
-- Error: axios request exception
+- Function: Returns the HTML text of the markdown text.
+- input: markdown text
+- Returns: HTML text
+- Error: None
 
 Example:
 
-```js
-async submit_markdown() {
-    let data = {
-        title: 'Default Title',
-        content: this.getCherryContent(),
-        html_content: this.getCherryHtml()
+```html
+<markdown-viewer md="```gop ```"></markdown-viewer>
+
+<script type="module">
+import {MarkdownEditor, MarkdownViewer} from './GoplusMarkdown.js';
+
+createApp({
+  data() {
+    return {
+      message: 'Hello Goplus markdown!'
     }
-    axios({
-        method: 'post',
-        url: '/commit',
-        data: data,
-        headers: {
-        }
-    })
-    .then(response => {
-        console.log('内容发送成功');
-        console.log(response.data);
-        
-    })
-    .catch(error => {
-        console.error('内容发送失败');
-        console.error(error);
-    });
-},
+  },
+  components: {
+    MarkdownEditor: MarkdownEditor,
+  }
+}).mount('#app')
+
+</script>
 ```
\ No newline at end of file