QW Web - Web Diagram Editor

This document describes how to access and use the Qualiware Web Modeller.

Introduction: 

Web Diagram Editor is a powerful function in QualiWare X (version 10 and up) to create and edit diagrams on the web. The function is part of the QEP module (QualiWare Enterprise Publishing) and can be used in mainstream browsers, such as MS Edge, Google Chrome, Safari, and Firefox. The function is device-agnostic and in contrast to QLM (QualiWare Lifecycle Manager), a user doesn’t require Windows to view and edit diagrams. The editor is available in four templates: Business Process Network (BPN), Business Process Diagram (BPD), Workflow Diagram (WFD), and ArchiMate. Web Diagram Editor has a couple of unique features that are not available in QLM, such as Diagram Layout, Text-To-Diagram, and intuitive “drag and connect” building object system. 

Accessing Diagram Editor: 

By default, a user can access Diagram Editor via Repository Explorer.  

Select a template that you would like to create a new or edit an existing diagram:

 

Creating a new diagram: 

• Press on the sushi menu beside the selected template; 
• “Create a new…”; 
• A new canvas will open.
  
  
  

Editing an existing diagram: 

• Search through existing diagrams; 
• Right-click and press “edit” on the selected diagram; 
• The existing diagram will open.
  
  

Using Web Diagram Editor: 

The diagram editor consists of a Mega menu, editing tools, and canvas. Mega menu has four items: symbols, properties, explorer, and settings. A right-side menu is object-specific.  

Symbols: used to build a diagram.

Properties: edit the properties of the diagram here. Explorer: allows you to reuse existing objects. Select an item and drop it on the canvas to reuse.

Settings: adjust canvas visuals and add extended syntax to edit with a larger choice of symbols

 

Extended Syntax: provides an additional 16 symbols (in Business Process Network)

Building Diagram 

Select a symbol, drop it to canvas, and name it. Notice that the Mega menu automatically switches from Symbol to Properties as soon as you select an object. 

You may open the object-specific menu by right-clicking on the object. Select “edit properties” to fill out sub-dialogs or link the object. 

The property fields are identical to QLM’s version.  

 

Creating Objects 

Option A: The quickest way to build a diagram is to use “arrows” which are located around the object. By selecting an arrow, the web editor will automatically create a new object of the same symbol and allow you to select a connection type. 

Create a new name or reuse an existing object by selecting from the list.

You may also create a new object by selecting an object, holding CTRL, and dragging it to a new location. 

Option B: Create an object by clicking and dragging the connection arrow to a desired location. The option works well when you need to create a different symbol/template.

Editing Tools:  

The web editor has a few standard and unique editing tools to enhance the experience. 

Help- link to QualiWare Centre of Excellence; 

Print Version- view diagram as a print-friendly doc; 

Since there is no “autosave” like in QLM, it is important to save your work regularly. If experiencing internet connection issues or exit diagrams without saving, you may lose unsaved content.

You may save a diagram as an image file by selecting “Save as JPG/PNG”. 

Standard Copy-Cut-Paste functions. Note that the function of copying an object means reusing an existing object like in the Explorer function. While copying the file and changing its name, both objects’ names will be affected. 

You may adjust the color and label of the selected symbol. 

Layout: Web Diagram Editor has a unique feature to change an object’s layout. 

Press on the sushi menu for additional options. 

Mobile Access (Tested on iPad) 

The web editor works in a limited capacity from a mobile device. The test has been completed on iOS-tested in both Safari and Google Chrome browsers. Safari is found to be more optimized for iOS devices. You cannot create or use a drop menu, but a user can use Diagram Editor to edit existing content with a few basic features.     

Use Repository Explorer>Edit Diagram to access Web Diagram Editor on the mobile device. 

Symbol Menu 

Properties Menu 

Explorer Menu  

Settings menu 

Tips on navigating mobile editor: 

• Selecting multiple objects -hold one finger on the touchscreen and select an area with objects; 
• Scrolling diagram- hold two fingers on the touchscreen and move toward any direction; 
• Opening slide menus- tap once to open/close left (mega menu) and right (object menu); 
• Creating new objects is using object “arrows” or dropping new symbols on the canvas.
  
  
  

Text-to-Diagram Guide 

Creating diagrams by using text is a fast and effective tool. A user must perform the following steps: 

1. Open Diagram Editor
2. Press on the kebab menu and select “Import from text”.
3. Select a layout type. For an ordinary diagram, select “Connection”.
4. Select the symbol template.                                                                    
5. Select Connection Type.                                                                                        
6. Select a type of separator to be used for populating text.                                      
7. Select the Text to Model tab.                                                                                                                         QualiWare provides an example of how to handle connection and hierarchical layouts. 
8. Since the TAB separator was selected a user must use a tab to separate process names. There are various combinations for establishing a relationship. 
   8.1 Example
   
   8.2 Example
   
   8.3 Example 
   
   8.4 Example 
   
   Note: Once the diagram is created, saved, and re-opened – you may not use the feature without emptying the content. 
   
   
   
   

Publishing  

You must publish newly created or edited web content in the QLM to view it on the web. Just creating content in the Web Editor will not publish new diagrams. 

Procedure: 

• Create a diagram and its objects in the Web Diagram Editor 
• Save diagram 
• Access QLM and open a newly updated diagram. Publish it via HTML Publisher. 
  
  

The content will be published on the web.