如何解决Mermaid.js绘制SICP环境图的问题？或求替代工具推荐

title: Environment Diagram #

%%{ init : { "theme" : "default", "flowchart" : { "curve" : "stepAfter", "nodeSpacing": 5, "rankSpacing": 10 }}}%%

flowchart BT
classDef varInFrameClass fill:transparent, stroke-width:0px, padding:0px
classDef frameClass fill:transparent, stroke:#000, padding:10px
classDef closureCircleClass fill:transparent, stroke-width:1px, padding:0px
classDef closureBodyClass fill:transparent, stroke-width:0px, padding:0px, font-size:12px

%% 全局环境帧
subgraph frame1 [GE]:::frameClass
    direction TB
    varX["x:"]:::varInFrameClass
    varY["y:"]:::varInFrameClass
    my-pair["my-pair:"]:::varInFrameClass
end

%% 值节点
valX["'a"]
valY["5"]

%% 闭包节点（横向紧凑排列）
circle1(( )):::closureCircleClass
p1["params: a,b"]:::closureBodyClass
b1["body:
(λ(sel)
(sel a b))"]:::closureBodyClass

%% 连接关系
varX --> valX
varY --> valY
my-pair --> circle1
circle1 --> frame1

%% 闭包元素紧凑连接（无样式连线）
circle1 --- p1 --- b1
linkStyle 3,4 stroke:none, fill:none

## 替代工具推荐
### D2
语法风格接近Mermaid，但布局引擎更智能，对嵌套结构和箭头的处理更灵活。无需大量手动样式调整，就能自动优化闭包、帧的间距和排列，适合快速绘制SICP环境图。

### PlantUML
支持丰富的自定义配置，通过`skinparam`可精细控制节点样式、间距。对于闭包结构，可使用横向布局指令直接排列圆圈、参数、代码体，配合`hide empty description`等指令简化冗余元素。

### TikZ（LaTeX）
完全可控的高精度绘图工具，能精准绘制闭包圆圈、帧边框，调整每个元素的位置和箭头样式。适合需要出版级排版效果的场景，但需要掌握LaTeX和TikZ的基础语法。

内容的提问来源于stack exchange，提问作者Gino