来自：开源最前线（ID：OpenSourceTop）
链接：https://github.com/awslabs/diagram-maker
前不久，AWS 推出了Diagram Maker，这是一个面向IoT 应用程序开发人员的开源图形用户界面库。借助该库，应用程序开发人员可以定义自己的用户界面和用户体验，例如状态机或工作流定义。下图是该库的使用Demo，其中运行了Diagram Maker的AWS IoT事件控制台：
下面这张图也是一个Demo示例，即运行Diagram Maker的AWS IoT Things Graph Console
用于构建物联网应用程序的开源UI库在开源社区中已经有很多了，这些库无须内部交互就可以绘制图线和形状，也有提供高级抽象的库，例如节点和边。但是，这些库无法轻松集成到不同的IoT应用程序中。Diagram Maker提供的视觉体验不仅和主应用程序一致，最关键的是Diagram Maker提供了高级抽象（例如节点和边缘），并且在外观和用户体验方面仍然保留了高级定制。简而言之，Diagram Maker的核心功能特性如下：支持任意前端框架无缝集成
支持任意数据格式
支持任意数据格式
声明式接口
类型绑定
交互式功能
可扩展性
除此之外，和Diagram Maker一起开源的还有一个minimap插件，minimap插件允许用户在自己选择的面板中渲染一个小型minimap。当IoT客户正在处理具有数百个节点的大型图时，该图的导航变得非常复杂，有了这个插件会很有帮助。
npm install diagram-maker
Diagram Maker捆绑了所有必需的依赖项。作为依赖项之一的dagre并没有捆绑在内，因为只有在使用Diagram Maker的工作流自动布局功能时才需要dagre库。如果你需要用到，在单独安装就可以了，安装方式如下：
npm install dagre
这是JSON的示例，描述了内置在IoT Events中的状态机：
{
"detectorModelDefinition": {
"states": [
{
"stateName": "Charging",
"onInput": {
"events": [],
"transitionEvents": [
{
"eventName": "Full_charge",
"condition": "$input.AWS_IoTEvents_HelloWorld_VoltageInput.voltage > 29",
"actions": [],
"nextState": "Charged"
}
]
},
"onEnter": {
"events": []
},
"onExit": {
"events": []
}
},
{
"stateName": "Charged",
"onInput": {
"events": [],
"transitionEvents": [
{
"eventName": "In_use",
"condition": "$input.AWS_IoTEvents_HelloWorld_VoltageInput.voltage 20",
"actions": [],
"nextState": "Discharging"
}
]
},
"onEnter": {
"events": []
},
"onExit": {
"events": []
}
},
{
"stateName": "Discharging",
"onInput": {
"events": [],
"transitionEvents": [
{
"eventName": "Charge_on",
"condition": "$input.AWS_IoTEvents_HelloWorld_VoltageInput.voltage ,
"actions": [],
"nextState": "Charging"
}
]
},
"onEnter"
