Help

Shortcuts

• Select previous cell - left
• Select parent cell - up
• Select child cell - down
• Select next cell - right
• Delete cell - delete
• Select all - ctrl + a
• Cut - ctrl + x
• Copy - ctrl + c
• Paste - ctrl + v
• Undo - ctrl + z
• Redo - ctrl + y
• Zoom in - -
• Zoom out - +

Controls for graph

• Multiple cell selection - ctrl + left mouse button
• Graph panning - right mouse button + mouse move

Concept of application

Application is consisting of several parts. Toolbar - on the top, sidebar - on the left, properties bar - on the right, statusbar - on the bottom, canvas - in center part.

Save

File is downloaded to default download folder according to system settings.

Load

Shows system dialog to select file on your device. File must be of .xml file extension and in format saved by this application.

Export window

You can export created diagram into image .png. Before export you can specify scale. If coefficient is smaller than 1, is smaller and picture includes less details. If coefficient is greater than 1, picture is generated in higher resolution.

Settings window

In this setting you can affect behaviour of editor and also of graph making by function in sidebar.

• Automatic model save to local storage - If turned on, after every change, model is automatically saved into browser local storage. When you close browser and later open, into editor is loaded last automatic save of model.
• Show background grid image - If turned on, in canvas side is shown grid image as background, otherwise background is white.
• Use grid, allow move cells by set grid size - If turned on, when you moved cell, it is catch on virtual grid by configurated size. Cell movement is possible on grid.
• Entity type width - Width used when creating new entity type.
• Entity type height - Height used when creating new entity type.
• Attribute diameter - Diameter used when creating new attribute.
• Attribute position X from center entity type - It is distance on X axis from center of entity type to center of attribute used when new attribute is creating by drag and drop. X axis is horizontal direction from left to right.
• Attribute position Y from center entity type - It is distance on Y axis from center of entity type to center of attribute used when new attribute is creating by drag and drop. Y axis is vertical direction from top to bottom.
• Relationship type width - Width used when creating new relationship type.
• Relationship type height - Height used when creating new relationship type.
• Relationship type recursive position X from center entity type - It is distance on X axis from center of entity type to center of relationship type used when new recursive relationship type is creating through sidebar function. X axis is horizontal direction from left to right.
• Relationship type recursive position Y from center entity type - It is distance on Y axis from center of entity type to center of relationship type used when new recursive relationship type is creating through sidebar function. Y axis is vertical direction from top to bottom.
• Hierarchy point size - Size of center point of a hierarchy.
• Composite attribute intersection point size - Size of point indicating participation attribute or relationship type in composite identifier.

Toolbar

Toolbar is consisting of tho lines of tools. First line manage windows of applications. Second line provides some function to work with editor. eg. Redo, Undo...

Sidebar

Sidebar is located on the left side. It includes construct and functions to creating model. Some constructs can be created by drag and drop. Rest of functionalities are available depending on the cells selection.

• Entity type - You can create by D&D from sidebar onto intended position.
• Attribute - You can create by D&D from sidebar onto intended entity type or attribute (creates from simple attribute composite attribute or add new member to already existing composite attribute). Possible targets are highlighted by blue color when construct is pointed. Alternatively you can select entity or attribute and click on icon in the sidebar.
• Relationship type - You can create by D&D from sidebar onto intended position. Relationship type has no participation of any entity type. Participation of entity type you can add by this way. Point by mouse into central part of intended relationship type (relationship type wil be highlighted by green color). Press down left mouse button, hold and move your cursor above intended entity type (during selection, there is dashed connection line rendering by red color). Release left mouse button above intended entity type. Participation is created.
  Second way how to create relationship type connected with entity types is. Select entity types and click on icon in the sidebar. It creates relationship type with single participation of each selected entity type. When is selected only one entity type. It creates relationship with double participation of selected entity type. If you want cancel participation, simple select connector between entity type and relationship type and press "delete".
• Composite identifier - Firstly select one or more attribute (circle part or connector of attribute) and click on the icon in the sidebar.
• Weak entity type - Firstly select one or relationship connectors (connector between entity type and relationship type), additionally you can select attributes and click on the icon in the sidebar.
• Hierarchy - Firstly select entity type(s), which will represent subclass(es) in hierarchy. Then click on icon in the sidebar. Finally click on entity type which will represent superclass in new hierarchy.

Properties bar

Some constructs have properties you can edit. Select construct and possible properties is showing in properties bar. (Must be showed by toolbar - Properties window). Typical properties to edit - name, cardinality, multivalued attribute constraints, label alignment

Browser support

When application is hosted on web server, can be access by most populars browser with actual updates - Google Chrome, Mozilla Firefox, Microsoft Edge. We do not know about any problem with running by them

Local usage

Application is primarily intended for placement on a web server hosting. But also can be used from folder by index.html in web browser with limitation. We known about troubleshoot in Google Chrome and Microsoft Edge. Problem is caused by security policy about xhr request in javascript on local host. In Chrome can be unblock by starting Google Chrome with --allow-file-access-from-files argument from command line. In this way of use, is better to use Mozilla Firefox. Only limitation in Mozilla Firefox is that background of canvas is not loaded and shown.

Generally we do not recommend start application on device as open index.html in browser from folder, but there is another way how to start application on device. More comfortable and easy solution to run app on local machine is use Google chrome application - Web Server for Chrome (https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb). It is application installed on your computer. When you run Web Server for Chrome, you choose folder where this editor is saved on device and copy localhost url with port into your browser and application run without problem. Then you can use any browser supported same as application has been hosted on remote web server.

Copy - behaviour

If you copy selection of cells and after paste not all of selection is copied, it is standard behaviour of application. Only valid wholes can be copied. Before copy you selected whole which does not make sense after paste, this not valid whole was not copied.