CODEWITHSUNDEEP
programming-languagesevaluationsicpmermaid
Gino
Gino

Reputation: 779

SICP Environment Diagram with Mermaid.JS

I'm trying to draw an environment diagram, as defined in SICP (see here), programmatically, such that a diagram will be associated with an evaluation of an expression. I'm testing Mermaid.js for that purpose and it does a poor job:

Here's an example:

---
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

Any idea how to solve these problems? or, on the other hand, know a better tool for that? GraphViz suffers the same shortcomings.

Upvotes: 0

Views: 108

Answers (1)

eskwayrd
eskwayrd

Reputation: 4521

Mermaid will not work in this case because the diagrams in the SICP book are more complex than Mermaid can process.

You can find the source of the SICP book here: https://github.com/source-academy/sicp. Unfortunately, the source for the illustrations is not included, and I haven't found any hints about the tools used. The illustrations might have been hand-drawn in Inkscape, for all I know.

There are a variety of text-based illustration markup formats, some with pretty advanced capabilities. The best experimentation site is https://kroki.io/, which provides an image generation service and a server you can run locally.

Without attempting to recreate the illustrations from the book, I'd suggest investigating Ditaa, Excalidraw, or SVGBob as possible formats to use.

Since you intend to produce illustrations programmatically, it might be worth investigating an SVG library like svg.js or snap.svg, giving you complete control over an illustration's content and layout.

Upvotes: 1

Related Questions