Splitted user guide in another file

README.md

@@ -41,12 +41,13 @@ This makes it an invaluable tool for troubleshooting complex issues that span mu
 1. Run `docker run -p 8080:8080 ghcr.io/googlecloudplatform/khi:latest`
 1. Click the link `http://localhost:8080` on the terminal and start working with KHI!
 
-If you want to run KHI with the other environment where the metadata server is not available,
-you can pass the access token via the program argument.
-
-```
-$ docker run -p 8080:8080 ghcr.io/googlecloudplatform/khi:latest -host 0.0.0.0 -access-token=`gcloud auth print-access-token`
-```
+> [!TIP]
+> If you want to run KHI with the other environment where the metadata server is not available,
+> you can pass the access token via the program argument.
+>
+>```
+>$ docker run -p 8080:8080 ghcr.io/googlecloudplatform/khi:latest -host 0.0.0.0 -access-token=`gcloud auth print-access-token`
+>```
 
 ## Get Started (Run from source)
 
@@ -59,8 +60,10 @@ $ docker run -p 8080:8080 ghcr.io/googlecloudplatform/khi:latest -host 0.0.0.0 -
 - [`gcloud` CLI](https://cloud.google.com/sdk/docs/install)
 - Latest Google Chrome
 
-We only test KHI with the latest Google Chrome. 
-KHI may work with the other browser, but we will not support even if it won't work with the other browser.
+
+> [!IMPORTANT]
+> We only test KHI with the latest Google Chrome. 
+> KHI may work with the other browser, but we will not support even if it won't work with the other browser.
 
 ### Initialization (one-time setup)
 1. Download or clone this repository   
@@ -79,31 +82,7 @@ KHI may work with the other browser, but we will not support even if it won't wo
 
 ## User Guide
 
-### Understanding views for opening your visualization
-
-![User guide: start screen](./image/guide-start-screen.png)
-
-![User guide: query logs](./image/guide-query.png)
-
-### Understanding inspection view
-
-![User guide timeline screens](./image/guide-timeline-screen.png)
-
-![User guide timeline diagram](./image/guide-timeline-diagram.png)
-
-![User guide timeline revisions](./image/guide-timelines-revisions.png)
-
-![User guide timeline events](./image/guide-timelines-events.png)
-
-![User guide timeline selection](./image/guide-timeline-selection.png)
-
-![User guide log-view](./image/guide-log-view.png)
-
-![User guide history-view](./image/guide-history-view.png)
-
-![User guide filtering](./image/guide-filtering.png)
-
-![User guide topology-view](./image/guide-topology-view.png)
+Please check our [User Guide](./docs/user-guide.md).
 
 ## Contribute
 

docs/user-guide.md

@@ -0,0 +1,83 @@
+# User guide
+
+> [!NOTE]
+> This document explains how to use KHI after running it. If you haven't run KHI, please check [README](../README.md).
+
+## Query logs with KHI
+
+Once you run KHI and open the page served by it, you will see the welcome page.
+You can query your logs with clicking the `New inspection` button, or you can open KHI file.
+After completing querying your logs with the later instruction, you would see the inspection list on right side.
+
+![User guide: start screen](../image/guide-start-screen.png)
+
+To query your cluster logs, you would need to fill few information with 3 steps.
+
+1. Select the cluster type
+1. Select log types to query
+1. Fill parameters needed for composing log filter
+
+![User guide: query logs](../image/guide-query.png)
+
+After clicking the `Run` button on the query dialog, you will see progress bars on the start screen.
+Once the query done, you can open the visualization result with hitting the `Open` button.
+
+## Understanding the visualization
+
+After opening the log, you will see a colorful visualization. 
+This is the main view of KHI, and you can see the timeline diagram on the left side, which reveals the macroscopic behavior of resources in your cluster.
+The right side is dedicated to details of each resource. You can see detailed information by selecting a resource in the timeline.
+
+![User guide timeline screens](../image/guide-timeline-screen.png)
+
+### Timeline view
+
+Timelines in the diagram are displayed in hierarchical order (Kind > Namespace > Resource name > Subresource).
+To scale the timeline diagram in or out, hold the Shift key and scroll your mouse. KHI will scale the view around the time point at your mouse pointer location.
+
+![User guide timeline diagram](../image/guide-timeline-diagram.png)
+
+The colorful belts on the timelines are called `revisions`. Each revision represents a state that continues from its left edge (start time) to its right edge (end time).
+You can see the meaning of each color by hovering your mouse pointer over the revision.
+
+KHI also shows several supplemental timelines as pseudo-subresource timelines. These pseudo-subresources are not actual subresources in Kubernetes, but KHI associates these complementary timelines with resources for better visualization. The color meanings of these pseudo-subresources may vary depending on their relationship with their parent resource.
+This relationship is indicated by a colorful chip next to the subresource name on the left side.
+
+![User guide timeline revisions](../image/guide-timelines-revisions.png)
+
+Diamond shapes on the timelines are called `events` in KHI (note that these are not Kubernetes events). These indicate that a log was associated with the resource at that specific time.
+The colors of the events indicate their severity and log type. Hover your mouse pointer over an event to see its details.
+
+![User guide timeline events](../image/guide-timelines-events.png)
+
+Clicking on a timeline's name or any element within it will select that timeline. The log view and history view on the right side of the timeline diagram will then display data corresponding to the selected timeline.
+
+![User guide timeline selection](../image/guide-timeline-selection.png)
+
+### Log view
+
+The log view automatically shows only the logs related to the selected timeline.
+
+![User guide log-view](../image/guide-log-view.png)
+
+### History view
+
+The history view shows the modification history of the selected timeline.
+
+![User guide history-view](../image/guide-history-view.png)
+
+### Filtering features
+
+You can filter timelines by Kind, Namespace, and Resource name using the input fields at the top left of the timeline diagram.
+This allows you to quickly narrow down the displayed timelines to only those relevant to your current investigation.
+
+You can also filter logs using a regular expression in the input field at the top right. This will also filter out timelines that do not have any logs matching the regex.
+
+![User guide filtering](../image/guide-filtering.png)
+
+### Topology view (alpha)
+
+The Topology view provides a visual representation of the relationships between different Kubernetes resources.
+This can be helpful for understanding the resource topology at a specific point in time within a log.
+
+![User guide topology-view](../image/guide-topology-view.png)