Support for images in node attributes about viz-js HOT 11 CLOSED

Here is my first pass at attempting to address this using the Emscripten file system API: 7c7f72f

It adds an "images" option used to specify dimensions for whatever images you want to refer to in the graph. It works by creating dummy images (empty SVG images with just a width and height) in Emscripten's file system that Graphviz will use to determine width and height for the nodes that use them. Since Graphviz uses magic bytes to determine the format of an image, it appears that we can use a dummy SVG when we really want to refer to a PNG in the output.

Example from the README:

Viz("digraph { a[image=\"test.png\"]; }", {
  images: [{ href: "test.png", width: "400px", height: "300px" }]
});

Ideally Viz.js could walk the graph for image attributes and figure out their dimensions automatically so images could be used on the demo site. I'm still working on that.

from viz-js.

Does this work for you on the command line? I get the following output from dot:

Warning: No such file or directory while opening http://www.graphviz.org/gvicons/doc-graphviz.png
Warning: No or improper image="http://www.graphviz.org/gvicons/doc-graphviz.png" for node "c"

from viz-js.

From the Graphviz docs for the image attribute:

Gives the name of a file containing an image to be displayed inside a node. The image file must be in one of the recognized formats, typically JPEG, PNG, GIF, BMP, SVG or Postscript, and be able to be converted into the desired output format.

If I save the image from this graph to the same directory as the input file, and change the attribute value to just "doc-graphviz.png", the SVG output does include a (relative) link to the image.

Supporting images would be nice, however. I'll have to think about how to do this. It might be possible to do what you suggest — load the image in the browser context and then give its dimensions to Graphviz somehow.

from viz-js.

You are right - originally it's not working with remote images. Downloading images using main browser context has one major disadvantage - it needs DOM so it cannot be handled within WebWorker. Maybe it should be handled by small download helper (used outside worker) and map of images to embed (filename as key, contents or metadata as value).

from viz-js.

Another option could be to use Emscripten's filesystem API in some way. It looks like Graphviz tries to call fopen on the image name (in this case an HTTP URL), and then reads image dimensions by looking at the image headers. So perhaps it could be done in a Web Worker context.

from viz-js.

It will be nice if it can support images.
👍

from viz-js.

Hi @mdaines, I am using viz.js for generating UML diagrams (see https://github.com/jaime-olivares/vscode-yuml). Did you find a way to show a custom shape? (any method)

from viz-js.

Hum same here.... I also tried
label=<<TABLE><TR><TD><IMG SRC="data:image/png:base64,XXXXXXXX"/></TD></TR></TABLE>>

Expecting to bypass the loader problem, but no more luck.

from viz-js.

This appears be possible to do in a limited way using Emscripten's FS.createLazyFile function.

from viz-js.

Hi @mdaines, thanks for the new release. Image feature seems to be working as expected. One question - how to control the position of the image? Tried imagepos attr as well as putting the image in label but none of them worked.

from viz-js.

It looks like imagepos is a new attribute? From what I can tell it was added after Graphviz 2.40.1. See ellson/MOTHBALLED-graphviz@c61ed71.

from viz-js.