Document code with pictures directly within the editor



I usually code algorithms and scientific calculations. I use diagrams to visualise how variables interact with each other and how loops are intended to run.

I used to post this diagrams to imgur and then post the link to the picture as a post comment, but I was wondering if it wouldn’t be awesome to “see” the picture in the code directly?

I can imagine being able

  • to collapse or open the picture, like functions direct in the code
  • being able to add pictures directly from the code editor
  • change or delete a picture

I haven’t seen such feature in any editor yet, what do you think?


Not sure of the side effects of inserting images in the code directly (the layout assume that all rows have the same height), but I think the regex-railroad-diagram could be a good starting point for this kind of feature.


Yes, it could have side effects… but I think the benefits are worth discussing it.

The image could be inserted as a link escaped in a comment, for example for js: /img img/


Not so shameful plug: It should also have the hosting feature from auto-host-markdown-image. You just drag the image from the desktop and everything else is automatic. Check it out.

Also, I personally believe the image should appear in a pop-up. Check out git-diff-popup.


Yea! this is really cool! I feel like it’s almost there :smile:

I like the idea of having the image in a pop up. and the logic of auto-host-markdown-image is surely a step closer to what we want here.