erwin Evolve 2024.0.0 - User Guide

Displaying Vector (HTML5) for Displaying Diagrams

Displaying Vector (HTML5) for Displaying Diagrams

This page explains how to display CW Modeler diagrams in Vector (HTML5) format in your Evolve Site.

Vector (HTML5) diagrams introduce a new method for displaying CW Modeler diagrams, bringing increased load performance, better picture quality and perfect scaling.

Use the Vector (HTML5) Diagram display

To use the Vector (HTML5) Diagram display:

1.Open one of your existing Diagram pages.

2.Add a new behavior to the Layout Diagram node you want to change, ensuring you choose the Vector (HTML5) option.

3.Delete the existing CW Modeler Diagram node.

Support for diagram elements

The Vector (HTML5) diagram behavior supports all diagram elements typically available to CW Modeler diagrams, except for the following:

The following elements are NOT supported:

•Association Type Regions

The following elements are PARTIALLY-supported:

•Version Control (all items except for the Detailed Object section)

•Free Text (only Free Texts referenced on the palette)

Diagram Shapes

There is partial support for available for the following diagram shapes:

Lines and Connectors

All lines and Connectors are supported.

Shape Regions

The following table shows the support for shape regions:

Publishing Static Sites

If you only use the Vector (HTML5) behavior to display diagrams in your Static Site, you can tell Evolve to no longer generate image files of the diagrams in your repository when you publish the Site.

Generating diagram image files is often the most time-consuming part of publishing a Static Site and they are not needed for the Vector (HTML5) behavior, so choosing not to export them can significantly speed up publication.

Use the Export Diagram Images option on the Site node settings  to disable diagram image generation.

Editing Business Process Diagrams

Editing Business Process Diagrams

BP modeler is used to both edit and create Process Diagrams online, using predefined Dynamic Templates and Themes.

The different features within the Editor are detailed below:

Navigation

BP modeler controls that can be used when editing a diagram.

Click Summary

Keyboard Shortcut Summary

Drafting & Publishing

When BP modeler is enabled for an Object Type, 2 menus are created; a drafts menu and a published menu.

Drafts Menu

The Drafts menu displays all the current drafts for the specified object type. Drafts can be viewed in Tile view, or Full view. Hovering over the draft will reveal the draft controls:

These controls allow you to view, edit, delete or open the diagram in the Object page.

Published Menu

The Published menu displays all the published diagrams for the specified object type. Drafts can be viewed in Tile view, or Full view. Hovering over the draft will reveal the diagram controls:

These controls allow you to view, edit or open the diagram in the Object page.

Creating New Diagrams

In the top-right of the Drafts and Published pages there is an icon that can be clicked to create a new diagram:

Duplicating Diagrams

To duplicate diagrams, edit an existing diagram and navigate to the Actions menu:

Clicking the first icon will result in a duplicate of the current draft being created.

What do you want to do next?

Enable BP modeler

To Enable BP modeler:

The Server Configuration Dialog will open.

BP modeler will be enabled for use on your Site.

1.Open Evolve Designer and select the Evolve Designer Models launcher dialog, click on the Server Configuration button:

2.Open the Features tab and check the Enable BP modeler check box.

3.With the function enabled, Open the Dynamic Deployment tab and click the Save button to commit the changes to your Site.

Adding BP modeler Pages to Object Types

In Evolve Designer, right click on Object Pages and hover over Add BP modeler Page for Object Type to expand the list of Object Types. Simply click an object type and Evolve will automatically add the pages to view BP modeler drafts and published diagrams.

Once your configuration is complete, publish your Evolve site as usual.

Configuring a dynamic template to support BP modeler

Launch Evolve and login as a System Manager and you will now have an Administration menu, under which you will see Dynamic Template Editor.

Create a New Diagram from an Existing Template

To Create a New Diagram from An Existing Template:

A sub-menu for that process will open, listing three options to select from:

The Process Flow page will open.

The BP modeler canvas will open and you can begin to create your new Process Diagram.

1.Open Evolve and click on the Processes tab.

2.Click on the All Processes option to display a list of all available processes.

3.From the list displayed, select the Process that you wish to build a Diagram for.

oProcess

oProcess Flow

oProperties

4.Click on the Process Flow option.

5.Click on the Create a new diagram based on the template [Template Name] link at the top of the screen.

Create a Basic Linear Process Diagram

A basic Process Diagram will capture three simple steps: The Event that triggers the process, an Activity or Decision, and a Result.

To Start Your Basic Process Diagram:

See Create a New Diagram from an Existing Template.

The Shape will be transferred to the Canvas Area.

The description will be added to the Shape:

The Next Shapes available for selection will then display in the Shape Menu Pane:

The second Shape will be transferred to the Canvas Area and connect to the existing Event Shape:

The Next Shapes available for selection will then display in the Shape Menu Pane:

This final Shape will be transferred to the Canvas Area and connect to the existing Activity/Decision Shape:

Your basic Process Diagram is now ready to be saved.

See Saving your Work in eModeler.

1.Open eModeler and select the appropriate Process from which to create the new Diagram.

2.In the Shape Menu Pane, click on the appropriate Event Shape.

3.Add a description or title to the Shape by entering details into the Name field in the Properties Menu Pane.

4.Click on the green circle containing a tick, the Validate your Changes button, displayed beneath. Alternatively, press the Enter button on your keyboard.

5.Select the next Activity/Decision Shape by clicking on it.

6.Add a description or title to the Shape and save it.

7.Select the available Result Shape by clicking on it.

8.Add a description or title to the Shape and save it.

9.Save your Diagram.

Saving your Work in eModeler

To Save a Draft

Drafts save automatically as they are edited, so you will never have to worry about accidentally closing the browser and losing all of your changes.

To Do Menu Pane

There is a fourth, hidden, menu pane called To Do, which only appears if there are any aspects of your Diagram requiring action. The To Do menu will list these actions and the Shapes relating to these tasks will be highlighted by a red border. Users will be prevented from saving your work until these actions are addressed.

Once the actions have been completed, you will be able to successfully save your work.

1.Select a Task from the list to be taken to the relevant aspect of the Diagram requiring action.

Add Descriptions and Properties to a Shape

To Add a Description or Property to a Shape:

As soon as new information is added to the fields, a green circle containing a tick, the Validate your Changes button, displays beneath.

1.Click on the Diagram tab to select the required Shape and add it to the Diagram.

2.In the Properties section of the Diagram tab, enter the desired information into the Name and Title fields.

3.Click on the Validate your Changes button to save your new description to the Shape.

Create a Connection between Shapes: Add Alternative Branches (Simple)

There are three ways to create a connection between two shapes. Each method is described below.

To Create a Connection Between Two Shapes, Either:

The Shape will be highlighted by a solid border to indicate that it has been selected.

A Connector linking the Shape to your mouse pointer will appear.

The linked Connector follows the mouse pointer. The Connector will turn red when encountering Shapes that cannot be connected to, and green with those Shapes that it can.

The Connector will link the two Shapes, indicating that a connection between the two has been made.

1.Select the first shape by clicking on it.

2.Click on a Connector from the Shapes Menu pane.

3.Move your mouse pointer to the Shape you would like to connect to (target Shape).

4.Click on the Canvas to end Shape selection.

OR

The Shape will be highlighted by a dashed border to indicate that it has been selected.

A Connector will link the two Shapes, indicating that a connection between the two has been made.

1.Click and hold (long-click) on the first Shape to select it.

2.Double-click on the target Shape.

OR

A Connector will link the two Shapes, indicating that a connection between the two has been made.

1.Hold down the Shift key and click on the first Shape to select it.

2.Double-click on the target Shape.

Create a Connection between Shapes: Add Alternative Branches (Multiple)

There are three ways to create connections between multiple Shapes. Each method is described below.

To Create a Connection Between Multiple Shapes:

The Shape will be highlighted by a solid line to indicate that it has been selected.

Each additional Shape will be highlighted with a dashed border to indicate Multiple Selection Mode.

Connectors will link the Shapes, indicating that connections have been made between them.

1.Select the first shape by clicking on it.

2.Hold down the Shift key and click on the next shape.

3.Double-click on the final target Shape to end the multiple selection.

OR:

The border of the Shape will be highlighted with a dashed border to indicate that it was been selected.

Each additional Shape will be highlighted with a dashed border to indicate Multiple Selection Mode.

Connectors will link the Shapes, indicating that connections have been made between them.

1.Select the first shape by clicking and holding on it (long-click).

2.Click on the extra Shapes required.

3.Double-click on the final target Shape to end the multiple selection.

OR:

Each Shape will be highlighted with a dashed border to indicate Multiple Selection Mode.

Connectors will link the Shapes, indicating that connections have been made between them.

1.Press and hold down the Shift key.

2.Click and drag your pointer over the area containing the Shapes to be selected.

3.Once you are happy with the Shapes selected, release the Shift key stop dragging across the area.

4.Double-click on the final target Shape to end the multiple selection.

Delete Shapes from the Diagram

To Delete a Single Shape or Connector from your Diagram:

The Clear Shape icon will display:

The Shape or Connector is deleted.

1.Select the Shape or Connector.

2.Click on the Clear Shape icon

To Delete Multiple Shapes or Connectors from your Diagram:

The Clear Shape icon will display.

The Shape or Connector is deleted.

1.Select the necessary Shapes or Connectors.

2.Click on the Clear Shape icon.

To Delete a Swimlane from your Diagram:

The Swimlane will be deleted but the Shape[s] attached to it will remain.

1.Select the Swimlane and proceed to delete as with a Shape or Connector.

Assign Swimlane Elements to your Process

It is possible to group or assign various aspects of your diagram to a particular Swimlane element. Assigning Shapes to a Swimlane can provide clarification about which organizational roles or functions are responsible for which parts the process being captured in your diagram.

To Assign a Shape[s] to a Swimlane:

1.Click on the required Shape[s] that you would like to assign.

2.In the Selection Menu Pane, a Swimlane Sub-menu pane will appear. The sub-menu will use the same title as the element placed inside the Swimlane category in the Diagram Template Editor. In the example below, the Swimlane element is 'Organization'.

3.You will be prompted to either search for or create a the new group to assign the Shapes to:

The previously selected Shapes will be assigned to the new group.

1.Select (or create) the desired group.

To Change the Name of a Group/Swimlane Element:

A solid border will appear around the element Shape (Organization grouping).

The Swimlane (Organization) sub-menu will appear in the Editor Menus area.

The new description will be added to your Shape.

1.Select the Swimlane element by clicking on it.

2.Enter the new element name into the properties field provided.

3.Click on the green Validate your Changes button to save your new description to the Shape. Alternatively, press the Enter key on your keyboard.

To Remove a Swimlane from your Diagram:

A solid border will appear around the element Shape (Organization grouping).

The Swimlane (Organization) sub-menu will appear in the Editor Menus area.

The Swimlane element is removed from your Diagram.

1.Select the Swimlane element by clicking on it.

2.Click on the Clear Shape icon located in the in the Properties section of the pane:
 

Change the Appearance of your Diagram

When creating your Diagram, it is possible to adjust the both the orientation of the Diagram and the Theme used.

To Open the Appearance Options:

The Appearance Menu options will display:

1.Open your Diagram Draft and click on the Appearance Menu Pane.

2.Select the appropriate option.

To Change the Orientation of your Diagram:

Alternatively;

The Diagram will change orientation accordingly.

1.Open the Appearance Menu Pane.

2.Click on the Left to Right icon to display your Process Diagram from left to right across the screen:

3.Click on the Top to Bottom icon to display your Process Diagram from the top to the bottom of the screen:

To Change the Theme Used by your Diagram:

A list of Themes available for selection will display in the Theme sub-menu.

The new Theme will be applied to your Diagram.

1.Open the Appearance Menu Pane.

2.Select your chosen Theme by clicking on the relevant pane:

Exit eModeler

To Exit the Application:

The screen returns to the previous Process Summary page.

1.Click on the Close Edit Mode icon at the top of the screen:
 

Using Web Modeler

Overview of Web Modeler - Editing Diagrams Online

Web modeler is used to both edit and create any Evolve Diagram online.

The different features within the Editor are detailed below:

Navigation

Web modeler controls that can be used when editing a diagram.

Click Summary

Keyboard Shortcut Summary

Overview of Web Modeler - Editing Diagrams Online

Overview of Web Modeler - Editing Diagrams Online

Web modeler is used to both edit and create any Evolve Diagram online.

The different features within the Editor are detailed below:

Navigation

Web modeler controls that can be used when editing a diagram.

Click Summary

Keyboard Shortcut Summary