好奇心
两件事把我带到这里。
第一件是技术栈的问题。在网页上，把一个节点拖到画布上、从它拉一根连线接到另一个节点，并且让这根连线真的有意义，究竟需要什么？答案是 React Flow。学会它打开的门比一个项目宽得多：思维导图、流程图、信号链，任何画面背后其实都是一张由节点和连线构成的图。
第二件来自本职工作。我做数据中心设计，那里的单线图大多还是用 CAD 画、靠人工核对。图纸对它所描绘的东西一无所知。可设备之间的连接从来不是装饰：逻辑就长在连线上，计算也挂在上面。我想画出一个系统，然后向它提问。这台 UPS 故障时，哪些地方会断电？下午三点这条支路带多少负载？
动手做
eFlow 是一块基于 React Flow 的拖放画布，带十一种设备——市电进线、发电机、变压器、UPS、自动与手动转换开关、开关柜、断路器、PDU、电能表、服务器——外加一个负载曲线节点。
每次改动都会从电源侧做一次广度优先传播，重算整张图的潮流。负载沿着树向上汇总，转换开关自己挑带电的那一路，出故障的设备会让依赖它的一切失电。
负载曲线是 24 小时的曲线，分 IT、制冷、照明和自定义几类。把一条曲线挂到某台设备上，模拟就跟着它走完一整天。
- 画布
- React Flow，自定义节点与连线
- 模拟
- 广度优先潮流传播、负载汇总、转换开关逻辑
- 存储
- 浏览器本地存储。每 30 秒自动保存，支持 JSON 导入导出
- 运行环境
- 桌面浏览器。故意不做手机
一切都留在你自己的机器上，什么都不会上传。撤销、重做、复制、粘贴和一整套快捷键都在，因为少了这些，图编辑器就只是个玩具。
结果
一个能用的编辑器兼模拟器。免费，不用注册，不用安装。它是这间工作室里最像工程的东西。
它也是我能公开的、最接近本职工作的东西。设备都是通用型号，里面每一个负载都是编出来的，所以没有客户图纸、没有保密协议、没有任何内部资料靠近过它——而这个工具做的，仍然是本职工作要求的那类思考。
我学到了什么
实时模拟会让图纸变诚实。潮流一旦持续在算，那些静态图能藏住的拓扑错误立刻就露了出来。
它也印证了一条我反复重学的小规矩：有些工具就该拒绝在手机上运行。老老实实写一句“仅限桌面”，比给一个挤成一团的界面更厚道。