Graphical tooling based on Eclipse Sirius for the Dart programming language.

Dedicated To Dart

The Dart Designer comes as a single application dedicated for Dart developers with custom menus, toolbars, help and tutorials.

Integrating the Dart Editor

The Dart Editor is directly embedded within the Dart Designer to create a kickass development environment for Dart.

Eclipse RCP

The Dart Designer is built on top of the Eclipse platform like the official Dart Editor.

Eclipse Sirius

Using years of experience in critical software engineering injected into the Sirius project.

Package Diagram

The Package diagram of the Dart Designer will let you have a bird eye view of your project by having a look at the various Dart packages used and their dependencies. From this main viewpoint, you can navigate to other representations of your Dart resources by jumping on very quickly to a Class diagram representation of your Dart package.

Class Diagram

The Class diagram is the main representation of the entities of your Dart application. Tailored to the need of Dart developers, this Class diagram representation let you manipulate native concepts of the Dart language like metadata, applications or even libraries. From this representation, you can easily see the various relations between your entities (mixins, implements or extends).

Explorer Diagram

The Explorer diagram let you navigate in your Dart project as if it was on your file system. You can see your resources and navigate in the folders of your project easily. You will also be able to see the relationships between your resources.

Library Diagram

The Library diagram will show the dependencies between the various libraries of your application. You will be able to see your libraries and their contents easily. This representation will show what is imported and exported.

Module Diagram

The Module diagram displays your AngularDart modules and their related elements. With this representation, you can see how your components, controllers, decorators and formatters are organized.

Route Diagram

The Route diagram contains the various routes that have been declared in your AngularDart application. This diagram will let you see quickly how your components are linked to your routes in your application.

Navigation Support

In order to ease the manipulation of all the representations in your Dart Designer project, you have the ability to quickly create new representations and navigate to existing ones without leaving your diagrams. Just select an element and right click on it to easily move to another representation if possible.

Filter Support

In the Class diagram, you can easily filter the information that you do not want to see. You can filter fields, operations, references or the whole class content. You can combine multiple filters in order to have the diagrams that you want for your documentation.

Unsynchronized Representations

Most of the representation are not fully synchronized with your data, as a result if you want to create a Class diagram, it does not have to display all the classes available in your Dart package. You can easily create multiple diagrams on various subsets of your entities.. If you have two sets of classes in a given folder, used for separate concerns in your application, you can create a Class diagram for each set of classes in the folder.

Synchronized Data

Contrary to the representations, the data of your Dart Designer projects are fully synchronized. Make a change on an entity in one representation (like a Class diagram) and you can see the impact in real time on all the other representations using this entity (like another Class or Package diagram). As a result, the state of your data in shared between all the representations, save in one editor and all the others will be saved.


This first release will contain the first basic version of a couple of designers for Dart including the Package diagram, the Explorer diagram and the Class diagram. It will also be used to iron out some of the details of the branding and the release engineering process.
The main focus of this release will be the improvement of the Class and Explorer diagrams. New elements and relationships will be visible in the Class diagram like fields and methods. The direct edit will also be improved. The design of the Explorer diagram will be greatly improved and new elements will be visible.
The main focus of this release will be the integration of the Dart Editor in Dart Designer. A new kind of representation will also be introduced, in a basic version, in order to have a bird eye view of the libraries. Starting with this release, the Dart Editor will now be embedded directly in Dart Designer. The other representations (Class, Explorer, Package) will also be improved.
Shielded Arrow now introduces the support for AngularDart. Two new representations, Module diagram and Route diagram will now let you define the AngularDart-specific parts of your applications. Tons of new concepts have been added to represents AngularDart application and a new design for all the representations (Class, Explorer, Package, Library, etc) has also been introduced.


The Dart Designer is available under the Eclipse Public License v1.0. It includes components from the Eclipse Foundation, the Apache Foundation and the Dart project.