UML Editor based on GLSP

Uml GLSP provides a web-based editor for UML Models (including Diagrams), integrated with Eclipse Theia. It contains three components: one Model Server (Server-side, written in Java), one GLSP language server (Server-side, written in Java), and one GLSP client extension to actually present the diagrams (using Sprotty).

Uml GLSP can display an existing UML model as a class diagram. The diagram layout will be persisted in an .unotation file next to the .uml file. The diagram editor also supports creation of new elements (Classes, Properties and Associations), as well as partial support for editing existing elements (Renaming, deleting...).

Prerequisites

The following libraries/frameworks need to be installed on your system:

Node.js	>= 12.14.1
Yarn	>=1.7.0
Java	11
Maven	>=3.6.0
Git	>= 2.11.0

The editor is heavily interweaved with Eclipse Theia, so please also check the prerequisites of Theia.

The web-based/client part of the editor has been developed using Visual Studio Code and the server/java part has been developed with the Eclipse IDE. Settings for codestyle are provided for both IDEs, however, it's of course also possible to use any other IDE or text editor.

Getting started

Clone the uml-glsp editor:

git clone https://github.com/eclipsesource/uml-glsp.git

Build

The server components have to be built using Maven, the client component has to be built using yarn. This can be done via CLI:

cd server && mvn clean install && cd ..
cd client && yarn && cd ..

Resolving build issues under Windows/MacOS

• Missing build tools result in following error:

  gyp err! stack error: could not find any visual studio installation to use
  

  • Windows:
    • Install via npm install --global --vs2015 windows-build-tools
    • Check that npm config get msvs_version returns 2015
  • Mac OS:
    • Install Xcode developer tools

Run

cd client && yarn start

Start your browser on http://localhost:3000.

Open diagrams (*.uml)

• Add/Delete/Rename support for the following UML Elements: Class, Property, Association

Create new diagrams

• via menu entry File -> New UML Class Diagram
• via explorer context menu entry New UML Class Diagram
• via command palette File: New UML Class Diagram

For detailed information on running and debugging the server and client components, please see their respective READMEs.

More information

For more information, please visit the EMF.cloud Website. If you have questions, contact us on our spectrum chat and have a look at our communication and support options.