From 1d9dd906e30e8385f4b6e415cde98bcc4422cb9c Mon Sep 17 00:00:00 2001
From: baurine <2008.hbl@gmail.com>
Date: Sat, 13 Mar 2021 22:26:59 +0800
Subject: [PATCH] update README and guide

---
 README.md    | 73 ++++++++++++++++++++++++++--------------------------
 doc/guide.md | 25 +++++++++++++-----
 2 files changed, 55 insertions(+), 43 deletions(-)

diff --git a/README.md b/README.md
index 0f78996..54c1158 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,8 @@ Do all the things just in your favorite Visual Studio Code:
 - Debug TiDB Cluster on Kubernetes
 - And mooooooooore!
 
+> Note: currently we only test it in macOS, and we plan to support Ubuntu as well.
+
 ## Community
 
 ### Slack
@@ -35,36 +37,46 @@ Join our [slack channel](https://slack.tidb.io/invite?team=tidb-community&channe
 
 ## Demo
 
-Scaffold:
+### Playground
 
-- Bilibiili: https://www.bilibili.com/video/BV12A411H74T/
+Video: https://www.bilibili.com/video/BV1pK411u7S4/
 
-Debug:
+![image](https://user-images.githubusercontent.com/1284531/104793321-f7fe6c80-57dc-11eb-8b51-a25a6690d87a.png)
 
-![debug](https://user-images.githubusercontent.com/18556593/104743603-d70b2c80-5786-11eb-988b-8f8c3f2daeae.gif)
+### Debug
 
-Bilibili: https://www.bilibili.com/video/BV12p4y1x7w8/
+Video: https://www.bilibili.com/video/BV12p4y1x7w8/
 
-Cluster:
+![debug](https://user-images.githubusercontent.com/18556593/104743603-d70b2c80-5786-11eb-988b-8f8c3f2daeae.gif)
 
-- Youtube: https://youtu.be/fxflwr_lFvE
-- Bilibili: https://www.bilibili.com/video/BV1oz4y1U7ec/
+### Cluster
 
-![image](https://user-images.githubusercontent.com/1284531/104792552-b7e9ba80-57d9-11eb-907c-1d0cfbc6d72d.png)
+Video: https://www.bilibili.com/video/BV1oz4y1U7ec/
 
-Playground:
+![image](https://user-images.githubusercontent.com/1284531/104792552-b7e9ba80-57d9-11eb-907c-1d0cfbc6d72d.png)
 
-- Youtube: https://youtu.be/57pU6Jhc5C0
-- Bilibili: https://www.bilibili.com/video/BV1pK411u7S4/
+### Scaffold
 
-![image](https://user-images.githubusercontent.com/1284531/104793321-f7fe6c80-57dc-11eb-8b51-a25a6690d87a.png)
+Video: https://www.bilibili.com/video/BV12A411H74T/
 
 ## TODO
 
-- Scaffold for adding new feature
+- Playground
 
-  - [x] Scaffold for tidb-dashboard repo (add a new app in 10 seconds)
-  - [ ] Scaffold for coprocess
+  - [x] Start a simple default playground cluster
+  - [x] Start a confiured playground cluster
+  - [x] Use current repo's binary
+  - [x] List playground cluster instances
+  - [x] View logs of all instances
+  - [x] Follow logs of all instances
+  - [x] Attach to Debug @Aylei
+
+- Virtual Machines & Cluster Topo Manager
+
+  - [x] Manage vagrant virtual machines
+  - [x] Start virtual machines, ready for deploy a cluster
+  - [x] Manage cluster topos
+  - [x] Deploy a cluster by a topo file
 
 - Cluster
 
@@ -95,35 +107,24 @@ Playground:
   - [x] Attach to Debug @Aylei
   - [ ] Restart on local compile (Rsync)
 
-- Playground
-
-  - [x] Start a simple default playground cluster
-  - [x] Start a confiured playground cluster
-  - [x] Use current repo's binary
-  - [x] List playground cluster instances
-  - [x] View logs of all instances
-  - [x] Follow logs of all instances
-  - [x] Attach to Debug @Aylei
-
-- Bench
-
-  - [ ] Config bench
-  - [ ] Start bench
-
 - Kubernetes
 
   - [ ] TreeView
   - [ ] Attach to Debug
   - [ ] Restart on local compile (Rsync)
 
-- Virtaul Machines & Cluster Topo Manager
+- Scaffold for adding new feature
 
-  - [x] Manager vagrant virtual machines
-  - [x] Start virtual machines, ready for deploy a cluster
-  - [x] Manage cluster topos
-  - [x] Deploy a cluster by a topo
+  - [x] Scaffold for tidb-dashboard repo (add a new app in 10 seconds)
+  - [ ] Scaffold for coprocess
+
+- Bench
+
+  - [ ] Config bench
+  - [ ] Start bench
 
 - TiUP Manager
+
   - [x] Install TiUP
   - [ ] Upgrade TiUP
 
diff --git a/doc/guide.md b/doc/guide.md
index 63a55ae..7fdfd18 100644
--- a/doc/guide.md
+++ b/doc/guide.md
@@ -4,7 +4,9 @@
 
 If you don't install TiUP, the extension will prompt you to install it:
 
-![install tiup](./install-tiup.jpg)
+<div>
+  <img src="./install-tiup.jpg" style="zoom:75%">
+</div>
 
 ## 2. Clone and import repos
 
@@ -24,7 +26,6 @@ Open any repo in VSCode, for example tidb, then choose menu "File / Add Folder t
 
 > Note: again, you don't need to add all repos, just the repos you want to develop.
 
-
 <div>
   <img src="./add-folder-to-workspace.jpg" style="zoom:50%">
 </div>
@@ -86,7 +87,9 @@ Required tools for building:
 
 Assume you have modified some code for tidb/tikv/pd, and you want to test the binaries with a playground cluster. You just need one click:
 
-![start-default-playground](./start-default-playground.jpg)
+<div>
+  <img src="./start-default-playground.jpg" style="zoom:50%">
+</div>
 
 Clicking the "start default playground" item will automatically build current tidb/tikv/pd repos and start a default playground cluster with them.
 
@@ -102,7 +105,9 @@ After playground is starting successfully, you can refresh the playground to get
 
 Click the menu item "View Log" in the component to view its log:
 
-![view-playground-log](./view-playground-log.jpg)
+<div>
+  <img src="./view-playground-log.jpg" style="zoom:50%">
+</div>
 
 ### Debug
 
@@ -154,7 +159,9 @@ Assume you have deployed some clusters by `tiup cluster` command manually. (We w
 
 - Modify and apply cluster configuration
 
-  ![cluster-config](./cluster-config.jpg)
+  <div>
+    <img src="./cluster-config.jpg" style="zoom:50%">
+  </div>
 
 - Restart/Patch component
 
@@ -200,6 +207,10 @@ It will do three things:
 
 Assume you want to add a new individual feature (aka an "app") to dashboard, click the "Add new app to dashboard", input the app name, it will auto generate the template code for you, and auto restart the dashboard as well.
 
-![add new app to dashboard](./dashboard-add-app.jpg)
+<div>
+  <img src="./dashboard-add-app.jpg" style="zoom:50%">
+</div>
 
-![dashboard new page](./dashboard-new-page.jpg)
+<div>
+  <img src="./dashboard-new-page.jpg" style="zoom:60%">
+</div>