使用Canvas或SVG绘制JSON树

Question

我需要创建一个状态机解析器，我已经完成了它并使用给定的自动机验证了一个单词，它还生成了一个已经完成的分析树，毕竟我做的唯一事情就是计算数字它已达到的最终状态总数，如果它超过1则该单词有效，问题是现在我必须绘制所遵循的路径以进入每个最终状态。

Transition table

如果我验证单词“ab”，这将生成一个json对象：

{
 "a": {
      "0": {
           "b": [
                "0",
                "1",
                "2"
                ]
            },
      "3": {
           "b": false
            }
        }
 }

所以，真正的问题是如何从这个JSON传递

对此：

Example of the final draw

在这里你可以看到生成的所有路径是什么，我只计算最终状态的总数，并指出是否是一个有效的单词，所以必须绘制所有路径以及正确的路径（以最终状态）必须标记不同，以便很容易看到。

另外，如果你对json对象的结构有了更好的了解，它很容易绘制，那么我就没有问题修改函数来生成不同的结构。

我喜欢用Canvas或SVG这样做，但我不知道我该怎么做，这将是一个免费的工具，用于了解这种状态机是如何工作的。

感谢您的帮助！