Comments (11)
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.
Related Issues (20)
- Add type definitions HOT 4
- Publish lang-dot package
- Figure out why pkg-config doesn't work as expected for Expat
- Investigate distributing a non-WASM build
- Investigate support for separate WebAssembly instantiation
- Support -x (reduce) option
- Image support in v3 HOT 6
- RuntimeError with long label starting with newline HOT 1
- Android Project HOT 1
- Types can not be imported with current package.json HOT 2
- Dynamic font Family HOT 2
- Strict mode but merge labels HOT 1
- Text not rendering in nodes HOT 11
- Question about usage without Webassembly and some other questions HOT 1
- I need to remove tooltip i.e title for entire graph. How can it be done HOT 4
- Having trouble with new image support - can't use same image URL in two different places HOT 3
- Positions will never change HOT 3
- DockerFile uses Expat 2.5.0 which is vulnerable for CVE-2023-52425 HOT 2
- Different Results with same Graph HOT 2
- Status of the viz-js OSS project HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from viz-js.