diff --git a/docs/Reference/pipeline/view.md b/docs/Reference/pipeline/view.md index 5846424..474ef1e 100644 --- a/docs/Reference/pipeline/view.md +++ b/docs/Reference/pipeline/view.md @@ -8,32 +8,6 @@ These files contain mermaid code that visualizes your pipeline's structure and d ## Example Usage -### Using VS Code - -To view the pipeline documentation in VS Code, use the following command: - -``` -$ quix pipeline view -✓ 'pipeline.md' was updated -✓ VS Code started -``` - -This command updates the `pipeline.md` file and opens it in VS Code automatically, allowing you to view and edit your pipeline documentation directly in the editor. - -![VSCode pipeline view](../../../images/cli/vscode-pipeline-view.png) - -The `pipeline.md` file is generated with the following mermaid code to visualize your pipeline: - -```markdown -%%{ init: { 'flowchart': { 'curve': 'monotoneX' } } }%% -graph LR; -demo-data-source[demo-data-source] -->|f1-data|event-detection-transformation[event-detection-transformation]; -``` - -### Without VS Code - -If you prefer not to use VS Code or it is not installed, you can still view the pipeline documentation in your browser. Use the same command: - ``` $ quix pipeline view ``` @@ -46,14 +20,14 @@ Open file:///path/to/your/temp/quix-pipeline.html in your browser if the link di Simply click the provided link to access the pipeline documentation. -The `quix-pipeline.html` file will render the following mermaid graph: +The `quix-pipeline.html` file will render a graphical representation of the pipeline in your default web browser: -```mermaid -%%{ init: { 'flowchart': { 'curve': 'monotoneX' } } }%% -graph LR; -demo-data-source[demo-data-source] -->|f1-data|event-detection-transformation[event-detection-transformation]; -``` +![pipeline view](../../images/cli/pipeline-view.png) !!! tip - Both `pipeline.md` and `quix-pipeline.html` are automatically updated every time the `quix.yaml` file is modified using the Quix CLI. This ensures that your documentation remains current with the latest configuration changes. \ No newline at end of file + Both `pipeline.md` and `quix-pipeline.html` are automatically updated every time the `quix.yaml` file is modified using the Quix CLI. This ensures that your documentation remains current with the latest configuration changes. + +!!! info + + If, for any reason, the CLI fails to open your browser and detects that Visual Studio Code (VS Code) is installed, it will automatically open the pipeline visualization in VS Code instead. \ No newline at end of file diff --git a/docs/cli-quickstart.md b/docs/cli-quickstart.md index 50f934f..12edd79 100644 --- a/docs/cli-quickstart.md +++ b/docs/cli-quickstart.md @@ -231,9 +231,11 @@ You can also view a graph representation of your local pipeline with the followi quix pipeline view ``` -If you have VSCode installed, the pipeline is displayed in the IDE for you, otherwise the pipeline is displayed on your default browser: +This command will open a graphical representation of the pipeline in your default web browser: -![VSCode pipeline view](./images/cli/vscode-pipeline-view.png) +![pipeline view](./images/cli/pipeline-view.png) + +If, for any reason, the CLI fails to open your browser and detects that Visual Studio Code (VS Code) is installed, it will automatically open the pipeline visualization in VS Code instead. When you update your `quix.yaml` using the command `quix pipeline update`, the visualization is updated for you. diff --git a/docs/images/cli/pipeline-view.png b/docs/images/cli/pipeline-view.png new file mode 100644 index 0000000..1967647 Binary files /dev/null and b/docs/images/cli/pipeline-view.png differ diff --git a/docs/images/cli/vscode-pipeline-view.png b/docs/images/cli/vscode-pipeline-view.png deleted file mode 100644 index b356705..0000000 Binary files a/docs/images/cli/vscode-pipeline-view.png and /dev/null differ