Hi Andredm7,
I do exactly this with Markdown - we have complex images, with an Image Map to allow hyperlinks per shape.
There a couple of ways to do this:
1) Use MS Visio to create your diagram
- Create your visio diagram with shapes, and add hyperlinks to each shape
- Save Visio diagram as the diagram as web (html).
This creates a sub-directory Diagram_files\ with png_1.png and png_1.htm
- Open up the png_1.htm in text editor and copy the section <MAP NAME="visImageMap"> to </MAP>
- Paste this section into the bottom of your Markdown .md file.
- At the top of your markdown file, use the html <img>
tag to display your image with associated map:
<img src="Diagram_files/png_1.png" usemap="#visImageMap1" />
- When you view this in Chrome, with a Markdown renderer, the<img>
and <MAP>
tags are passed-through to the html processor and the image shapes become 'clickable'.
- Try it with Chrome and Markdown Preview Plus extension
- This should work on Github too - if they allow the <img>
and <MAP>
tags- let me know if it works on GitHub!
2) If you don't want to use MS Visio, use another drawing tool that can produce diagrams and export to html with Image maps:
https://www.smartdraw.com/ - Cheaper, very similar to / better than Visio
or www.image-maps.com/ - Very Basic, never used it.