Visualising Models with Picto

Picto is an Eclipse view for visualising models via model-to-text transformation to SVG/HTML. Compared to existing graphical modelling frameworks such as Sirius and GMF/Eugenia, the main appeal of Picto is that model visualisation takes place in an embedded browser and therefore you can leverage any HTML/SVG/JavaScript-based technology such as D3.js, mxGraph and JointJS. Picto also provides built-in support for the powerful Graphviz and PlantUML textual syntaxes (which are transformed to SVG via the respective tools). A distinguishing feature of Picto is does not require running multiple Eclipse instances as the metamodels, models and visualisation transformations can all reside in the same workspace.

!!! tip As Picto uses EGL for model-to-text transformation, it is not limited to EMF-based models and can be used to visualise the contents of Simulink models, XML documents, spreadsheets, and any other type of artefact supported by an Epsilon EMC driver.

On the flip side, Picto displays read-only views of models and as such it is not a good fit if diagram-based model editing capabilities are required. In this article we demonstrate Picto through a small social network example. The complete source code of the example is available here.

Metamodel

We start with the metamodel of our social network DSL expressed in Emfatic (the .ecore version of the metamodel is also provided in the repository). The DSL allows modelling people in a network and likes/dislikes relationships between them.

@namespace(uri="socialnetwork", prefix="")
package socialnetwork;

class SocialNetwork {
	val Person[*] people;
}

class Person {
	attr String name;
	ref Person[*] likes;
	ref Person[*] dislikes;
}

Model

Below is a model that conforms to the social network metamodel. The model is defined for convenience in Flexmi, however Picto also works with XMI-based models (see below).

<?nsuri socialnetwork?>
<?render-egx picto/socialnetwork.egx?>
<socialnetwork>
	<person name="Alice" likes="Bob, Charlie"/>
	<person name="Bob" likes="Enid, Alice" dislikes="Fred, Charlie"/>
	<person name="Charlie" likes="Fred, Alice" dislikes="Dawn, Enid"/>
	<person name="Dawn" likes="Bob" dislikes="Fred"/>
	<person name="Enid" likes="Charlie" dislikes="Alice"/>
	<person name="Fred" dislikes="Bob" likes="Enid, Alice"/>
</socialnetwork>

In line 2 of the model, notice the render-egx processing instruction, which specifies a model-to-text transformation written in EGX/EGL, that Picto should use to visualise this model.

Model-to-Text Transformation

The socialnetwork.egx EGX model-to-text transformation is as follows:

rule Network2Graphviz 
	transform n : socialnetwork::SocialNetwork {

	template : "socialnetwork2graphviz.egl"

	parameters : Map{
		"path" = Sequence{"Social Network"},
		"icon" = "diagram-ffffff",
		"format" = "graphviz-circo",
		"layers" = Sequence {
			Map {"id"="likes", "title"="Likes", "active"=true},
			Map {"id"="dislikes", "title"="Dislikes", "active"=true}
		},
		"people" = n.people
	}
	
}

rule Person2Graphviz 
	transform p : socialnetwork::Person {

	template : "socialnetwork2graphviz.egl"

	parameters : Map{
		"path" = Sequence{"Social Network", p.name},
		"icon" = "diagram-c0c0c0",
		"format" = "graphviz-dot",
		"layers" = Sequence {
			Map {"id"="likes", "title"="Likes", "active"=true},
			Map {"id"="dislikes", "title"="Dislikes", "active"=true}
		},
		"people" = Sequence{p}
	}
	
}	

The transformation consists of two rules:

  • Network2Graphviz which will be executed once and will produce a Graphviz graph for the entire network
  • Person2Graphviz which will be executed for every person in the network and produce the person's own local likes/dislikes graph

Each rule specifies the EGL template that it will invoke (socialnetwork2graphviz.egl in both cases here) as well as a set of parameters that Picto needs. The parameters are as follows:

  • path: A collection of strings that specify the path of the produced view in the Picto tree
  • icon: The icon of the view on the Picto tree. Allowed values at the moment are file names (without the extension) of all icon files under this folder, as well as diagram-rrggbb values where rrggbb is a hex colour
  • format: The format of the view that the EGL transformation will produce. Built-in formats currently supported are graphviz-dot, graphviz-circo, graphviz-neato, graphviz-fdp, plantuml, text, html and svg
  • layers: A sequence of maps, each of which represents a layer of the view. Each layer needs to define an id, a title and (optionally), whether it is active by default

The EGL template socialnetwork2graphviz.egl is as follows:

digraph G {
	node[shape=rectangle, fontname=Tahoma, fontsize=10, style="filled", 
		gradientangle="270", fillcolor="bisque:floralwhite"]

	edge[penwidth=3, style=tapered, arrowhead=none]
	
[%for (p in people){%]
	
	[%=p.name%] [%if (people.size()==1){%][fillcolor="azure2:ghostwhite"][%}%]
	
	[%if (isLayerActive("likes")){%]
		[%for (l in p.likes){%]
			[%=p.name%] -> [%=l.name%] [color="#2A6C41"]
		[%}%]
	[%}%]
	
	[%if (isLayerActive("dislikes")){%]
		[%for (l in p.dislikes){%]
			[%=p.name%] -> [%=l.name%] [color="#B43431"]
		[%}%]
	[%}%]
	
[%}%]

}

[%
operation isLayerActive(id : String) {
	var layer = layers.selectOne(l|l.id = id);
	if (layer.isDefined()) {
		return layer.active;
	}
	else {
		return true;
	}
}
%]

Result

Every time socialnetwork.flexmi is saved, Picto will run the EGX/EGL transformation and display the results in a view that consists of a tree viewer and a browser. For this model, Picto produces 7 diagrams; one for the network as a whole through the application of the Network2Graphviz rule and one for each person in the network through the application of the Person2Graphviz rule. Screenshots of the populated Picto view appear below.

Layers

Picto supports the concept of layers to allow users to show/hide information on a diagram. Both EGX rules specify a “likes” and a “dislikes” layer (lines 11-12 and 29-30) which the user can turn on/off to show/hide like/dislike relationships in the current diagram. Hiding the “dislikes” layer, makes the network-level diagram look like this.