Awesome

sprotty-vscode

This repository contains the glue code to integrate Sprotty diagrams - with or without a language server - in VSCode extensions.

Also contains an example extension for a domain-specific language for statemachines. The example is also available as States Example from the VS Code Marketplace.

Features

• running Sprotty diagrams in VS Code webviews,
• SVG export (ALT-E), animated center selection (ALT-C) and fit to screen (ALT-F) actions,
• interaction with Sprotty-enhanced language servers to automatically synchronize diagrams with language artifacts.

Architecture

In VS Code, extensions can contribute new UI components using a webview. Webviews communicate with the extension using the vscode-messenger library. The WebviewPanelManager uses this to send and receive Sprotty Actions to and from a WebviewEndpoint. The latter runs a webpacked bundle.js that contains the Sprotty diagram code.

If your extension provides a language, you can include a Sprotty-enhanced language server to get fully synchronized diagrams for your language artifacts. The SprottyLspVscodeExtension acts as a relay between the language server and a SprottyLanguageWebview, and intercepts actions/LSP messages that require to interact with the VS Code workbench.

Contents

The repo is structured as follows

• examples: an example Sprotty visualization using a Langium-based Language Server.
• packages/sprotty-vscode: library code for the VSCode extension.
• packages/sprotty-vscode-protocol: common protocol classes for the communication between the extension and the webview.
• packages/sprotty-vscode-webview: library code for the script that is run in the webview.

Development

Compile the library code and the examples:

yarn

If you also want to use the older Xtext-based example, you need to run this command before yarn:

./examples/states-xtext/language-server/gradlew -p examples/states-xtext/language-server/ build