diff --git a/demo/component/audio-demo.py b/demo/component/audio-demo.py
new file mode 100644
index 0000000000000000000000000000000000000000..0dc2298375ed4218f121474403be812dafda1ad4
--- /dev/null
+++ b/demo/component/audio-demo.py
@@ -0,0 +1,54 @@
+# coding=utf-8
+import numpy as np
+import wave
+from visualdl import LogWriter
+
+
+def read_audio_data(audio_path):
+    """
+      读取音频数据
+    """
+    CHUNK = 4096
+    f = wave.open(audio_path, "rb")
+    wavdata = []
+    chunk = f.readframes(CHUNK)
+    while chunk:
+        data = np.fromstring(chunk, dtype='uint8')
+        wavdata.extend(data)
+        chunk = f.readframes(CHUNK)
+    # 8k sample rate, 16bit frame, 1 channel
+    shape = [8000, 2, 1]
+    return shape, wavdata
+
+
+# 创建一个 LogWriter 对象
+log_writter = LogWriter("./log", sync_cycle=10)
+
+# 创建audio组件，模式为train
+ns = 2
+with log_writter.mode("train") as logger:
+    input_audio = logger.audio(tag="test", num_samples=ns)
+
+# 一般要设定一个变量audio_sample_num，用来记录当前已采样了几段audio数据
+audio_sample_num = 0
+for step in range(9):
+    # 设置start_sampling() 的条件，满足条件时，开始采样
+    if audio_sample_num == 0:
+        input_audio.start_sampling()
+
+    # 获取 idx
+    idx = input_audio.is_sample_taken()
+    # 如果 idx != -1，采样，否则跳过
+    if idx != -1:
+        # 读取数据，音频文件的格式可以为.wav .mp3等
+        audio_path = "test.wav"
+        audio_shape, audio_data = read_audio_data(audio_path)
+
+        # 使用 set_sample()函数添加数据
+        input_audio.set_sample(idx, audio_shape, audio_data)
+        audio_sample_num += 1
+
+        # 如果完成了当前轮的采样，则调用finish_sample()
+        if audio_sample_num % ns == 0:
+            input_audio.finish_sampling()
+            audio_sample_num = 0
diff --git a/demo/component/audio_demo.py b/demo/component/audio_demo.py
deleted file mode 100644
index 8751e2d61e72cb804b22037270aba2cb5f49f88a..0000000000000000000000000000000000000000
--- a/demo/component/audio_demo.py
+++ /dev/null
@@ -1,53 +0,0 @@
-import numpy as np
-import wave
-from visualdl import LogWriter
-
-num_samples = 1
-
-
-def read_audio_data(audio_path):
-    CHUNK = 4096
-    f = wave.open(audio_path, "rb")
-    wavdata = []
-    chunk = f.readframes(CHUNK)
-
-    while chunk:
-        data = np.fromstring(chunk, dtype='uint8')
-        wavdata.extend(data)
-        chunk = f.readframes(CHUNK)
-
-    # 8k sample rate, 16bit frame, 1 channel
-    shape = [8000, 2, 1]
-
-    return shape, wavdata
-
-
-def record_audio(vdl_audio_comp):
-    sample_num = 0
-    record_times = num_samples * 3
-    audio_path = "test.wav"
-    for i in range(record_times):
-        if sample_num % num_samples == 0:
-            vdl_audio_comp.start_sampling()
-        idx = vdl_audio_comp.is_sample_taken()
-        if idx != -1:
-            audio_shape, audio_data = read_audio_data(audio_path)
-            vdl_audio_comp.set_sample(idx, audio_shape, audio_data)
-            sample_num += 1
-            if sample_num % num_samples == 0:
-                vdl_audio_comp.finish_sampling()
-                sample_num = 0
-
-
-def main():
-    log_writter = LogWriter("./vdl_log", sync_cycle=10)
-    with log_writter.mode("train") as logger:
-        vdl_audio_comp = logger.audio(tag="test", num_samples=num_samples)
-
-    # after record, use visualdl --logdir vdl_log to load the log info,
-    # and view the data in webpage
-    record_audio(vdl_audio_comp)
-
-
-if __name__ == "__main__":
-    main()
diff --git a/demo/component/embedding-demo.py b/demo/component/embedding-demo.py
new file mode 100644
index 0000000000000000000000000000000000000000..0166f64fb71131084739180b48dc25f661f42235
--- /dev/null
+++ b/demo/component/embedding-demo.py
@@ -0,0 +1,25 @@
+# coding=utf-8
+import numpy as np
+from visualdl import LogWriter
+
+# 创建一个LogWriter对象
+log_writer = LogWriter("./log", sync_cycle=10)
+
+# 创建一个 high dimensional 组件，模式设为 train
+with log_writer.mode("train") as logger:
+    train_embedding = logger.embedding()
+
+# 第一个参数为数据，数据类型为 List[List(float)]
+hot_vectors = np.random.uniform(1, 2, size=(10, 3))
+# 第二个参数为字典，数据类型为 Dict[str, int]
+# 其中第一个分量为坐标点的名称, 第二个分量为该坐标对应原数据的第几行分量
+word_dict = {
+    "label_1": 5,
+    "label_2": 4,
+    "label_3": 3,
+    "label_4": 2,
+    "label_5": 1,
+}
+
+# 使用 add_embeddings_with_word_dict(data, Dict)
+train_embedding.add_embeddings_with_word_dict(hot_vectors, word_dict)
diff --git a/demo/component/embeeding_demo.py b/demo/component/embeeding_demo.py
deleted file mode 100644
index f656fa12ae3c3675e12896f9eabc14b3336384b2..0000000000000000000000000000000000000000
--- a/demo/component/embeeding_demo.py
+++ /dev/null
@@ -1,27 +0,0 @@
-import numpy as np
-from visualdl import LogWriter
-
-
-def record_embedding(vdl_embedding_comp):
-    hot_vectors = np.random.uniform(1, 2, size=(10, 3))
-    word_dict = {
-        "label1": 1,
-        "label2": 2,
-        "label3": 3,
-    }
-
-    vdl_embedding_comp.add_embeddings_with_word_dict(hot_vectors, word_dict)
-
-
-def main():
-    log_writter = LogWriter("./vdl_log", sync_cycle=10)
-    with log_writter.mode("train") as logger:
-        vdl_embedding_comp = logger.embedding()
-
-    # after record, use visualdl --logdir vdl_log to load the log info,
-    # and view the data in webpage
-    record_embedding(vdl_embedding_comp)
-
-
-if __name__ == "__main__":
-    main()
diff --git a/demo/component/graph-demo.py b/demo/component/graph-demo.py
new file mode 100644
index 0000000000000000000000000000000000000000..eb57c207dd8ce28343589e30c8bc7419048eaeaf
--- /dev/null
+++ b/demo/component/graph-demo.py
@@ -0,0 +1,42 @@
+# coding=utf-8
+import paddle.fluid as fluid
+
+
+# 定义神经网络结构
+def lenet_5(img):
+    conv1 = fluid.nets.simple_img_conv_pool(
+        input=img,
+        filter_size=5,
+        num_filters=20,
+        pool_size=2,
+        pool_stride=2,
+        act="relu")
+
+    conv1_bn = fluid.layers.batch_norm(input=conv1)
+
+    conv2 = fluid.nets.simple_img_conv_pool(
+        input=conv1_bn,
+        filter_size=5,
+        num_filters=50,
+        pool_size=2,
+        pool_stride=2,
+        act="relu")
+
+    predition = fluid.layers.fc(input=conv2, size=10, act="softmax")
+    return predition
+
+
+# 变量赋值
+image = fluid.layers.data(name="img", shape=[1, 28, 28], dtype="float32")
+predition = lenet_5(image)
+
+place = fluid.CPUPlace()
+exe = fluid.Executor(place=place)
+exe.run(fluid.default_startup_program())
+
+# 将结果保存到./paddle_lenet_5_model
+fluid.io.save_inference_model(
+    "./paddle_lenet_5_model",
+    feeded_var_names=[image.name],
+    target_vars=[predition],
+    executor=exe)
diff --git a/demo/component/graph_demo.py b/demo/component/graph_demo.py
deleted file mode 100644
index 9c9581311f327fea9b499689d10191265504b60b..0000000000000000000000000000000000000000
--- a/demo/component/graph_demo.py
+++ /dev/null
@@ -1,44 +0,0 @@
-import paddle.fluid as fluid
-
-
-def lenet_5(img):
-    conv1 = fluid.nets.simple_img_conv_pool(
-        input=img,
-        filter_size=5,
-        num_filters=20,
-        pool_size=2,
-        pool_stride=2,
-        act="relu")
-
-    conv1_bn = fluid.layers.batch_norm(input=conv1)
-
-    conv2 = fluid.nets.simple_img_conv_pool(
-        input=conv1_bn,
-        filter_size=5,
-        num_filters=50,
-        pool_size=2,
-        pool_stride=2,
-        act="relu")
-
-    predition = fluid.layers.fc(input=conv2, size=10, act="softmax")
-    return predition
-
-
-def main():
-    image = fluid.layers.data(name="img", shape=[1, 28, 28], dtype="float32")
-    predition = lenet_5(image)
-
-    place = fluid.CPUPlace()
-    exe = fluid.Executor(place=place)
-    exe.run(fluid.default_startup_program())
-    # after record, use visualdl --logdir [LOGDIR] --model_pb paddle_lenet_5_model to load the model,
-    # and view the data in webpage
-    fluid.io.save_inference_model(
-        "./paddle_lenet_5_model",
-        feeded_var_names=[image.name],
-        target_vars=[predition],
-        executor=exe)
-
-
-if __name__ == "__main__":
-    main()
diff --git a/demo/component/histogram-demo.py b/demo/component/histogram-demo.py
new file mode 100644
index 0000000000000000000000000000000000000000..4dc084e0d33fcd17aec8f2df5885f7fc2c9c7d51
--- /dev/null
+++ b/demo/component/histogram-demo.py
@@ -0,0 +1,16 @@
+# coding=utf-8
+import numpy as np
+from visualdl import LogWriter
+# 创建LogWriter对象
+log_writer = LogWriter('./log', sync_cycle=10)
+# 创建histogram组件，模式为train
+with log_writer.mode("train") as logger:
+    param1_histogram = logger.histogram("param1", num_buckets=100)
+# 设定步数为 1 - 100
+for step in range(1, 101):
+    # 添加的数据为随机分布，所在区间值变小
+    interval_start = 1 + 2 * step / 100.0
+    interval_end = 6 - 2 * step / 100.0
+    data = np.random.uniform(interval_start, interval_end, size=(10000))
+    # 使用add_record()函数添加数据
+    param1_histogram.add_record(step, data)
diff --git a/demo/component/histogram_demo.py b/demo/component/histogram_demo.py
deleted file mode 100644
index 92f6ac1a61393dd63ad07ec6c175e93cbe1c769a..0000000000000000000000000000000000000000
--- a/demo/component/histogram_demo.py
+++ /dev/null
@@ -1,24 +0,0 @@
-import numpy as np
-from visualdl import LogWriter
-
-
-def record_histogram(vdl_histogram_comp):
-    for i in range(1, 101):
-        f = 1 + 2 * i / 100
-        t = 6 - 2 * i / 100
-        data = np.random.uniform(f, t, size=(500))
-        vdl_histogram_comp.add_record(i, data)
-
-
-def main():
-    log_writter = LogWriter("./vdl_log", sync_cycle=10)
-    with log_writter.mode("train") as logger:
-        vdl_histogram_comp = logger.histogram(tag="test", num_buckets=50)
-
-    # after record, use visualdl --logdir vdl_log to load the log info,
-    # and view the data in webpage
-    record_histogram(vdl_histogram_comp)
-
-
-if __name__ == "__main__":
-    main()
diff --git a/demo/component/image-demo.py b/demo/component/image-demo.py
new file mode 100644
index 0000000000000000000000000000000000000000..5b2f7882792de5201df66af50c9879124eacd707
--- /dev/null
+++ b/demo/component/image-demo.py
@@ -0,0 +1,49 @@
+# coding=utf-8
+import numpy as np
+from visualdl import LogWriter
+from PIL import Image
+
+
+def random_crop(img):
+    '''
+      此函数用于获取图片image的 100*100 的随机分块
+    '''
+    img = Image.open(img)
+    w, h = img.size
+    random_w = np.random.randint(0, w - 100)
+    random_h = np.random.randint(0, h - 100)
+    return img.crop((random_w, random_h, random_w + 100, random_h + 100))
+
+
+# 创建LogWriter对象
+log_writer = LogWriter("./log", sync_cycle=10)
+
+# 创建 image 组件，模式为train, 采样数设为 ns
+ns = 2
+with log_writer.mode("train") as logger:
+    input_image = logger.image(tag="test", num_samples=ns)
+
+# 一般要设置一个变量sample_num，用于记录当前已采样了几个image数据
+sample_num = 0
+for step in range(6):
+    # 设置start_sampling() 的条件，满足条件时，开始采样
+    if sample_num == 0:
+        input_image.start_sampling()
+
+# 获取idx
+    idx = input_image.is_sample_taken()
+    # 如果 idx != -1，采样，否则跳过
+    if idx != -1:
+        # 获取图片数据
+        image_path = "test.jpg"
+        image_data = np.array(random_crop(image_path))
+
+        # 使用 set_sample() 函数添加数据
+        # flatten() 用于把 ndarray 由矩阵变为行向量
+        input_image.set_sample(idx, image_data.shape, image_data.flatten())
+        sample_num += 1
+
+        # 如果完成了当前轮的采样，则调用finish_sample()
+        if sample_num % ns == 0:
+            input_image.finish_sampling()
+            sample_num = 0
diff --git a/demo/component/image_demo.py b/demo/component/image_demo.py
deleted file mode 100644
index efcc9642a1e8384a71de4988c83a61ba374dacb7..0000000000000000000000000000000000000000
--- a/demo/component/image_demo.py
+++ /dev/null
@@ -1,45 +0,0 @@
-import numpy as np
-from visualdl import LogWriter
-from PIL import Image
-
-num_samples = 1
-
-
-def random_crop(img):
-    img = Image.open(img)
-    w, h = img.size
-    random_w = np.random.randint(0, w - 100)
-    random_h = np.random.randint(0, h - 100)
-    return img.crop((random_w, random_h, random_w + 100, random_h + 100))
-
-
-def record_image(vdl_image_comp):
-    sample_num = 0
-    record_times = num_samples * 3
-    image_path = "test.jpg"
-    for i in range(record_times):
-        if sample_num % num_samples == 0:
-            vdl_image_comp.start_sampling()
-        idx = vdl_image_comp.is_sample_taken()
-        if idx != -1:
-            image_data = np.array(random_crop(image_path))
-            vdl_image_comp.set_sample(idx, image_data.shape,
-                                      image_data.flatten())
-            sample_num += 1
-            if sample_num % num_samples == 0:
-                vdl_image_comp.finish_sampling()
-                sample_num = 0
-
-
-def main():
-    log_writter = LogWriter("./vdl_log", sync_cycle=10)
-    with log_writter.mode("train") as logger:
-        vdl_image_comp = logger.image(tag="test", num_samples=num_samples)
-
-    # after record, use visualdl --logdir vdl_log to load the log info,
-    # and view the data in webpage
-    record_image(vdl_image_comp)
-
-
-if __name__ == "__main__":
-    main()
diff --git a/demo/component/scalar-demo.py b/demo/component/scalar-demo.py
new file mode 100644
index 0000000000000000000000000000000000000000..4b7e7d2023c92da2ade91c24abe2a7b02b2fa817
--- /dev/null
+++ b/demo/component/scalar-demo.py
@@ -0,0 +1,19 @@
+# coding=utf-8
+from visualdl import LogWriter
+# 创建LogWriter对象
+log_writer = LogWriter("./log", sync_cycle=20)
+# 创建 scalar 组件，模式为train,
+with log_writer.mode("train") as logger:
+    train_acc = logger.scalar("acc")
+    train_loss = logger.scalar("loss")
+# 创建 scalar 组件，模式设为 test， tag 设为 acc
+with log_writer.mode("test") as logger:
+    test_acc = logger.scalar("acc")
+value = [i / 1000.0 for i in range(1000)]
+for step in range(1000):
+    # 向名称为 acc 的图中添加模式为train的数据
+    train_acc.add_record(step, value[step])
+    # 向名称为 loss 的图中添加模式为train的数据
+    train_loss.add_record(step, 1 / (value[step] + 1))
+    # 向名称为 acc 的图中添加模式为test的数据
+    test_acc.add_record(step, 1 - value[step])
diff --git a/demo/component/scalar_demo.py b/demo/component/scalar_demo.py
deleted file mode 100644
index 7f2c33d222549577fc3984c3444ebfc044e8b7c2..0000000000000000000000000000000000000000
--- a/demo/component/scalar_demo.py
+++ /dev/null
@@ -1,20 +0,0 @@
-from visualdl import LogWriter
-
-
-def record_scalar(vdl_scalar_comp):
-    for i in range(1, 101):
-        vdl_scalar_comp.add_record(i, i**2)
-
-
-def main():
-    log_writter = LogWriter("./vdl_log", sync_cycle=10)
-    with log_writter.mode("train") as logger:
-        vdl_scalar_comp = logger.scalar(tag="test")
-
-    # after record, use visualdl --logdir vdl_log to load the log info,
-    # and view the data in webpage
-    record_scalar(vdl_scalar_comp)
-
-
-if __name__ == "__main__":
-    main()
diff --git a/demo/component/text-demo.py b/demo/component/text-demo.py
new file mode 100644
index 0000000000000000000000000000000000000000..c15867febf68b77e78d8a5b87570755009b383cc
--- /dev/null
+++ b/demo/component/text-demo.py
@@ -0,0 +1,14 @@
+# coding=utf-8
+from visualdl import LogWriter
+
+# 创建 LogWriter 对象
+log_writter = LogWriter("./log", sync_cycle=10)
+
+# 创建 text 组件，模式为 train， 标签为 test
+with log_writter.mode("train") as logger:
+    vdl_text_comp = logger.text(tag="test")
+
+# 使用 add_record() 函数添加数据
+for i in range(1, 6):
+    vdl_text_comp.add_record(i, "这是第 %d 个 Step 的数据。" % i)
+    vdl_text_comp.add_record(i, "This is data %d ." % i)
diff --git a/demo/component/text_demo.py b/demo/component/text_demo.py
deleted file mode 100644
index 0098f707843c8b16fbad0089168c9e6fa17740b0..0000000000000000000000000000000000000000
--- a/demo/component/text_demo.py
+++ /dev/null
@@ -1,20 +0,0 @@
-from visualdl import LogWriter
-
-
-def record_text(vdl_text_comp):
-    for i in range(1, 6):
-        vdl_text_comp.add_record(i, "this is test text_%d" % i)
-
-
-def main():
-    log_writter = LogWriter("./vdl_log", sync_cycle=10)
-    with log_writter.mode("train") as logger:
-        vdl_text_comp = logger.text(tag="test")
-
-    # after record, use visualdl --logdir vdl_log to load the log info,
-    # and view the data in webpage
-    record_text(vdl_text_comp)
-
-
-if __name__ == "__main__":
-    main()
diff --git a/demo/component/usage-interface/audio-interface.png b/demo/component/usage-interface/audio-interface.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c211475a6120ce667966c99162b3d1e299e8000
Binary files /dev/null and b/demo/component/usage-interface/audio-interface.png differ
diff --git a/demo/component/usage-interface/embedding-2D.png b/demo/component/usage-interface/embedding-2D.png
new file mode 100644
index 0000000000000000000000000000000000000000..c4e2643d357cadef810febb4d2c03323f986c062
Binary files /dev/null and b/demo/component/usage-interface/embedding-2D.png differ
diff --git a/demo/component/usage-interface/embedding-3D.png b/demo/component/usage-interface/embedding-3D.png
new file mode 100644
index 0000000000000000000000000000000000000000..747b01caa0cd60497d91e9189e41ca1f57419b81
Binary files /dev/null and b/demo/component/usage-interface/embedding-3D.png differ
diff --git a/demo/component/usage-interface/graph.png b/demo/component/usage-interface/graph.png
new file mode 100644
index 0000000000000000000000000000000000000000..2bb1ab29ca5f8692cae64608ae0f7fc3dedb1778
Binary files /dev/null and b/demo/component/usage-interface/graph.png differ
diff --git a/demo/component/usage-interface/histogram-interface.png b/demo/component/usage-interface/histogram-interface.png
new file mode 100644
index 0000000000000000000000000000000000000000..db3462ff9aa6fa9f807997ffbebb933351650a0e
Binary files /dev/null and b/demo/component/usage-interface/histogram-interface.png differ
diff --git a/demo/component/usage-interface/image-interface.png b/demo/component/usage-interface/image-interface.png
new file mode 100644
index 0000000000000000000000000000000000000000..1bf908066e9fdc5a0d6d8f33495d12c389c1563c
Binary files /dev/null and b/demo/component/usage-interface/image-interface.png differ
diff --git a/demo/component/usage-interface/scalar-interface.png b/demo/component/usage-interface/scalar-interface.png
new file mode 100644
index 0000000000000000000000000000000000000000..8b84649779961ffd2f684c6c3d68b99c5b9b27c0
Binary files /dev/null and b/demo/component/usage-interface/scalar-interface.png differ
diff --git a/demo/component/usage-interface/text-interface.png b/demo/component/usage-interface/text-interface.png
new file mode 100644
index 0000000000000000000000000000000000000000..78e6fdb3833f285f38e7fa799d7fedcedb278a19
Binary files /dev/null and b/demo/component/usage-interface/text-interface.png differ