Isometric Graph Drawing

Isometric drawing offers a unique 2D representation of 3D objects without perspective distortion, commonly used in engineering, illustration, video games design and architecture for its clarity in conveying dimensions.

Automation of isometric drawing is crucial, especially for complex diagrams. yFiles, a commercial software library, facilitates this task by providing predefined and customizable styles for graph elements, along with advanced layout algorithms for arranging them effectively.

The Isometric Drawing Sample Application, available for yFiles for HTML and yFiles for Java (Swing), showcases its capabilities, allowing users to create isometric diagrams with ease.

With its comprehensive features and easy customization, yFiles simplifies the implementation of isometric drawing in various applications.

Read on to find out how to implement and explore this source code to create high quality isometric drawings easily and automatically!

An Isometric Drawing is a special 2-dimensional representation of a 3-dimensional object without perspective shortening.

In an isometric drawing, each pair of coordinate axes forms a 120 degree angle. So vertical lines are always vertical, while an axis-aligned horizontal line forms 30 degree angles with the horizontal plane. The most important criterion is that all parallel lines of the object remain parallel in the final drawing.

Isometric drawings are considered to be pictorial images, and they have many advantages in comparison to the typical 2-dimensional drawings since they reveal clearly and unambiguously the dimensions of the represented shapes. They are commonly used by engineers, illustrators, or architects to communicate their designs in such a way that their dimensions are comprehensive even to people that have no technical knowledge or experience.

There exist several tools that can automate the process of creating isometric drawings. Most of them are designer tools like Inkscape, AutoCAD, Adobe Illustrator CC, QCAD, or DraftSight used for manually creating 2D- or 3D-drawings.

However, sometimes users already have diagrams that are difficult to create manually, and they would like to transform them into isometric drawings. In such cases, being able to automate the creation of isometric drawings is crucial. eXX hard to be manually created, and they would also like to display them as isometric drawings. In such cases, being able to automate the creation of isometric drawings is crucial.

yFiles is a commercial software library that supports creating, visualizing, editing, and analyzing graphs. It provides an extensive set of predefined styles for visualizing graph elements, i.e., nodes (vertices), edges (links), or labels of a graph drawing.

In addition, yFiles also supports the creation of user-defined custom styles. yFiles embodies a complete set of advanced layout algorithms for arranging graph elements based on the user’s needs.

For isometric drawings, you choose your desired isometric style to organize the graph elements. Then you can easily arrange them on the screen by accurately translating and projecting the results of your chosen layout algorithm on the plane.

yFiles for HTML and yFiles for Java (Swing) come with an Isometric Drawing Sample Application. This demo shows a computer network diagram in isometric fashion. It consists of computer and network devices, and group nodes (departments) that can be expanded and collapsed. Furthermore, the user can load graph files that make use of the yFiles for HTML’s predefined styles.

The source code of the Isometric Drawing Sample Application is part of several yFiles packages and available on the yWorks GitHub repository:

Test yFiles’ isometric drawing with a fully functional trial package of yFiles for HTML or yFiles for Java (Swing).

To implement isometric drawing in your own applications, start with the Isometric Drawing Sample Application that is part of the yFiles package.

This demo also contains best-practices source code that you can re-use in your own projects.This demo is super easy to customize, for example you can include your own visualizations or import data from your own data sources.