How do I associate SVG elements generated by graphviz to elements in the DOT source code

Question

So, I've generated an svg graph from the dot file, using viz.js.
Now, it's easy to select it's elements, using javascript, but I don't see any association to the original dot file. I don't see any object structure in viz.js library, that ties the generated svg chart elements to the dot source elements, so, that, if I select the svg element with the mouse, I would know that this svg element is correspondent to the dot element, that it was generated from. Is there a way to have a such feedback? I need this, so that, if I edit an element in svg (visually in the browser), I would be able to map the edit back to the dot file and reflect the change on the source.

Explanation

So, here is the example of a possible source GraphViz dot code:

digraph DB {
rankdir=LR
node [shape=record]

person [
    label="
        Person table|
         Person ID|
         First Name|
         Middle Name|
         Last Name
    "
]

address [
    label="
        Addresses table|
         Address ID|
         Person ID|
         ZIP Code|
         Street Name|
         House Number|
         City/Town/Village Name|
         State Name|
         County/District Name|
         Country Name
    "
]

phone [
    label="
        Phone Number table|
         Person ID|
         Country Code|
         Area Code|
         Phone Number
    "
]
{phone:pid address:pid} -> person:id
}

Here is the svg result, generated by Viz.js library (but, as for me, I don't care, if the same can be done by other library, I will use that other library):

Let's say, I want to edit the " City/Town/Village Name" in the source dot file not by editing source's text, but by visually clicking on the related generated svg representation of that dot source. I can write some JavaScript, that will allow me to click on "City/Town/Village Name" on the svg graphic, for example, and the block becomes active. Then, I edit it in-place, as I wish. The problem lies with saving the change back to the source. JavaScript should change the dot source accordingly, but the problem is that the svg, generated with viz.js doesn't have any ties to the source. I.e., if you look at the source of the generated svg, it doesn't add any ids or anything, that would indicate, that a particular svg element was generated from which dot element. There is no way to identify, which element was edited in order to pass the edited value back to the correct dot element for the change to be made in the source. There are some ways, that I can think of so solve my issue:

edit the viz.js library, so it puts some ids on the generated svg
tediously analyse the generated svg, in order to logically identify the correct source element, to the edited svg element

,but the above are too difficult jobs and would take a long time to accomplish, so, I am asking, if there is some feature in viz.js, that I've missed, that would allow me to accomplish my task, or maybe, there is some other library that I could use, that can do, what I require?

user_3122101 · Answer

In cases simpler that yours, the SVG </code> element can be used to refer back to nodes and edges. For nodes, the title is the "<a href="http://www.graphviz.org/content/dot-language" rel="noreferrer">node_id</a>" (not to be confused with the node attribute <a href="http://www.graphviz.org/content/attrs#did" rel="noreferrer">id</a>) and for edges it is "<a href="http://www.graphviz.org/content/dot-language" rel="noreferrer">node_id</a> <a href="http://www.graphviz.org/content/dot-language" rel="noreferrer">edgeop</a> <a href="http://www.graphviz.org/content/dot-language" rel="noreferrer">node_id</a>", e.g. <code>a -> b</code>. From your SVG code: <code><g id="node1" class="node"> <title>person

person can be used to refer back to the DOT source line: person [....

In the general case, the Graphviz id attribute is your friend:

id

Allows the graph author to provide an id for graph objects which is to be included in the output. Normal "\N", "\E", "\G" substitutions are applied. If provided, it is the responsibility of the provider to keep its values sufficiently unique for its intended downstream use. Note, in particular, that "\E" does not provide a unique id for multi-edges. If no id attribute is provided, then a unique internal id is used. However, this value is unpredictable by the graph writer. An externally provided id is not used internally.

If the graph provides an id attribute, this will be used as a prefix for internally generated attributes. By making these distinct, the user can include multiple image maps in the same document.

In your case, you want to reference not only nodes, but also individual fields of record-based nodes.

Although the fields of record labels are defined with fieldId's, they do not seem to be intended to propagate to the generated SVG:

The first string in fieldId assigns a portname to the field and can be combined with the node name to indicate where to attach an edge to the node. (See portPos.)

To your rescue comes HTML-like labels:

The record-based shape has largely been superseded and greatly generalized by HTML-like labels. That is, instead of using shape=record, one might consider using shape=none, margin=0 and an HTML-like label.

With them you can create a node that is a table with rows and columns where you can use the ID attribute:

ID="value"

allows the user to specify a unique ID for a table or cell. See the id attribute for more information. Note that the "value" is treated as an escString similarly to the id attribute.

Unfortunately there is a bug in Graphviz (better described here) that causes this attribute to be ignored in the SVG output. Fortunately, there's a workaround.

Below is a solution which is based on d3-graphviz, which uses viz.js internally. You don't need to use d3-graphviz, though. You can achieve the same thing with viz.js directly.

If you keep your id's sufficiently unique and you have control of the formatting of the DOT source, you can use simple pattern replacement as in the presented solution.

If you don't have control over the formatting of the DOT source, you are probably better off feeding back the information to the application that generates it. An alternative, to avoid writing a full-fledged DOT parser, is to normalize the DOT source with viz.js by using 'dot' as output format and try to parse that.

user_171898 · Answer

Graphviz accepts class attributes and outputs them as SVG class="foo". Example:

$ cat test.dot
digraph G {
  graph [class="cats"];

  subgraph cluster_big {
    graph [class="big_cats"];

    "Lion" [class="yellow social"];
    "Snow Leopard" [class="white solitary"];
  };
}

$ dot -Tsvg ~/test.dot | grep "

How do I associate SVG elements generated by graphviz to elements in the DOT source code

Explanation

So, here is the example of a possible source GraphViz dot code:

2 Answers