Sprotty Diagrams in VS Code Webviews

This library helps you to implement a VS Code webview that displays a Sprotty diagram. You can use sprotty-vscode to integrate such a webview in a VS Code extension.

Getting Started

The diagram itself is implemented with the Sprotty API. See the Sprotty Wiki, the states example and the Sprotty examples for reference.

The next step is to implement a subclass of SprottyStarter and instantiate it in your entry module as shown below.

export class ExampleSprottyStarter extends SprottyStarter {
    createContainer(diagramIdentifier: SprottyDiagramIdentifier) {
        return createExampleDiagramContainer(diagramIdentifier.clientId);
    }
}

new ExampleSprottyStarter().start();

Don't forget to call the start method, which initiates the communication to the host extension.

The function createExampleDiagramContainer should create an InversifyJS container with all necessary Sprotty configuration. The passed clientId should be used in the baseDiv and hiddenDiv ids in Sprotty's ViewerOptions.

In case you are connecting your diagram with a language server, e.g. using Langium, you should use SprottyLspEditStarter as superclass.