To generate the image use
$ pygmentize -f svg -O style=colorful -l python -o test.svg code.py
to generate colorized code and then use draw.io to annotate the code. The HTML can be opened in draw.io and edited, see https://goo.gl/5khWp0 for the HTML.
The image is desinged to augment the SWC documenation for Creating Functions.
The idea for this image came from Introduction To Programming in Python.
The concern with using draw.io is that the approach in not very reproducible. The annotation could be achieved using some Javascript libraries for both highlighting code and annotating. However this would seem like an approach that is too web oriented for the static docs generated by SWC. An alternative, low-tech approach would be to write a filter for pygments that generates the background boxes, arrows and annotation text.