> For the complete documentation index, see [llms.txt](https://energytransition.gitbook.io/esdl/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://energytransition.gitbook.io/esdl/how-to-use-esdl/using-esdl-to-model-an-energy-system/esdl-graphical-editor.md).

# 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.

![](/files/-LeuPoGhQWLOeBbuPl5d)

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.

![](/files/-LIH21JNLXfYAF14ol9I)

## Step 2. Create a new ESDL model

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

![](/files/-LIH21JPMPFu248Ljj8J)

## Step 3. Select 'Energy System'

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

![](/files/-LIH21JRfokywHeBL-Fv)

## Step 4. Create a new model representation

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

![](/files/-LIH21JTX_SAk1wsFdKx)

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

![](/files/-LIH21JVjcvStAkzqUAw)

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

![](/files/-LIH21JXfMrhMIiHAR6x)

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

![](/files/-LIH21JZpnJvqM3guEUS)

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

![](/files/-LIH21Ja5LoprJ2A4GiU)