The Graphical Language Server Platform provides extensible components for the development of diagram editors including edit functionality in (distributed) web-applications via a client-server protocol.
It follows the architectural pattern of the Language Server Protocol, but applies it to graphical modeling and diagram editors for browser/cloud-based deployments. Parts of the protocol and the web-based client implementation is based on Sprotty but extends it with editing functionality and GLSP-specific communication with the server.
For more information, please have a look at the GLSP documentation, visit the GLSP website and the protocol spec. If you have questions, please raise them in the discussions and have a look at our communication and support options.
diagramanimated.mp4
The best way to getting started is to read the overview in the documentation and follow the getting started guide.
Below is a list of features that are supported by the different base technologies that can be used with GLSP.
| Feature | Standalone | Theia Integration | Eclipse Integration | VS Code Integration |
|---|---|---|---|---|
| Model Saving | ✓ | ✓ | ✓ | |
| Model Dirty State | ✓ | ✓ | ✓ | |
| Model SVG Export | ✓ | |||
| Model Layout | ✓ | ✓ | ✓ | ✓ |
| Restoring viewport on re-open | ✓ | |||
| Model Edit Modes - Edit - Read-only |
✓ |
✓ ✓ |
✓ |
✓ |
| Client View Port - Center - Fit to Screen |
✓ ✓ |
✓ ✓ |
✓ ✓ |
✓ ✓ |
| Client Status Notification | ✓ | ✓ | ✓ | ✓ |
| Client Message Notification | ✓ | ✓ | ||
| Element Selection | ✓ | ✓ | ✓ | ✓ |
| Element Hover | ✓ | ✓ | ✓ | ✓ |
| Element Validation | ✓ | ✓ | ✓ | ✓ |
| Element Navigation | ✓ | ✓ | ✓ | |
| Element Type Hints | ✓ | ✓ | ✓ | ✓ |
| Element Creation and Deletion | ✓ | ✓ | ✓ | ✓ |
| Node Change Bounds - Move - Resize |
✓ ✓ |
✓ ✓ |
✓ ✓ |
✓ ✓ |
| Node Change Container | ✓ | ✓ | ✓ | ✓ |
| Edge Reconnect | ✓ | ✓ | ✓ | ✓ |
| Edge Routing Points | ✓ | ✓ | ✓ | ✓ |
| Element Text Editing | ✓ | ✓ | ✓ | ✓ |
| Clipboard (Cut, Copy, Paste) | ✓ | ✓ | ||
| Undo / Redo | ✓ | ✓ | ✓ | |
| Contexts - Context Menu - Command Palette - Tool Palette |
✓ ✓ |
✓ ✓ ✓ |
✓ ✓ |
✓ ✓ |
The GLSP source code consists of the following repositories:
glsp-client: Contains the code for the default (Sprotty-based) client.glsp-server: Contains the code for a Java-based framework to create GLSP server components.glsp-server-node: Contains the code for a node-based framework to create GLSP server components.glsp-examples: Contains various examples to demonstrate GLSP in action.glsp-theia-integration: Provides the glue code to integrate GLSP diagrams editors into Theia.glsp-eclipse-integration: Provides the integration of GLSP diagram editors with the Eclipse IDE.glsp-vscode-integration: Provides the integration of GLSP diagrams editors into VSCode.
This repository provides the following packages and artifacts that are shared across all GLSP repositories and/or projects:
The client packages are available via npmjs, such as the glsp-client and the theia integration. The examples are available on npmjs too.
The server packages are available as maven as well as p2 dependency from the following maven repository or p2 update site.
- Server Snapshots: https://download.eclipse.org/glsp/server/p2/nightly/
- Eclipse Integration Snapshots: https://download.eclipse.org/glsp/server/ide/nightly/
All changes on the master branch are deployed automatically to the corresponding snapshot repositories.
You’ll need node in version 12:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.35.3/install.sh | bash
nvm install 12and Yarn
npm install -g yarnand Lerna
npm install -g lernaYou'll need Java 11 and maven.
NOTE: This section describes how to build the core components of glsp. To build an optional integration component like the integration for VSCode or Eclipse IDE please follow the build instructions in the corresponding repository.
To build the client packages, just invoke yarn in glsp-client, glsp-theia-integration.
If you want to build the example too, run yarn in glsp-examples/client.
The server components are built with mvn clean verify in glsp-server.
If you want to build the example server, run mvn clean install in glsp-examples/server.
The Workflow Diagram is a consistent example provided by all GLSP components. The example implements a simple flow chart diagram editor with different types of nodes and edges (see screenshot below). The example can be used to try out different GLSP features, as well as several available integrations with IDE platforms (Theia, VSCode, Eclipse, Standalone). As the example is fully open source, you can also use it as a blueprint for a custom implementation of a GLSP diagram editor. The workflow example consists of the following components: the Workflow Diagram Server, the client, and optionally an IDE integration of the Workflow Diagram Editor. Please follow the steps below to build and run each of those components.
cd glsp-server
mvn clean verify -PfatjarIn the folder glsp-server/examples/org.eclipse.glsp.example.workflow/target, you should have a jar file org.eclipse.glsp.example.workflow-X.X.X-SNAPSHOT-glsp.jar whereas X.X.X is the current version.
You can now start the server by executing the following commands:
cd examples/org.eclipse.glsp.example.workflow/target
java -jar org.eclipse.glsp.example.workflow-X.X.X-SNAPSHOT-glsp.jar org.eclipse.glsp.example.workflow.launch.ExampleServerLauncherTo start the example server from within your IDE, run the main method of the class ExampleServerLauncher.java in the module glsp-server/examples/org.eclipse.glsp.example.workflow.
Note that it is not necessary to build the other components of GLSP just for running the workflow example, as the workflow example build will pull all dependencies (including those from GLSP) from npmjs and sonar.
Switch to the folder glsp-theia-integration in your clone of the glsp-theia-integration repository and build.
cd glsp-theia-integration
yarnThis will not only build the GLSP Theia integration modules, but also the workflow diagram editor example. Once the build is finished, you can start the Theia application:
cd glsp-theia-integration/examples/browser-app
yarn startNow open a browser and point it to http://localhost:3000.
If you open this the first time and you don't have selected a workspace yet, point it to glsp-theia-integration/examples/workspace of your repository clone.
This will already include an up to date workflow file example1.wf that you can open by double-clicking it in the navigator.
In order to start the workflow diagram editor example with VSCode, Eclipse, or standalone, please see the documentation of the respective integration modules:
If you want to explore or extend the GLSP source code in any of the available components, we recommend cloning the repositories alongside this repository, so that you have the following folder layout:
eclipse-glsp(or any name for your parent folder)glspglsp-clientglsp-theia-integrationglsp-serverglsp-examples
For the client-side code (Typescript), we recommend using VSCode. Therefore, this repository provides a VSCode workspace file, which you can open in VSCode and it will import all client-side folders for you -- given that you kept the repository structure specified above.
The GLSP workspace file provides build & watch tasks, so that you can build all packages with the task Build all or start watching all client packages with Watch all.
For the server components, you can use any IDE you like. We recommend an IDE that supports maven, though, to import the maven modules from the glsp-server and optionally also those from the glsp-examples.
When you are planning to change more than one client package at a time, or if you want to test your changes with the workflow example, we recommend to yarn link your local sources.
Therefore, we provide the yarn-link script that automatically links all the relevant packages.
Currently, this script is only available for Linux and Mac (shell script).
The GLSP VSCode workspace also includes a dedicated VSCode task called Yarn link all packages and Yarn unlink all packages.