CodeYourFuture
Feature: Create a runtime diagram from a code snapshot
A super useful thing to have would be a means of generating a runtime diagram from a snippet of code. For example, given a code block like this:
function sum(a,b) {
return a + b;
}
const result = sum(a,b);
I want to indicate a specific line in this piece of code and from there take a snapshot of the following things: Call stack, memory, thread This would almost be like taking a snapshot of the debugger output - but formatted in a nice diagram. Here's some inspiration as to what that diagram could look like:
@gregdyke I think what you're working on at the moment would help with this issue
yep. We should call and see exactly what you'd like to see (as technically I can do it, just want the detail)
It feels like if your thing is using Acorn and we can get an AST from that, we could translate that into Mermaid, as we're already using Mermaid?
Mermaid generates SVGs from markup using D3, basically, so although ideally we'd use a prebuilt Mermaid diagram, it doesn't seem insane to build our own if we find we need to, just painstaking. (It will be laborious)
Do take a proper look through and try with the existing stuff (maybe state or C4) before we go rogue... 🙏 😉
Yeah, that part is "easy" (though suggestions of existing implementations to re-use/adapt are welcome). But in @Dedekind561 example, I don't actually see a "diagram" (or at least not the kind I would have in mind from the title)
Yeah that example was very poor 😂 Here is a better one:
Procedures -> Call stack
Output -> console
etc.
Yeah, that part is "easy" (though suggestions of existing implementations to re-use/adapt are welcome). But in @Dedekind561 example, I don't actually see a "diagram" (or at least not the kind I would have in mind from the title)
I very carefully did not say easy 😛
@gregdyke could you also build this too please: https://py.mit.edu/spring23/practice/diagram1 😂
This is also similar to what you're building: https://pythontutor.com/visualize.html#mode=display