diff --git a/zh-cn/application-dev/media/audio-capturer.md b/zh-cn/application-dev/media/audio-capturer.md
index 40dfa18e4dea4a40d6e068b7390e2588df36d5b3..50ca00d4938e97a1e3ad9c6cf4fd54864342907a 100644
--- a/zh-cn/application-dev/media/audio-capturer.md
+++ b/zh-cn/application-dev/media/audio-capturer.md
@@ -10,6 +10,10 @@ AudioCapturer提供了用于获取原始音频文件的方法。开发者可以
 
 详细API含义可参考：[音频管理API文档AudioCapturer](../reference/apis/js-apis-audio.md)
 
+**图1** 音频采集状态机
+
+![](figures/audio-capturer-state.png)
+
 ## 开发步骤
 
 1. 使用createAudioCapturer()创建一个AudioCapturer实例。
diff --git a/zh-cn/application-dev/media/audio-renderer.md b/zh-cn/application-dev/media/audio-renderer.md
index e1c2509561e1e3b9ab36e9119aac9a80b6ec4ef0..0699103caaef0c13d2a954210573b482707a9223 100644
--- a/zh-cn/application-dev/media/audio-renderer.md
+++ b/zh-cn/application-dev/media/audio-renderer.md
@@ -14,10 +14,16 @@ AudioRenderer提供了渲染音频文件和控制播放的接口，开发者可
 
 在进行应用开发的过程中，建议开发者通过on('stateChange')方法订阅AudioRenderer的状态变更。因为针对AudioRenderer的某些操作，仅在音频播放器在固定状态时才能执行。如果应用在音频播放器处于错误状态时执行操作，系统可能会抛出异常或生成其他未定义的行为。
 
+**图1** 音频渲染状态机
+
+![](figures/audio-renderer-state.png)
+
 ### 异步操作
 
 为保证UI线程不被阻塞，大部分AudioRenderer调用都是异步的。对于每个API均提供了callback函数和Promise函数，以下示例均采用Promise函数，更多方式可参考[音频管理API文档AudioRenderer](../reference/apis/js-apis-audio.md#audiorenderer8)。
 
+
+
 ## 开发步骤
 
 1. 使用createAudioRenderer()创建一个AudioRenderer实例。
diff --git a/zh-cn/application-dev/media/figures/audio-capturer-state.png b/zh-cn/application-dev/media/figures/audio-capturer-state.png
new file mode 100644
index 0000000000000000000000000000000000000000..52b5556260dbf78c5e816b37013248a07e8dbbc6
Binary files /dev/null and b/zh-cn/application-dev/media/figures/audio-capturer-state.png differ
diff --git a/zh-cn/application-dev/media/figures/audio-renderer-state.png b/zh-cn/application-dev/media/figures/audio-renderer-state.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ae30c2a9306dc85662405c36da9e11d07ed9a2a
Binary files /dev/null and b/zh-cn/application-dev/media/figures/audio-renderer-state.png differ