A Custom Network Editor

While a general-purpose graph editor is sufficient to create diagrams, the user might have specific requirements that general-purpose editors do not meet. Maybe only specific graph element types may be connected. Or there exists data closely linked to the edited diagram, that needs a certain visualization. In such cases, one can create a custom graph editor tailored to any domain or data specific requirements.

Building a graph editor from scratch can be a challenging task. However, developers can save a lot of money, time, and workforce by using a software library that provides ready-to-use components for this task. yFiles is a commercial programming library that facilitates the creation of custom graph editors. yFiles is available for many different platforms.

yFiles provides all functionality that is necessary to build a sophisticated graph editor. Creating a graph editor similar to the one described in the following is possible with only a few lines of code. At the same time, yFiles' rich and powerful APIs allow for extensive customization to fit any special requirements.

The most basic graph editor features are, of course, the creation and deletion of elements (also known as vertices or nodes) and connections (or links or edges) between them.

Often, users need to change the initial placement of an element. Therefore, a graph editor should also support moving elements. Depending on the use case, one should also be able to re-size the elements. Adding labels that provide a short textual description for elements and relations brings clarity to the drawing.

Zooming in and out can facilitate diagram creation by switching between a detailed view that is editable and a more general overview. This way, the user can both see the overall diagram structure as well as element details. Also, if the visible area doesn’t show the entire diagram, the user has to be able to move the visible area (often referred to as panning).

Sophisticated editors (not only graph editors) should provide a clipboard (copy-paste functionality) to support duplicating entire parts of the diagram. Another essential feature is the ability to undo the last step — or to restore them after an undo. yFiles supports undoing an arbitrary number of editing steps by default.

Grouping elements can help to structure data further — especially when it is possible to interactively hide the group’s contents and therefore be able to reduce the overall complexity of the diagram.

Aligning elements while moving them may be cumbersome. To create beautiful diagrams, however, it is necessary to align elements, either with precise coordinates (a grid, for example) or with positions relative to other elements. A good editor facilitates this by letting elements "snap" to such locations. yFiles supports both snapping to a grid and snapping to positions relative to other elements.

Some diagram types only allow orthogonal relations, which means that their paths only contain horizontal and vertical segments. yFiles supports orthogonal relations out-of-the-box: When creating new relations, they have only orthogonal segments from the start. When moving elements, its adjacent relations also change in a way that keeps their segments orthogonal.

yFiles comes with a Graph Editor Sample Application. This example demonstrates the graph editing capabilities of yFiles. Note that the source code for this fully capable graph editor has only about 400 lines, and almost one half of them are comments.

The source code of the Graph Editor Sample Application is part of all yFiles packages and available on the yWorks GitHub repository:

Test the yFiles diagramming library with a fully-functional trial package. To build your own graph editor, start with the Graph Editor Sample Application that is part of the yFiles package. It’s not only a showcase application but also provides best-practice source code that you can re-use in your own project.

yFiles makes it easy to customize all aspects of this application, for example, include your own styling, change the user interaction, or load the data from your data source. Features like the node visualizations and the specialized automatic layout are separate components that work in any yFiles-based project.