AWS Labs just rolled out Diagram Maker, an open-source graphical user interface (GUI) library designed specifically for IoT application developers. The tool can help IoT app developers to define their own user interface and user experience, or build their own custom behaviour utilising Diagram Maker APIs. AWS intends that the tool will support IoT application developers get started and add to the open-source project for Diagram Maker by using the Diagram Maker’s plugin interface to write reusable plugins.

Diagram Maker facilitates IoT application developers to create a visual editor for IoT end clients. With the help of this visual editor, IoT customers can design and modify any graph-like data, including state machines or workflow definitions, in a visual manner by applying graphical UI.

The concept of an open-source UI library for developing IoT applications isn’t completely unique. There are libraries already available in the open-source space for non-IoT use cases, implementing low-level abstractions of drawing lines and shapes without built-in synergies. There are also libraries that present high-level abstractions, like nodes and edges. According to AWS Labs, those libraries cannot readily be integrated into various IoT based software and applications. 

In addition to Diagram Maker, AWS also open-sourced the minimap plugin, the very first plugin built on the Diagram Maker plugin interface and allows users to execute a small minimap inside a panel they may choose. This is effective when IoT customers are working on a big graph with hundreds of nodes and where navigating this graph grows complicated. The minimap, therefore, improves the user experience by presenting an overview of the whole graph and allows them to drag and click on various parts to directly jump to those parts of the canvas.

What’s In It For Developers?

Diagram Maker is released with an Apache 2.0 license, and gives high-level abstractions, likes nodes and edges, and still maintains a high level of customisation, both in look and feel and in terms of user experience. IoT application developers can produce, move, or delete nodes and the edges with the tool. These could represent various entities based on the AWS IoT service.  

“Developers can model the location and sizes of nodes, edges, and panels, and Diagram Maker renders these as elements on the Diagram Maker canvas. The rendered UI is fully interactive and lets users move nodes around, create new edges, or delete nodes or edges,” says the AWS team.

Diagram Maker also gives developers the ability to layout a given graph via an API interface automatically. With this feature, application developers can visualise the relationships by having the layout-related information connected to the resources, even if they are built outside the editor.

In addition, application developers can use Diagram Maker’s capabilities for use cases that are outside of IoT. For example, with Diagram Maker, application developers can improve the experience for end customers by letting them to intuitively and visually design cloud resources needed by cloud services like Infrastructure as Code (AWS CloudFormation) or Workflow Engines (AWS Step Functions) so as to figure out the various relationships and hierarchies, according to AWS.

Alternatively, IoT application developers can utilise the Diagram Maker’s plugin interface to author reusable plugins which can extend the Diagram Maker’s core features. This way end customers can use plugins without wanting to develop those functionalities on their own.

According to the AWS team, making Diagram Maker, an open-source project encourages innovation and provides a greater value for its customers because developers have complete control over defining the interface and user experience.

“We envision this initiative to grow to a vibrant community of plugin authors who would extend Diagram Maker’s core functionality in innovative ways. These will, in turn, benefit all consumers of this library both within AWS IoT and other products, and will help our IoT customers make sense out of their IoT data quicker and easier,” according to the AWS team.

Use Case

The target users of this tool consist of application developers who desire to create new applications that need their end-users to author graph-like structures. They can utilise this tool and bypass re-implementing basic interactive features such as drag and drop, zooming, panel management, undo/redo, etc. Instances of such apps within the AWS ecosystem are AWS IoT events, AWS Step functions, Cloudformation etc.

Tools like this can be very helpful in establishing operational use cases in addition to documentation. The difficult part with the cloud is how to efficiently visualise infrastructure, which is made of a variety of services and attributes and show relationships between the specific components. This tool is not restricted to just AWS IoT products, and clients can use this tool for rendering any graph-like structure, including diagrams, flowcharts, etc. 

It is difficult to show all of the relevant information about a particular architecture in a single view, which is why a diagramming tool that natively supports various views/perspectives is needed. With Diagram Maker, the operational view of the architecture can be visualised cleanly, particularly when data about every component can be visualised in real-time. With the diagramming platforms, AWS seems to be building an entire community around it, which creates plugins and extensions for various IoT business use-cases, and allows drag and drop programming by connecting services. 

You can find Diagram Maker on GitHub here.