Web-modeler

It is a typical phenomenon that only a select few experts are doing the modelling in your organization, which in turn results in a lack of understanding and use of the models in the rest of the organization.

With QualiWare X we are creating a space for inclusive collaboration in a web-based interface, with the purpose of organization-wide involvement. By enabling everyone to create business process networks, workflow diagrams, ArchiMate diagrams, and several other types of diagrams, directly from your browser, with intuitive and easy-to-use visual drag and drop design, you are guaranteed increased mobility, flexibility and stakeholder engagement across the entire organization.

Content

The Web-modeler enables you to easily create diagrams in accordance with the underlying meta-model.

The diagrams can be created and edited the “classic way”, using the drag-and-drop design:

In the Editing Toolbar you can find buttons that can rearrange, resize and align symbols.

Use the Layout panel, to automatically organize the objects in accordance with one of the available standard layouts.

You can also use the import menu to accelerate the model creation based upon inserted/imported text:

Below is a guide on how to use the different features of the web-modeler and at the bottom there are videos that will explain further, along with a list of useful shortcuts.

QualiWare is working on enabling more and more diagram to the web-modeler, below is a list of diagrams currently available in the web-modeler.

Creating/Editing a Diagram

Adding a Symbol

You can add a new symbol to the diagram the following way:

1a. Either left Click a symbol (a BusinessProcess) from the symbol bar or Drag with your left mouse button and release where you wish to place the symbol

1b. or double-click on the white canvas for a list of available symbols, and select the symbol type you need

2. Give the object (BusinessProcess) a name. Once 3 or more characters of the name are typed, a “search-box” will appear showing all similar objects in the repository of the selected type (BusinessProcess). This enables reuse of objects and/or having unique object names in the repository.

3. Alternatively hover over an object (BusinessProcess) you wish to repeat/clone and click one of the four arrows

  • Click to clone and connect
  • CTRL+Click to clone
  • Shift+CTRL+Click to connect
  • Click and drag to draw connection and end with double click to connect to a new symbol (a list of allowed symbols will be shown)

4. A new object (BusinessProcess) will appear. If multiple connection-types are allowed between the two symbols, select the desired connection-type from the menu. Then double click the label and name the new object (BusinessProcess).

Re-using Symbols

The web-modeler helps you to reuse symbols across the repository. As mentioned above the webmodeler lists similar objects containing the same characters when you start naming a symbol. (#2 above under Adding a Symbol).

Another way to find and reuse a symbol is described below:

  1. Select the object (BusinessProcess) and double click the name to highlight the text
  2. Right click the name to open a list of existing objects (business processes)
  3. Browse the list to find the object (BusinessProcess) you’re looking for. Try to sort the columns differently by clicking the column header or enter a searchstring in the search field to narrow down you last.
  4. Select the desired object (BusinessProcess) or click ‘Create New’ if you didn’t find what you were looking for. Finish by clicking ‘Select’ to return the selected object (BusinessProcess) to the diagram

 

You can also explore the existing objects in the repository.

If you select the “Explorer” in the left window, you get a full list of all objects in the right side pane to select from.

From the right side pane you can reuse an object in your model by drag and dropping the object on the canvas.

Connecting Existing Symbols

  1. Hoover the source symbol and select the arrow on the side of the symbol where the connection should start.
  2. Drag the arrow with the left mouse button and release it on top of the target symbol
  3. Select the desired connection type from the popup menu
  4. Use the green selector points on the connection to move sections of the connector to different positionsTip: To find the easiest route between two symbols just select the connection and press  the ‘Space’ key

Editing Symbol Characteristics

  1. Click the symbol or select from the left menu to open a properties pane on the right side of the diagram.
  2. Select the ‘Label’ tab to edit the symbol label style
  3. Select the ‘Symbol tab to edit graphics style of the symbol
  4. Select the ‘Attributes’ tab to edit view the properties of the symbol

Editing Toolbar

Sizing

  • Use the buttons in the toolbar to align symbols
    • First select the controlling symbol (the symbol with the correct size/width/height. Then hold the shift key down and select the symbols you wish to change.
    • Then press one or more of the action buttons
      • Resize to original size
      • Align width (with first selected object)
      • Align height (with first selected object)
      • Align size (with first selected object)

Alignment

  • Use the buttons in the toolbar to align symbols with first selected
    • Align left edge
    • Align vertical center
    • Align right edge
    • Align top edge
    • Align horizontal center
    • Align bottom edge
    • Align horizontal spacing with first and last selected
    • Align vertical spacing with first and last selected

Layouts

You can shift between different layouts.

The Web-modeler will automatically organize the objects according to the selected layout.

Import model from Text or Table

Text to Model

It is possible to create new models from text, using the import feature:

  1. Select “Import from Text”
  2. You can type in/insert text in the “Text to Model” box
    • NOTE there is a short guidance text for how to insert text when using the default setting for the Connection and Hirarchical layuot types
  3. The model will be created based upon the “Settings”
    • Here you can choose between different Layout types, to which template(s) the inserted text should be “translated”, select Seperator, and specify symbol size.

Table to Model

You can accelerate creation of new models by using the Table to model feature, introduced in QualiWare 10.8

  1. The import from table can be used to easy draw workflow-diagrams and box-in-box diagrams
  2. Once you type in the columns in the table the model will be created
  3. You can select/change symbol template for the symbol
  4. When you refer to a symbol in “Connects To” column the symbols will be connected (activities in the same row will be auto connected)

Below is an example of a box-in-box diagram (Business Capability Model), created using the table to model feature.

The table to model settings can be configured via the HTML Model Generator Settings template.

Videos demoing the Web-modeler:

Building a Business Process Network

Using the table to model feature

ArchiMate 3.1 in the web-modeler

New Features in the Web-Modeler

Useful Shortcuts in the Web-modeler

F1                                                              Open Help information pertaining to the selected object.

F2                                                              Rename the selected object.

F3                                                              Search.

J                                                                 Align the selected objects respective of the first selected object.

S                                                                Copy the Size of the first selected object to all the subsequently selected objects.

Spacebar                                                Automatically re-draw the selected connections.

ALT + Left-click                                    Selecting an object and ALT+ Left-clicking on an object’s label opens the label editor.

ALT + Left-click + drag                       ALT+Left-click a label/button panel while moving the mouse, moves the label/button panel.

CTRL + A                                                 Select all objects in the diagram.

CTRL + F                                                 Find a symbol in the diagram.

CTRL + G                                                 Toggle the drawing grid.

CTRL + Y                                                 Redo.

CTRL + Z                                                 Undo.

Arrow-keys                                            Move the selected object in the arrow key direction.

Shift + Z                                                   Automatically zoom to view the entirety of the model.

hold Z + Left-click + drag                   Zoom to the window selected by the mouse.

1                                                                Zoom to 100%

Shift + CTRL+ Left-click + drag        Create/remove space between objects in the direction of mouse movement. This will move all object(s) to the right and below the mouse click (shown by support lines)

Download the shortcuts-list in pdf:

Web-Modeler enabled diagrams

QualiWare is enabling more and more diagrams to become webmodeler enabled. You can see a list of web-modeler enabled diagrams here.