Javascript 异步流程图。如何直观地表示异步逻辑

是的，这有点矛盾

是否有表示异步逻辑的可视化语言？像流程图这样简单的东西

我想对UI“屏幕”及其背后的逻辑进行建模

谢谢

如果您希望“为（异步）逻辑建模”，以便从中得出语义上合理的结论，那么您需要。来自维基百科：

Petri网是一种描述分布式系统的建模语言 系统，带有过渡和位置图。
与UML活动图、BPMN和EPCs等行业标准一样， Petri网为逐步过程提供了一种图形表示法 包括选择、迭代和并发执行。不像这些 根据标准，Petri网对其定义有精确的数学定义 执行语义学，具有完善的数学理论 过程分析

承诺在petri网中应易于表示为3个位置，每个位置表示一个承诺

如果您只是在寻找系统的一个简单的视觉表示，那么您可能正在寻找一个。或者您只需使用并发原语（如“生成异步进程”和“等待结果”）扩展流程图。如果您正在寻找一种适当指定的“可视化语言”，请查看OMG的工具，例如。

有一种表示异步逻辑的“可视化语言”：Petri网

[Petri]网理论 Petri网是用网络元素来描述一个系统。网络元素有四种类型：位置、转换、输入和输出。输入将一个位置连接到过渡。输出将过渡连接到某个位置。每个网络元素可以有零个或多个注释。每个注释也可能有零个或多个注释

类型注释 网络元素有一种类型：p（位置）、T（转换）、I（输入）、O（输出）

图标注释 位置元素可以用圆形直观地表示。过渡元素可以用正方形表示。输入元素可以用从圆到正方形的箭头表示。输出元素可以用从正方形到圆形的箭头表示

标签注释 每个圆或正方形都可能带有标签标识符，即用于唯一标识形状的文本。正方形的标签以正方形为中心。圆的标签位于圆的外部

模式和类别 可以方便地从现有的一组注释模式开始，例如用于位置/转换网（一类Petri网）的注释类型

每个地方都有一个标记——从0开始的数量或数字

每个转换都有一个状态——true或false

每个输入都有一个状态——true或false

每个输入都有一个权重——1中的数量或数字

每个输入都有一个状态更新规则/逻辑——如果输入位置的标记大于或等于输入的权重，则状态为true；否则，状态为false

每个输入都有一个权重更新规则/逻辑——从输入位置的标记中减去输入权重

每个输出都有一个权重——从1开始的数量或数字

每个输出都有一个权重更新规则/逻辑——将输出权重添加到输出位置的标记上

每个转换都有一个状态更新规则/逻辑——如果每个输入的状态为true，则转换的状态为true；否则，状态为false

每个转换都有一个标记更新规则/逻辑——调用每个输入和每个输出的标记更新规则

“扩展” 如果上述注释类型不符合应用要求，则可以添加或更改注释。比如说,

更改表示网络元素的形状

修改更新规则/逻辑

更改输入权重的范围并更改输入的状态更新规则–对于另一类Petri网，抑制器网，输入权重可能是0中的一个数字；状态更新规则还有一个附加组件，如果输入权重为零，则如果输入位置的标记为零，则状态为真，否则状态为假

为每个值大于1或值为0的输入权重添加标签注释

等等

---

我将此库用于一个项目，以可视化数据库对象的状态：

---

虽然它并没有真正涵盖异步内容，但它确实有助于非技术人员对applicationlogic进行推理。

它只是一个具有并发性的流程图，即多个活动流-比较NFA和DFA。还要看一看petri网，它被显式地用于建模并发逻辑，但它们可能有点过于复杂（取决于您的用例）。我不知道这一点，但

ajax

回调（或

setTimeout

，或任何其他“异步逻辑”）的实际情况是，当它触发时，它被添加到事件队列中，然后在事件循环到达该点时执行。因此，与其通过控制流直观地表示它，不如画一个事件队列的表示，并让事物为其提供信息。请注意，这与并发略有不同，与并行线程也有很大不同。使用图表技术时，您面临的最大决策是如何使用它们。有两个基本的思想流派—（1）让您开始，一旦初始代码被剪切，就忘记它们，或者（2）在软件的生命周期中，将图表作为配置控制项进行维护（例如，作为一套设计文档的一部分），并且仅根据图表中的更改对代码进行更改（等等）。对于没有为大型公共/企业客户（特别是军队客户）工作过的人来说，第二种机制可能并不熟悉。@Roamer-1888:还有第三种机制：从图表中自动生成代码。我