# Graphical Editor

When a DES is created or opened in the Graphical Editor, the following window is displayed.

The DES Graphical Editor is very similar to the Tabular Editor in that it allows you to create and edit DES as well as save them into DES files (*.des). The main difference is that in the graphical version, you design the DES' layout graphically as well. An optional Grid is provided to help align various DES components. Through the Graphical Editor, you can validate a DES and verify its properties.

If a DES is opened that has no graphical display information, the editor will display the DES in a default fashion. The user can then reposition the DES' components as desired and save the results.

The Graphical Editor window has 4 main parts:

- The right hand side contains the States, Events, Transitions, Global Self-Loops and State Quick Look panes that are found in the Tabular Editor. One difference is that you can't double-click on an element to edit them in the Graphical Editor.
- The Output panel is located at the bottom of the window which displays feedback from the various algorithms and checks.
- The left side contains tool buttons used to Add DES Components like states and transitions. When you are finished adding a DES component, either click on the next component type button, or click on the currently selected type again to disable it. The Text button allows you to add a text field to the window for documentation purposes. Simply click on the Text button and then click on the place in the editor window where you want the text to appear. To start entering text, double-click on the selection.
  Note: The Text button is currently broken. You can create a text item, but it is not currently being saved with the DES.
- The main area is where the DES is displayed graphically and where you can interact with the DES.

Another added feature of the Graphical Editor is that you can save an Image of your DES to disk.

It is possible to move the entire DES at once by clicking outside the DES and dragging the rubber band image around the entire DES. Next, click on a state and drag the DES to the desired new position. Then, click outside of the DES to deselect.

« Delete Global Self-Loop | Editing Modes »