Shumlex

Introduction

Welcome to Shumlex.

Its purpose is to develop a tool which allows an integration between both Shape Expressions and UML, enabling the user to create an UML equivalent to the desired set of Shape Expressions, as well as the opposite. Moreover, it seeks to ease such tasks by contributing some complementary features which allow a integrated display of the data.

Shumlex is available as a NPM Package as well as a GitHub Package.

A creation by Mr. Jorge Álvarez Fidalgo for WESO Group.

Installation

NPM

Install the latest version.

npm install shumlex

GPK

You must log in to Github Packages or create a .npmrc file with the authentication info to install it. (See link)

Install the latest version.

npm install @weso/shumlex@0.2.2

Test

You may run the available tests in the installed module:

npm test

Both ShEx-XMI and XMI-ShEX conversions are tested, including all of the proposed examples in the application, as well as a few addons. Graph generation is tested as well.

How to use

Once installed, import the package. For instance:

const shumlex = require('shumlex')

Shumlex provides four different methods, which are shown below.

ShEx To XMI: shExToXMI(shexValue)

This method provides a XMI value (as a String) equivalent to any given ShEx value (as a String parameter).

let xmi = shumlex.shExToXMI(shex)

In this example, we are passing as a parameter a String variable (shex) which contains a ShEx-compliant value and we save the XMI in a String variable named xmi.

XMI To ShEx: XMIToShEx(xmiValue)

This method provides a ShEx value (as a String) equivalent to any given XMI value (as a String parameter).

let shex = shumlex.XMIToShEx(xmi)

In this example, we are passing as a parameter a String variable (xmi) which contains a XMI schema and we save the ShEx in a String variable named shex.

XMI to SVG Class Diagram: crearDiagramaUML(containerId, xmiValue, options)

This method creates in the given container, using SVG, a UML Class Diagram corresponding to the XMI value passed as a String parameter.

shumlex.crearDiagramaUML("displaydiv", xmi)

In this example, we are passing as parameters two variables:

• The ID of the container element in our page where we want to display the SVG, as a String value.
• A String variable (xmi) which contains the XMI input value.

If an element with such ID exists, and the XMI is correct, the corresponding SVG will be displayed at the given container.

options is an optional parameter, with JSON format, which may be used to configurate the SVG.

{
max_height: "500px",   // Max Height of the SVG
max_width: "100vw"     // Max Width of the SVG
}

Downloading SVG: base64SVG(svgId)

Returns the encoded base64 value for the given SVG located in the document ID passed as parameter. This allows for an easy implementation of a download link, just like the following:

let svg64 = shumlex.base64SVG("svg");
$("#download_button").attr("href", svg64);
$("#download_button").attr("download", `shumlex-class-diagram.svg`);

Importing and exporting our XMI in Visual Paradigm

Import

There are no further complications beyond clicking "Import XMI" and choosing our file with the Shumlex generated XMI, with the default options.

The UML elements corresponding to our imported XMI will be available at the Model Explorer. They will be automatically located by dropping them on a class diagram.

Export

When clicking "Export XMI", select the following options so that it exports in a Shumlex compatible format.