What tool do you use for roadmap generation?

[fajnydev]

I mean, in project we can find that json with entities -> i just wonder if there could be easy way to make anchors for this road image like imagemap in html, that could be so awesome! :)
Give me a hint, i could make further research

[drcabral]

Hi @wrzosdev

We used Balsamiq tool to built the image, because it's the same tool used in others roadmaps like this, so we thought that maybe will be easier to the community to adapt to this.

But if you know how to improve this and make it easier to create PR with changes, feel free to do any suggestions or open a PR!

[anacoimbrag]

Hi @wrzosdev
Thanks for pointing that out! In addition to what @drcabral said, we are going to add to the readme the way to edit and generate the roadmap.

[fajnydev]

Ok, so imagemap structure is about like

<img src="GENERATED_IMAGEjpg" usemap="#image-map">
<map name="image-map">
    <area target="_blank" alt="NODE.PROPS.TEXT" title="NODE.PROPS.TEXT" href="NODE.PROPS.URL" coords="NODE.X/Y/MEASUREDW/H" shape="rect">
[...]
</map>

and json node

{
                   "ID": "12",
                   "typeID": "TextInput",
                   "zOrder": "159",
                   "w": "333",
                   "measuredW": "142",
                   "measuredH": "46",
                   "x": "999",
                   "y": "381",
                   "properties": {
                       "text": "Emulator",
                       "align": "center",
                       "size": "32",
                       "color": "15843890"
                   }
               },

If there is easy way to add urls in Balsamiq(i don't have paid version, don't know really) like in properties node that should be extra easy to get all info from json to generate map mark by one click. I could do this in minutes(+ time to find proper docs ;)

How does it work in Balsamiq? Can we add/set custom urls for rect nodes there?

[fajnydev]

:) no problem, nice to contribute in such creative way to organize learning 👍