この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Introduction
There is multitude of diagram libraries for JavaScript, all of them allow creating multiple types of diagrams. To choose one a developer must consider following: feature, is it customizable, license, price, is documentation available, etc. One of those libraries caught my eye and here is why. The library is called AWS Labs Diagram Maker.
Basic Features
Diagram Maker provides following features:
- In-built Node dragging
- Drag to create edges
- Canvas panning & zooming
- Panel dragging
- Context menus
- Keyboard shortcuts for selecting all, deleting
- Modes (dragging mode, selection mode for multi select, read only mode for restricting edits)
Fully Customizable
The Diagram Maker is a library for creating diagrams with any framework like React, Angular or VueJs, or even vanilla JavaScript or Typescript. The library implements most important features like workspace, rendering nodes, drawing edges and so on. What make Diagram Maker interesting is that it is fully customizable. You can create your custom nodes, panels, modify their look but also you can interfere with the logic of creating edges and nodes, that means you can control for example how many edges a single node can have, either only one, multiple or no edges at all. This is the important factor when choosing a library, some of them don't allow it which limits developer and the project.
Documentation and examples
A library is as usable as its documentation is. Unfortunately for majority of diagram libraries, their documentation is either not existent or poorly written, missing a lot of features. In case of Diagram Maker, documentation exists though it describes the usage and architecture only on surface. It is missing description of basic features, how to initialize and modifies most important features of a diagram.
Luckily there is a github repository with examples that can be used as reference and make the development easier.
License
Diagram Maker is under Apache License 2.0 which allows for commercial use, modification, distribution patent and private use. Alternative libraries that allow for customization or provide liable features are under paid license, some of them costing even $7000. Diagram Maker under its license is free.
Example applications
Diagram Maker was used to create AWS IoT Events Console as well as AWS IoT Things Graph Console
Conclusion
To choose a diagram library a developer must consider factors like features, customizability, license, price, documentation. AWS Labs Diagram Maker is a library providing good features and customizability under free license, however with non-extensive documentation. It is sufficient for creating majority of diagram-related projects.