Diagram description

Before you Start

🔥 This feature is currently considered experimental. Try it out and give feedback by reporting bugs and suggesting new features. It’s not recommended for production use.

🛠️ This feature is available to studio makers.

This page explains how the View description models diagram editors inside Sirius Web.

1. Introduction

The Diagram representation allows you to create rich graphical editors for your domain models. As with other representation types, it uses the same foundational expression language and styling concepts.

How to create a diagram description in four steps:

  1. Create a Studio project with a View inside.

  2. Create a Diagram Description inside the view.

  3. Configure node and edge descriptions, styles, tools, and palettes.

  4. Save and test; Sirius Web hot-reloads the representation description without code generation.

2. Diagram Description

2.1. Core Properties

Every representation description provides the following fundamentals:

  • name: String A unique identifier of the description. If the name is changed, existing representations created from this description will stop working.

  • domainType: DomainType Fully qualified type of the semantic element on which the representation can be created. For example flow::System or ecore::EClass.

  • preconditionExpression: InterpretedExpression Expression evaluated on the semantic element on which the representation may be created; the representation is available only when it returns true. If the expression is not set, the representation is always available. Here are the variables available for this expression:

    • self: Object The semantic element on which the representation may be created

  • titleExpression: InterpretedExpression Use to compute the default representation label visible when the new representation creation dialog is opened. The end user can choose not to use it and provide instead their own label. This Here are the variables available for this expression:

    • self: Object The semantic element on which the representation may be created

  • iconExpression: InterpretedExpression Used to compute the icon associated with the representation. This expression should return an icon path, for example the path of an image file in the application like aql:'/folder/icon.svg' for an icon available in a specific folder of a maven module.

    • self: Object The semantic element on which the representation is being created

  • description: String Some documentation to let the studio makers understand the purpose of the representation.

  • endUserDocumentation: String Some documentation to let the end users understand the purpose of the representation.

2.2. Structure

The diagram description element can contain two major types of elements: NodeDescription and EdgeDescription. These elements describe the top level nodes and the edges that can be displayed in the diagram.

  • nodeDescriptions: NodeDescription

  • edgeDescriptions: EdgeDescription

2.3. Styling

The diagram description itself can contain styling information.

  • style: DiagramStyleDescription The default style of the diagram

  • conditionalStyles: ConditionalDiagramStyle A list of conditional styles that can be applied to the diagram based on its state

  • decoratorDescriptions: DecoratorDescription A list of decorators that can be applied to some diagram elements. Decorators are used to add additional information or visual cues to the diagram elements thanks to icons and labels

2.4. Interaction

The diagram description can also contain information about the interaction with the diagram, such as the toolbar and palette.

  • toolbar: DiagramToolbar Used to configure the toolbar of the diagram. The toolbar is visible at the top of the diagram and can contain buttons to perform actions on the diagram or its elements.

  • palette: DiagramPalette Used to configure the palette of the diagram. The palette is accessible thanks to a right click on the background of the diagram. It can contain tools to create new elements in the diagram or to perform actions on the diagram or its elements.

  • groupPalette: GroupPalette Used to configure the palette of the diagram when multiple elements are selected. This palette is visible when multiple elements are selected and a right click is performed on the selection. It can contain tools to perform actions on the selected elements.

  • minimapVisible: boolean Used to indicate if the minimap is visible or not. The minimap is a small overview of the diagram that can be used to navigate the diagram quickly.

2.5. Layout

  • layoutOption: DiagramLayoutOption Used to configure the behavior of the automatic layout of the diagram. It can be configured to one of the following values:

    • NONE no automatic layout is applied to the diagram

    • AUTO_LAYOUT the automatic layout is applied to the diagram when the diagram is opened or when the diagram is refreshed

    • AUTO_UNTIL_MANUAL the automatic layout is applied to the diagram when the diagram is opened or when the diagram is refreshed, but it stops being applied when the user starts moving or resizing diagram elements

  • arrangeLayoutDirection: ArrangeLayoutDirection Used to configure the direction in which elements will be arranged when the automatic layout is applied to the diagram. It can be configured to one of the following values:

    • UNDEFINED`

    • RIGHT

    • LEFT

    • UP

    • DOWN