Diagram Editor

The diagram editor in codebeamer is a customized mxGraph graph editor which can be used to create and update diagrams where WYSIWYG is integrated (for example, descriptions, comments section).

For more information on the mxGraph and graph editor, see mxGraph GitHub.

Diagrams Editor Overview

The Diagram Editor is accessible via the toolbar of the text editor by clicking on Advanced options ► Insert or Edit Diagram ► Insert of Edit Diagram

Functions of the Diagram Editor

Toolbar

The Toolbar is situated at the top of the overlay:

Shapes

Various sets of shapes are available on the left-hand side of the screen that can be used for the creation of diagrams.

Click on the name of the types to expand and select the appropriate shape to be used. The desired shape can be applied by

• drag and drop - the shapes can be positioned arbitrarily on the editing space.
• clicking on the shape - the shapes are automatically put to left side of the editing space, but can be repositioned by dragging and dropping.

A search bar also helps to find the desired shapes.

Editing Space

The ediis located in the middle section of the editor overlay:

The selected shapes, diagrams can be customized in the editing space and connections can be created between the objects. Text boxes can also be added by double clicking on an empty area of the editing space.

Diagram Options Panel

The Diagram panel is situated on the right side of the editor with check boxes related to further View, Options and Paper size settings available.

Once the diagram is created and customized, it can be finalized and displayed by clicking the [Save] button on the top left corner.

Inserting Diagrams

Besides the creation of new diagrams, codebeamer allows the insertion of diagrams created previously in Documents.

To open the Diagram Editor and create diagrams, click on the Documents tab ► New ► Diagram.

Diagrams created in Documents can be used by clicking on Advanced options ► Insert or Edit Diagram ►Insert from Documents

Inserting from History

Diagrams can be inserted from the diagram history:

1. Go to the History tab.
2. Select the diagram.
3. Click [Insert].

Inserting by Search

Diagrams can also be inserted by searching for the relevant one:

1. Click the Search tab.
2. Provide the necessary details.
3. Click [GO].
4. Further options are available to refine the search.
   
5. Once the desired diagram is found, click the [Insert] button.

The selected diagram is displayed in WYSIWYG editor. By double clicking on inserted diagrams, the editor overlay opens and further amendments can be performed.

Diagram Formats

Since codebeamer release 9.0.0, the diagrams are rendered as images in WYSIWYG editors, but are saved in SVG format after saving the work item, to be able to add clickable links or other rich contents to the diagrams.

For more information see the mxGraph website. A version newer than the one shipped with codebeamer might be available.