diff --git a/backend/src/main/java/io/metersphere/api/dto/share/ApiDocumentInfoDTO.java b/backend/src/main/java/io/metersphere/api/dto/share/ApiDocumentInfoDTO.java
index 06466d325a..de40cbf9ab 100644
--- a/backend/src/main/java/io/metersphere/api/dto/share/ApiDocumentInfoDTO.java
+++ b/backend/src/main/java/io/metersphere/api/dto/share/ApiDocumentInfoDTO.java
@@ -46,4 +46,5 @@ public class ApiDocumentInfoDTO {
     private String refId;
     private String versionId;
 
+    private String remark;
 }
diff --git a/backend/src/main/java/io/metersphere/api/service/ShareInfoService.java b/backend/src/main/java/io/metersphere/api/service/ShareInfoService.java
index ba0872e071..42710f9f64 100644
--- a/backend/src/main/java/io/metersphere/api/service/ShareInfoService.java
+++ b/backend/src/main/java/io/metersphere/api/service/ShareInfoService.java
@@ -402,6 +402,7 @@ public class ShareInfoService {
                     }
                 }
             }
+            apiInfoDTO.setRemark(apiModel.getRemark());
         }
         if (!previewJsonArray.isEmpty()) {
             if(previewJsonArray.size() == 1){
diff --git a/frontend/src/business/components/api/definition/components/document/components/ApiInformation.vue b/frontend/src/business/components/api/definition/components/document/components/ApiInformation.vue
index 42f4a7d59b..f4dfde555a 100644
--- a/frontend/src/business/components/api/definition/components/document/components/ApiInformation.vue
+++ b/frontend/src/business/components/api/definition/components/document/components/ApiInformation.vue
@@ -67,6 +67,8 @@
     <!--响应状态码-->
     <api-info-collapse :is-text="true" :string-data="getName(apiInfo.responseCode)"
                        :title="$t('api_test.definition.document.response_code')"/>
+    <!--  备注  -->
+    <api-remark-show :data="apiInfo.remark"></api-remark-show>
     <el-divider></el-divider>
   </div>
 </template>
@@ -76,6 +78,7 @@ import {API_METHOD_COLOUR} from "@/business/components/api/definition/model/Json
 import MsCodeEdit from "@/business/components/common/components/MsCodeEdit";
 import ApiStatus from "@/business/components/api/definition/components/list/ApiStatus";
 import MsJsonCodeEdit from "@/business/components/common/json-schema/JsonSchemaEditor";
+import ApiRemarkShow from "@/business/components/api/definition/components/document/components/ApiRemarkShow";
 import Api from "@/business/components/api/router";
 import {generateApiDocumentShareInfo} from "@/network/share";
 import ApiInfoCollapse from "@/business/components/api/definition/components/document/components/ApiInfoCollapse";
@@ -90,7 +93,7 @@ export default {
   components: {
     Api,
     MsJsonCodeEdit,
-    ApiStatus, MsCodeEdit, ApiInfoCollapse, ApiRequestInfo, ApiResponseInfo,
+    ApiStatus, MsCodeEdit, ApiInfoCollapse, ApiRequestInfo, ApiResponseInfo, ApiRemarkShow,
     "ApiDocumentBatchShare": apiDocumentBatchShare.default
   },
   data() {
diff --git a/frontend/src/business/components/api/definition/components/document/components/ApiRemarkShow.vue b/frontend/src/business/components/api/definition/components/document/components/ApiRemarkShow.vue
new file mode 100644
index 0000000000..e6c80bd750
--- /dev/null
+++ b/frontend/src/business/components/api/definition/components/document/components/ApiRemarkShow.vue
@@ -0,0 +1,73 @@
+<template>
+  <div v-if="remarkObj">
+    <el-row class="apiInfoRow">
+      <div class="blackFontClass">
+        <el-row>
+          <div class="tip" style="float: left">
+            <span>{{$t("commons.remark")}}</span>
+          </div>
+        </el-row>
+      </div>
+    </el-row>
+    <el-row>
+      <el-form>
+        <form-rich-text-item class="remark-item" :disabled="true" :data="remarkObj" prop="remark" label-width="0"/>
+      </el-form>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import formRichTextItem from "@/business/components/track/case/components/FormRichTextItem";
+export default {
+  name: "ApiRemarkShow",
+  components: {formRichTextItem},
+  data() {
+    return {
+      active: true,
+      remarkObj:null
+    };
+  },
+  props: {
+    data: String,
+  },
+  created() {
+  },
+  activated() {
+  },
+  mounted() {
+  },
+  computed: {},
+  watch: {
+    data(){
+      if(this.data){
+        this.remarkObj = {
+          "remark":this.data,
+        };
+      }
+    }
+  },
+  methods: {},
+};
+</script>
+
+<style scoped>
+.apiInfoRow {
+  margin: 10px 10px;
+}
+
+.apiInfoRow.el-row {
+  margin: 10px 10px;
+}
+
+.simpleFontClass {
+  font-weight: normal;
+  font-size: 14px;
+  margin-left: 10px;
+}
+
+.blackFontClass {
+  font-weight: bold;
+  font-size: 14px;
+}
+</style>
diff --git a/frontend/src/document/document.js b/frontend/src/document/document.js
index 5b3d9b47f0..8f1ab88954 100644
--- a/frontend/src/document/document.js
+++ b/frontend/src/document/document.js
@@ -13,6 +13,8 @@ import JSONPathPicker from 'vue-jsonpath-picker';
 Vue.use(JsonSchemaEditor);
 import VuePapaParse from 'vue-papa-parse'
 Vue.use(VuePapaParse)
+import mavonEditor from 'mavon-editor'
+Vue.use(mavonEditor)
 
 Vue.use(ElementUI, {
   i18n: (key, value) => i18n.t(key, value)