Diagram View

The topology of programs using the Python or C++ SDKs can be visualized in an interactive diagram using our VS Code extension.

System Requirements

  • A Linux-based operating system. We recommend Ubuntu 22.04 or newer.

  • node.js needs to be installed. We recommend version 23.1.0, and versions older than 16.0.0 will not work. We recommend using nvm to manage your node version, as described here.

  • VS Code needs to be installed. On Ubuntu, download the package matching your architecture (x86_64, aarch64) and install the downloaded file using dpkg -i <downloaded_file>.

Installation

Start VS Code and open the market place using View ‣ Extensions. Type “Xronos” into the search field and then click the Install button next to the Xronos extension.

Rendering Diagrams

Open VS Code and bring up the Command Palette using Ctrl+Shift+P. Type Xronos: Diagram and select the corresponding entry using ⏎. This will open the Xronos Diagram view as shown below.

empty diagram

Initially, no diagram is shown. The diagram view automatically renders the program that was last executed. Try running the Python or C++ “Hello, World!” example. If you like, you can use the builtin terminal of VS Code.

$ source .venv/bin/activate
$ python hello.py
Hello, World!

Now the diagram view updates and shows the hello reactor that we just executed. hello diagram

You may run arbitrary Xronos programs and observe their topology in the diagram view. For instance, the YOLO example is rendered as shown below. YOLO diagram

Code Navigation

You can also use the diagram to navigate your code. Select an element in the diagram and press F12, or click on an element while holding down the Ctrl key (Cmd/⌘ key on Mac). This will bring you to the location in the Python code that created the element.

Viewing Diagram Server Logs

To view the diagram server logs, open the VS Code integrated terminal using Ctrl+​`​ and navigate to the terminal titled Xronos Diagram Server.

Interoperability with WSL or Visual Studio Code Remote - SSH

We recommend Microsoft’s WSL or Visual Studio Code Remote - SSH extensions for users who prefer to use an unsupported operating system or who are doing on-target development on a headless machine.

The diagram viewer requires port forwarding in order to work with the Visual Studio Code Remote - SSH extension. WSL does not require port forwarding.

The first time you start a new VS Code session using the Visual Studio Code Remote - SSH extension and open the diagram viewer, you may receive a notification like the following:

Port forwarding notification

If you do not receive this notification, it could be because automatic port forwarding is not enabled in your VS Code settings. Therefore, you will need to forward a port manually by following the directions in VS Code’s official documentation or by executing the command VS Code: Forward a Port in the VS Code command palette. The port you will need to forward will be specified in the logs as some port number between 3001 and 3020.