In this article we will take a look on how to create simple diagrams in MPS. For this we will use the language "de.itemis.mps.editor.diagram" developed by the German company Itemis.
To explore the base concepts of the diagram language we create a language that represents a simple social network. The social network has the root concept SocialNetwork and the concepts Person and Friendship.
To be able to use the diagram language we need to install the "MPS Diagram Support" plugin.
Than the diagram need to be imported. The language import screen can be opened wit "Ctrl + L".
Next we create a editor for the Person concept. We use the diagram.box type. The only thing we have to fill out is the editor field. There we can use the normal editor syntax. In this example we just show the name of the person.
Now we create the editor for the friendships. For this we use the diagram.edge type. This creates the connections between two persons. The thing we need to fill out for our basic example is the from and to targets. The person1 and person2 are references in the Friendship concept.
The final editor we create is for the social network. Since this is the root concept we use the diagram type. In the content field, we specify what concepts need to be rendered in the diagram. Since persons and friendships are simply children of the SocialNetwork, we can simply specify the names of the children.
To allow drag and drop adding of concepts we need to specify palette entries. To enable the creating of persons, we specify everything allowed in person.
To allow the creation of new connections we specify a connection creator. In the connector we simply create a new FriendShip node. We simply set the references to the two person nodes that are supposed to be friends.
Here we can see the diagram editor we created.
