SICP环境图与Mermaid.JS

Question

我正在尝试以编程方式绘制 SICP 中定义的环境图（请参阅此处），以便将图与表达式的求值相关联。我正在为此目的测试 Mermaid.js，但效果很差：

• 绘制闭合：两个相邻的圆根本无法绘制。此外，闭包与其参数和主体相关联，并且应放置在靠近圆圈的位置。我无法控制它的接近。
• 绘制框架时，框架中的每个变量都应该有一个指向其值的箭头。我尝试使用子图来解决它，但它不起作用。

这是一个例子：

---
title: Environment Diagram
---
%%{ init : { "theme" : "default", "flowchart" : { "curve" : "stepAfter" }}}%%

flowchart BT
    classDef varInFrameClass fill:transparent, stroke-width:0px
    classDef returnFrameClass stroke-width:0px, fill:transparent
    classDef closureCircleClass fill:transparent, stroke-width:1px
    classDef closureBodyClass fill:transparent, stroke-width:0px

    subgraph frame1 [GE]
    direction TB
    varX["x: 'a"]:::varInFrameClass
    varY["y: 5"]:::varInFrameClass
    my-pair["my-pair:"]:::varInFrameClass

    varX ~~~ varY ~~~ my-pair
    end
    style frame1 fill:transparent, stroke:#000

    subgraph closure1 [ ]
    direction BT
    circle1(( )):::closureCircleClass
    p1["p1: a,b"]:::closureBodyClass
    b1["`b1:
    (λ(sel)
    (sel a b))
    `"]:::closureBodyClass
    b1 ~~~ p1 ~~~ circle1
    end
    style closure1 fill:transparent, stroke-width:0

    my-pair --> circle1
    circle1 --> frame1

知道如何解决这些问题吗？或者，另一方面，知道更好的工具吗？ GraphViz 也有同样的缺点。

Answer 1

Mermaid 在这种情况下将不起作用，因为 SICP 书中的图表比 Mermaid 可以处理的更复杂。

您可以在这里找到 SICP 书籍的来源：https://github.com/source-academy/sicp。 不幸的是，没有包含插图的来源，并且我没有找到有关所使用工具的任何提示。据我所知，这些插图可能是在 Inkscape 中手绘的。

有多种基于文本的插图标记格式，其中一些具有相当高级的功能。最好的实验站点是https://kroki.io/，它提供了图像生成服务和可以在本地运行的服务器。

在不尝试重新创建书中插图的情况下，我建议研究 Ditaa、Excalidraw 或 SVGBob 作为可能使用的格式。

由于您打算以编程方式生成插图，因此可能值得研究一下像

svg.js

或

snap.svg

这样的 SVG 库，它可以让您完全控制插图的内容和布局。