Create your first viewpoint

Your First Viewpoint (Concrete Syntax)

In this section, you’ll define a viewpoint that provides a concrete syntax for the Person-Organization metamodel. This viewpoint will include a diagrammatic representation of the Person and Organization elements, as well as their relationship (belongsTo). The goal is to create a clear and intuitive visualization of the metamodel instances.

Create a New Viewpoint

1. Access the Viewpoint Panel:

• • – Open the main menu and navigate to Viewpoints.
  • – Click on New Viewpoint (the + in the upper-right corner), and name it PersonOrganizationViewpoint
  • – Activate the PersonOrganizationViewpoint viewpoint

Define Views for Each Element 

A viewpoint consists of views, where each view specifies how a particular type of element (e.g., Person, Organization) is rendered. Let’s define views for the elements in the Person-Organization metamodel. 

View for Person

1. Add a New View:

• • – Open the MyFirstMetamodel 
  • – Select the Person metaclass
  • – With the contextual menu, select ‘Add View’ 

2. JSX Template for Person:

• • – Select the Person View
  • – Open the Template Tab
  • – Define the visual representation of Person by  the following JSX template:

				
					
    {data.$name.value}

				
			

 

3. CSS for Person:

• – Open the Style Tab
• – Add the following CSS to style the Person view as a rectangle:

				
					.person {
  width: 120px;
  height: 60px;
  border: 2px solid var(--border-color-1);
  border-radius: 8px;
  background-color: var(--background-1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  color: var(--color-1);
}
.person .header {
  font-weight: bold;
}
				
			

 

Please note that the parameters var(–border-color-1), var(–background-1), and var(–color-1) are defined as view parameters:

 

Our first model is now rendered as follows:

 

View for Organization

Analogously to Person, we can now define a view for Organization.

1. Add a New View:

• • – Create a new view for the Organization class in the same viewpoint.

2. JSX Template for Organization:

• • – Define the Organization view using the following JSX template:

				
					
    {data.$name.value}

				
			

 

3. CSS for Organization:

Style the Organization view as a hexagon:

				
					.organization {
  width: 140px;
  height: 80px;
  border: 2px solid var(--border-color-1);
  background-color: var(--background-color-1);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  color: var(--color-1);
}
.organization .header {
  font-weight: bold;
}
				
			

The result is the following:

The last step consists of defining the syntax for the relation belongsTo between Person and Organization.

Rendering the belongsTo Relationship

The relation between Person and Organization can be rendered by extending the Person view as the metaclass Person contains the reference belongsTo.

1. Extend the Person view

• • – Open the JSX template of the Person view
  • – Add the following JSX code at the end of the Person template

				
					  <Edge
    key={data.id + data.belongsTo.value.id}
    view={'EdgeAssociation'}
    start={node}
    end={data.$belongsTo.value.node}
    label={'belongsTo'}
  />
				
			

 

The tag <Edge ../> is a JSX component that is part of the Jjodel Definition Language library and renders an edge between two model nodes, i.e., two representations of model elements (instances of Person and Organization, in this case). The Edge attributes have the following meaning

• – key: a unique identifier to univocally denote the edge, e.g., the string consisting of the concatenation of the id of Alice and the id of Organization_0; please note that such an expression must be extended in case multiple edges are between the same elements;
• view: it is a view defining the way the reference looks like, in this case EdgeAssociation is part of the Jjodel Default Syntax, other representations are EdgeAggregation, EdgeComposition, EdgeDependency, and EdgeInheritance ;
• start: the source node, e.g., Alice in this case, denoted by the expression node;
• end: the target node, e.g., the Organization_0 denoted by the following expression data.$belongsTo.value.node;
• label: the string that names the edge.

The expressions in start and end are composed according to the Jjodel Object Model.

 

The final JSX template for Person is now:

				
					
    {data.$name.value}
  <Edge
    key={data.id + data.belongsTo.value.id}
    view={'EdgeAssociation'}
    start={node}
    end={data.belongsTo.value.node}
    label={'belongsTo'}
  />

				
			

 

The model looks as follows:

 

Create a Metamodel for a Simple UML Class Diagram

This video provides a step-by-step guide to creating a simple UML class diagram metamodel. Viewers will learn how to define core elements such as classes, attributes, and relationships, building a foundational structure for UML modeling. With clear explanations and hands-on examples, the tutorial simplifies metamodeling concepts, making it accessible for both beginners and those looking to reinforce their skills

Watch