# ESDL Graphical editor / ESDL Designer

The ESDL Designer is an Eclipse based editor for ESDL files. It allows you to drag and drop ESDL components onto a canvas, connect them and change all properties.

![](https://2468807995-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEUR-fboF2eOWi4I9zf%2F-LeuPao-c9KAvjBp9VFO%2F-LeuPoGhQWLOeBbuPl5d%2FGraphicalDesigner.png?generation=1557905758847795\&alt=media)

After installing the ESDL Eclipse plugins using the Eclipse update-site, you can start designing a new Energy System using this tutorial.

## Step 1. Create a new Modeling Project

Select File --> New --> Modeling Project

Make sure you select a 'Modeling Project' since that will automatically create the required `representations.aird` file that records the layout of your diagram.

![](https://2468807995-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEUR-fboF2eOWi4I9zf%2F-LIH20T9fPZ18uQA2uae%2F-LIH21JNLXfYAF14ol9I%2FNewModelingProject.png?generation=1532532372135983\&alt=media)

## Step 2. Create a new ESDL model

Select File --> New --> Other and select 'ESDL model' in the dialog box that appears. Presse 'Next'

![](https://2468807995-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEUR-fboF2eOWi4I9zf%2F-LIH20T9fPZ18uQA2uae%2F-LIH21JPMPFu248Ljj8J%2FNewModel.png?generation=1532532369623368\&alt=media)

## Step 3. Select 'Energy System'

Select 'Energy System' from the drop-down list under 'Model Object' and click 'Finish'

![](https://2468807995-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEUR-fboF2eOWi4I9zf%2F-LIH20T9fPZ18uQA2uae%2F-LIH21JRfokywHeBL-Fv%2FSelectObject.png?generation=1532532370728952\&alt=media)

## Step 4. Create a new model representation

Double click the `representations.aird` file in the project, and click 'New\...' under the 'Representations' section.

![](https://2468807995-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEUR-fboF2eOWi4I9zf%2F-LIH20T9fPZ18uQA2uae%2F-LIH21JTX_SAk1wsFdKx%2FDoubleClickRepresentationsAird.png?generation=1532532371632358\&alt=media)

## Step 5. Select 'ESDL Diagram' and click 'Next'

![](https://2468807995-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEUR-fboF2eOWi4I9zf%2F-LIH20T9fPZ18uQA2uae%2F-LIH21JVjcvStAkzqUAw%2FNewRepresentation.png?generation=1532532369555110\&alt=media)

## Step 6. Select the 'Energy System' from your ESDL model and click 'Finish'

![](https://2468807995-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEUR-fboF2eOWi4I9zf%2F-LIH20T9fPZ18uQA2uae%2F-LIH21JXfMrhMIiHAR6x%2FNewESDLDiagram.png?generation=1532532369483743\&alt=media)

## Step 7. You now see the canvas in front of you

![](https://2468807995-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEUR-fboF2eOWi4I9zf%2F-LIH20T9fPZ18uQA2uae%2F-LIH21JZpnJvqM3guEUS%2FESDLDiagramCanvas.png?generation=1532532370718598\&alt=media)

## Step 8. Add an Instance, an Area, some Assets and connect them

![](https://2468807995-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEUR-fboF2eOWi4I9zf%2F-LIH20T9fPZ18uQA2uae%2F-LIH21Ja5LoprJ2A4GiU%2FFirstESDLDiagram.png?generation=1532532370695842\&alt=media)