The definition of the structure presented below is intended to standardize the creation of languages that will be interpreted by the VariaMos graphics engine, otherwise, any definition and/or structure different from the one described, must be validated by the VariaMos community for its subsequent approval and/or implementation, therefore, it is of vital importance to follow the following indications:

Definition of abstract syntax

The abstract syntax definition is composed of:

Elements

An element is composed of a name and a property specification.

An element is specified as follows:

"elements": {
    "<nameOfElement>": {
      "properties": [
        "..."
      ]
    }
  },

You can see the property specification here.

Restrictions

Restrictions are constructed in a standardized and general way for all languages. You can see the restrictions specification here.

Relationships

A relationship is composed of a name, a maximum value, a minimum value, a source, a set of destinations and properties.

A relationship is specified as follows:

{
"..."
  "relationships": {
    "<nameOfRelationship": {
      "max": "<maxValue>",
      "min": "<minValue>",
      "source": "<nameOfElement>",
      "target": ["<nameOfElement>", "<nameOfElement>"],
      "properties": ["..."]
    }
  }
  "..."
}

Example:

{
"..."
  "relationships": {
    "Bundle_Feature": {
      "max": 9999999,
      "min": 1,
      "source": "Bundle",
      "target": ["AbstractFeature", "ConcreteFeature"],
      "properties": []
    }
  }
  "..."
}

Specification

Below is the complete specification of the abstract syntax.

{
  "elements": {
    "Bundle": {
      "properties": [
        {
          "name": "Type",
          "type": "String",
          "comment": "Type options"
          "possibleValues": "And,Or,Xor,Range"
        }
      ]
    },
    "RootFeature": {},
    "AbstractFeature": {},
    "ConcreteFeature": {}
  },
  "restrictions": {
    "quantity_element": [
      {
        "max": 1,
        "min": 1,
        "element": "RootFeature"
      }
    ]
  },
  "relationships": {
    "Bundle_Feature": {
      "max": 9999999,
      "min": 1,
      "source": "Bundle",
      "target": ["AbstractFeature", "ConcreteFeature"],
      "properties": []
    },
    "RootFeature_Feature": {
      "max": 9999999,
      "min": 1,
      "source": "RootFeature",
      "target": ["AbstractFeature", "ConcreteFeature", "Bundle"],
      "properties": [
        {
          "name": "Type",
          "type": "String",
          "possibleValues": "Mandatory,Optional,Includes,Excludes,IndividualCardinality"
        }
      ]
    }
  }
}

Definition of concrete syntax

The purpose of the concrete syntax is to draw the elements and relations defined in the abstract syntax, therefore, the concrete syntax is composed of elements and relations.

Elements

In this occasion, the elements are specified in the following way

{
  "elements": {
    "Bundle": {
      "draw": "<base64Code>",
      "icon": "<base64Code>",
      "label": "<nameOfLabel>",
      "width": "<integerValue>",
      "design": "<stringValue>",
      "height": "<integerValue>",
      "label_property": "<stringValue>"
    }
  }
}

For the “draw” and “icon” properties we must use a base64 encoding engine

In “draw”, you must specify in base64 (you can use this one) the code required for the graph to be interpreted by MxGraph, click here for more information on how to build graphs in MxGraph.

For the construction of the above element, the following specification was used:

<shape name="component" aspect="fixed" strokewidth="2">
  <background>
    <strokecolor color="#446e79" />
    <fillcolor color="#ffffff" />
    <path>
        <ellipse x="0" y="0" w="100" h="100" />
    </path>
 </background>
 <foreground>
     <fillstroke />
 </foreground>
</shape>

In “icon”, you must use a base64 image encoding engine (you can use this one) to make the configuration of the image that will be rendered in the elements panel.

Example:

{
  "elements": {
    "Bundle": {
      "draw": "PHNoYXBlIG5hbWU9ImNvbXBvbmVudCIgYXNwZWN0PSJmaXhlZCIgc3Ryb2tld2lkdGg9IjIiPgoJPGJhY2tncm91bmQ+CgkJPHN0cm9rZWNvbG9yIGNvbG9yPSIjNDQ2ZTc5Ii8+CgkJPGZpbGxjb2xvciBjb2xvcj0iI2ZmZmZmZiIvPgoJCTxwYXRoPiAKCQkJPGVsbGlwc2UgeD0iMCIgeT0iMCIgdz0iMTAwIiBoPSIxMDAiLz4gCgkJPC9wYXRoPgkJCgk8L2JhY2tncm91bmQ+Cgk8Zm9yZWdyb3VuZD4KCQk8ZmlsbHN0cm9rZS8+Cgk8L2ZvcmVncm91bmQ+Cjwvc2hhcGU+",
      "icon": "iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAACE0lEQVRIS7WVv6v5YRTH3zaL3wYDizLIxMBCyT+AJJNEWCkpBjuDYiKUSULiL/BjU4qESUhsfkRZTG7PR1yuz/12fd17xuc5z+v8es45jPP5fAaNbDYbhMNhVKtVsFgsKJVK6PV6tFot9Pt9HI9HWCwWRKNR8Pn8JwKDDpxOpxGJRFCr1aBQKMDj8Z4e7nY7jMdjmEwmCu7xeB50nsBmsxkikQipVIouENozr9eLw+GAUql0u38AEygJ1+fz/Rh6VYzH4+h0OqhUKtTRDUzCHwwGL3n61TpJh0ajgdvtvoBJoeRyOdbr9cuefn1A6jGfzy9gYsnhcECr1b4NbrfbKBaLFzD5LtPplLb6r1q6Rs9YLBZnnU6HxWLxKuNbfYlEAka9Xj/n83nU6/VfAxuNRjASiQTVI36//9fAyWTyDz3+sxyTPAgEAkwmE9ph8mp+SC+Q+UJ9N9Lrdrsd5He8K81mE+Vy+QImk0omk2G73b7LBYfDwXK5/JwV2WwW3W4XmUzmv+Eul4uK2ul0foIJzWazQa1WIxAIvAwnM3k4HKJQKDxOtyvJarWCy+WCRPBTIZ6eTqcb9GFs3kNyuRyCwSDVjaTCQqHwyQap/mg0ojZIIpGgwr8X2tVEFPb7PUKhELXzmEwmVCoVDAYDGo0Ger0e5SHZebFYDGw2+8nwt+B7zdVqRcFmsxmkUillRCwW/zNTH/HNGKNltOpYAAAAAElFTkSuQmCC",
      "label": "Bundle",
      "width": 100,
      "design": "shape=Bundle",
      "height": 50,
      "label_property": "Type"
    }
  }
}

Relationships

In this occasion, the relationships are specified as follows

{
  "relationships": {
    "<nameOfRelationship>": {
      "styles": [
        {
          "style": "<codeForStyles>"
        }
      ],
      "label_property": "<nameOfLabel>"
    }
  }
}

Example:

{
  "relationships": {
    "Bundle_Feature": {
      "styles": [
        {
          "style": "strokeColor=#446E79;strokeWidth=2;endArrow=none;"
        }
      ],
      "label_property": "Type"
    }
  }
}

Specification

Below is the complete specification of the concrete syntax.

{
  "elements": {
    "Bundle": {
      "draw": "PHNoYXBlIG5hbWU9ImNvbXBvbmVudCIgYXNwZWN0PSJmaXhlZCIgc3Ryb2tld2lkdGg9IjIiPgoJPGJhY2tncm91bmQ+CgkJPHN0cm9rZWNvbG9yIGNvbG9yPSIjNDQ2ZTc5Ii8+CgkJPGZpbGxjb2xvciBjb2xvcj0iI2ZmZmZmZiIvPgoJCTxwYXRoPiAKCQkJPGVsbGlwc2UgeD0iMCIgeT0iMCIgdz0iMTAwIiBoPSIxMDAiLz4gCgkJPC9wYXRoPgkJCgk8L2JhY2tncm91bmQ+Cgk8Zm9yZWdyb3VuZD4KCQk8ZmlsbHN0cm9rZS8+Cgk8L2ZvcmVncm91bmQ+Cjwvc2hhcGU+",
      "icon": "iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAACE0lEQVRIS7WVv6v5YRTH3zaL3wYDizLIxMBCyT+AJJNEWCkpBjuDYiKUSULiL/BjU4qESUhsfkRZTG7PR1yuz/12fd17xuc5z+v8es45jPP5fAaNbDYbhMNhVKtVsFgsKJVK6PV6tFot9Pt9HI9HWCwWRKNR8Pn8JwKDDpxOpxGJRFCr1aBQKMDj8Z4e7nY7jMdjmEwmCu7xeB50nsBmsxkikQipVIouENozr9eLw+GAUql0u38AEygJ1+fz/Rh6VYzH4+h0OqhUKtTRDUzCHwwGL3n61TpJh0ajgdvtvoBJoeRyOdbr9cuefn1A6jGfzy9gYsnhcECr1b4NbrfbKBaLFzD5LtPplLb6r1q6Rs9YLBZnnU6HxWLxKuNbfYlEAka9Xj/n83nU6/VfAxuNRjASiQTVI36//9fAyWTyDz3+sxyTPAgEAkwmE9ph8mp+SC+Q+UJ9N9Lrdrsd5He8K81mE+Vy+QImk0omk2G73b7LBYfDwXK5/JwV2WwW3W4XmUzmv+Eul4uK2ul0foIJzWazQa1WIxAIvAwnM3k4HKJQKDxOtyvJarWCy+WCRPBTIZ6eTqcb9GFs3kNyuRyCwSDVjaTCQqHwyQap/mg0ojZIIpGgwr8X2tVEFPb7PUKhELXzmEwmVCoVDAYDGo0Ger0e5SHZebFYDGw2+8nwt+B7zdVqRcFmsxmkUillRCwW/zNTH/HNGKNltOpYAAAAAElFTkSuQmCC",
      "label": "Bundle",
      "width": 100,
      "design": "shape=Bundle",
      "height": 50,
      "label_property": "Type"
    }
  },
  "relationships": {
    "Bundle_Feature": {
      "styles": [
        {
          "style": "strokeColor=#446E79;strokeWidth=2;endArrow=none;"
        }
      ],
      "label_property": "Type"
    }
  }
}

Styles examples and guides:

Examples

Relationships styles

Styles in Draw.io

Create and edit complex custom shapes

Definition of semantics

Please see here for a description of how to define a language’s semantics.

---

Are you ready to create a language?

Let’s do it, click here.