Documentation: Kedro-Viz in VSCode Kedro extension (#2078)

* Documentation: Kedro-Viz in VSCode Signed-off-by: Jitendra Gundaniya <[email protected]> * Missing gif added Signed-off-by: Jitendra Gundaniya <[email protected]> * Update README.md Signed-off-by: Jitendra Gundaniya <[email protected]> * Link updated Signed-off-by: Jitendra Gundaniya <[email protected]> * Update docs/source/kedro-viz_visualisation.md Co-authored-by: rashidakanchwala <[email protected]> Signed-off-by: Jitendra Gundaniya <[email protected]> --------- Signed-off-by: Jitendra Gundaniya <[email protected]> Co-authored-by: Ravi Kumar Pilla <[email protected]> Co-authored-by: rashidakanchwala <[email protected]>
kedro-org · Sep 11, 2024 · aefe8c5 · aefe8c5
1 parent c90e723
commit aefe8c5
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/docs/source/images/viz-in-vscode.gif b/docs/source/images/viz-in-vscode.gif
diff --git a/docs/source/kedro-viz_visualisation.md b/docs/source/kedro-viz_visualisation.md
@@ -238,4 +238,23 @@ import '@quantumblack/kedro-viz/lib/styles/styles.min.css';
 const MyApp = () => <div style={{height: `100vh`}}><KedroViz data={json} options={options} /></div>;
 ``` 
 
-For more information on how to use kedro as React component with all possible props please refer to [Kedro-Viz on npm](https://www.npmjs.com/package/@quantumblack/kedro-viz)
+For more information on how to use Kedro as a React component with all possible props, see [Kedro-Viz on NPM](https://www.npmjs.com/package/@quantumblack/kedro-viz)
+
+## Kedro-Viz in Visual Studio Code Extension
+
+To visualize Kedro project using Kedro-Viz in Visual Studio Code, follow these steps:
+
+1. **Install Kedro Extension**:
+Download Kedro extension from [marketplace](https://marketplace.visualstudio.com/items?itemName=kedro.Kedro) into Visual Studio Code.
+
+2. **Setup Kedro Extension**:
+Follow steps from [how-to-use-kedro-extension](https://github.com/kedro-org/vscode-kedro)
+
+3. **Open the Command Palette**: 
+Press `Cmd` + `Shift` + `P` (on macOS) or `Ctrl` + `Shift` + `P` (on Windows/Linux).
+
+4. **Run Kedro-Viz**:
+Type `kedro: Run Kedro Viz` and select the command.
+This will launch Kedro-Viz and display your pipeline visually within the extension.
+
+![Kedro Viz in VSCode](./images/viz-in-vscode.gif)
diff --git a/package/README.md b/package/README.md
@@ -272,6 +272,12 @@ For more information on how to use Kedro-Viz as a React component, follow this [
 
 **_Our documentation contains [additional examples on how to visualise with Kedro-Viz.](https://docs.kedro.org/en/stable/visualisation/index.html)_**
 
+## Kedro-Viz in Visual Studio Code Extension
+
+To visualize Kedro project using Kedro-Viz in Visual Studio Code, please install Kedro extension in Visual Studio Code.
+
+For more information on how to use Kedro-Viz in Visual Studio Code, follow this [guide](https://marketplace.visualstudio.com/items?itemName=kedro.Kedro)
+
 ## Feature Flags
 
 Kedro-Viz uses features flags to roll out some experimental features. The following flags are currently in use: