I'm looking for a tool that can help me ease the process of taking a line of text and generating a diagram that illustrates each individual part of the line of text and lets me make a comment about that part. I know for a fact that I've seen these types of illustrations in programming books and guides. Here's an example that I painstakingly made object-by-object in Word:
[![sample of code explanation diagram][1]][1]
Doing this manually is not only painstaking but is completely non-scalable - if I need to change the command or diagram, I have to do a lot of reworking to make everything work. It probably took me 10 minutes just to make this, and it's still not perfect (the line corners aren't exact and the lines don't perfectly touch the boxes, etc)
My ideal solution would be something scriptable, like mermaid.js or similar, where I could just define the parts of the code I want illustrated and it would just get rendered properly. Alternatively, something that is WYSIWYG but allows me to easily change the diagram without manually moving individual lines and squares around would be OK.
The exact visualization itself also isn't especially critical - this idea is good, but boxes around the text, colored text, etc. would be fine, as long as there's some way to point to which comment refers to which part of the text.
Multi-line sections would also be a nice plus (i.e. vertical bars instead of horizontal - "these two lines do this")
My use case is programming tutorials and documentation. I want to be able to show commands (like the example above) and provide a nice visual explanation of each component of the command. [1]: https://i.stack.imgur.com/DCj2r.png
