Back to top

Examples

Project Templates

Project Templates

The purpose of the project templates is to provide a simple starting point for your GLSP-based project, whether you are want to integrate your editor with Eclipse Theia or VS Code, or plan to use a node-based or Java-based server, use EMF or JSON; the project templates have you covered.

Workflow Diagram Example

Workflow Diagram Example

The “workflow diagram example” is a comprehensive example of a GLSP-based diagram editor. It demonstrates the feature set of GLSP as well as the integration capabilities, e.g. in Eclipse Theia, VS Code, Eclipse and a stand-alone application.

Online Demo

Online Demo

The simplest way to try a GLSP-based diagram editor is to start our online demonstrator. It demonstrates GLSP embedded into an example tool based on Eclipse Theia. Start the demo and click on “Diagram Editor” to the right. See also the next example for details about the tool (coffee editor).

Coffee Editor

Coffee Editor

The “coffee editor” is a comprehensive example of a web-based modeling tools including a diagram based on GLSP and embedded into the Eclipse Theia IDE.

Ecore Editor

Ecore Editor

The GLSP-based Ecore editor provides a web-based version of the famous Ecore tools.

More GLSP Examples

More GLSP Examples

The GLSP example repository provides a collection of self-contained example diagram editor implementations.

Workflow Example Overview

An example GLSP diagram including one GLSP server and several diagram client integrations (VS Code, Eclipse Theia, plain HTML and Eclipse desktop IDE). The example can be used to try out the GLSP features in a running version. Most components of GLSP, such as the GLSP server framework or the Theia integration implement the workflow diagram as a consistent example. As the example is fully open source, you can use the example as a blueprint for a custom implementation of a GLSP diagram. The example diagram is a simplified flow chart with different types of nodes and edges (see screen shot below)

Workflow Diagram Overview


To launch/browse the example, please use the links below leading to the components of the workflow diagram example. You will need the workflow GLSP server (there is only one) and at least one client integration (select the one you are interested in). Launch the server first and then the client of your choice to try the example. Alternatively, you can try the workflow example online embedded into an example tool (see last option below)

Workflow Example GLSP Server

Workflow Example GLSP Server

The workflow diagram GLSP server is an example implementation of a GLSP server. It implements the business logic of a simplified workflow diagram with several node and edge types. You can use and GLSP-based client to connect to it. The example GLSP server is hosted in the GLSP server repository. You will find detailed information on how to launch it and how to get the sources in the wiki.

Workflow Example Theia Client

Workflow Example Theia Client

The GLSP Theia integration allows to use GLSP-based diagrams within the Eclipse Theia IDE. The example integrates the diagrams with IDE features such as opening files, the problems view and the main menus. It can be deployed/used online in a browser or as a desktop application (via electron). The example GLSP Theia client is hosted in the GLSP Theia integration repository. You will find detailed information on how to launch it and how to get the sources in the wiki.

Workflow Example VS Code Client

Workflow Example VS Code Client

The GLSP VS Code integration allows to use GLSP-based diagrams within VS Code. See the GLSP wiki for a feature comparison of the different integrations (e.g. Theia compared to VS Code). The example GLSP VS Code client is hosted in the GLSP VS Code integration repository. You will find detailed information on how to launch it and how to get the sources in the wiki.

Workflow Example Eclipse IDE Client

Workflow Example Eclipse IDE Client

The GLSP Eclipse IDE allows to use GLSP-based diagrams within the Eclipse Desktop IDE. This is accomplished by integrating a Chrome-based browser seamlessly as a regular Eclipse editor part. The example GLSP Eclipse IDE client is hosted in the GLSP Eclipse integration repository. You will find detailed information on how to launch it and how to get the sources in the wiki.

Workflow Example Standalone Client

Workflow Example Standalone Client

GLSP does not require the usage of any IDE. GLSP diagrams can be embedded into any existing web application or even be deployed standalone. The workflow example also provides a standalone client, which shows the diagram as a plain web application. The example GLSP standalone client is hosted in the GLSP client repository. You will find detailed information on how to launch it and how to get the sources in the wiki.

Try the Workflow Example online!

Try the Workflow Example online!

The simplest way to try the workflow example is to start our online demonstrator. It demonstrates the workflow diagram embedded into an example tool based on Eclipse Theia. Start the demo and click on “Diagram Editor” to the right. See also the next example for details about the tool (coffee editor).