Is it possible to make the diagram shapes clickable?

[darrencruse]

We are using nomnoml to generate (display only) ER-diagrams and would like to add some minimal interactivity where the users could click the boxes and see some related help info or possibly navigate to other web pages

There's nothing specifically built into nomnoml for such interactivity right...

But I'm hoping it's still possible but I'm not sure?

e.g. I'm a little new to SVG but I understand it's a DOM underneath and adding onclick handlers is in theory possible right e.g. as described here:
https://stackoverflow.com/questions/2296097/making-an-svg-image-object-clickable-with-onclick-avoiding-absolute-positioning

But I'm imagining to do the above I would use nomnoml to generate my SVG and then separately (old-school-jquery-style) find the rect elements and bind my click handlers to them.

But that would traditionally mean e.g. finding those elements by known ids on them right.

But I see a closed issue here that rejected the idea of having the nomnoml syntax let you assign ids or css class names.

In general am I thinking right or is there a different/better way?

If this is thinking right then is there a way I can find specific nomnoml generated SVG elements without having such "ids" on them?

[skanaar]

The nodes are not entities as such in the SVG files, they are just a collection of shapes.

A plain [node] is just a box but for example [<actor>a stick figure] is a bit more complex, and there is nothing in the SVG that reveals where one node ends and another starts.

Your use case is probably best solved by using some custom keyword like

[Component|
  onclick:http://darrencruse.com/Component.html
]

and then pass the output SVG through a script that replaces that pattern with a clickable link.

[MJonker]

@skanaar do you have a hint where we can start this 'parsing' of the SVG ? Should we extend a piece code in this repository ?

[skanaar]

I mean that the SVG output that nomnoml generates can then be parsed in whatever script/tool that you would prefer.

So let nomnoml generate my-diagram.svg.
And then consume that file with a script of your choice. Python, bash, javascript etc. etc.

[skanaar]

v1.1.0 is now published. It attaches the node name to every SVG shape as a data-name attribute.

This snippet is an example of how the data can be extracted in a click event handler.

document.querySelector('svg').onclick = function (e) { console.log(e.target.attributes['data-name']) }

With this, it should be possible to make a clickable diagram. The name-to-link data would have to be stored outside the diagram somewhere, but I think it is a good start.

[42sol-eu]

Is there a small working example for this?
It seems not to work in my example.

[skanaar]

1. Open http://www.nomnoml.com/image.svg?source=[first]-%3E[second]
2. Open the browser console
3. Enter: document.querySelector('svg').onclick = function (e) { console.log(e.target.attributes['data-name']) }
4. Click the diagram, you should see output in the console

(tested on Chrome)

You might have an old version in your cache?

[42sol-eu]

Perfect, that works fine. Now to the integration part...

[skanaar]

Finally nomnoml generates a proper SVG hierarchy with the release of v1.5.0 🎉