Wasm build of 8.1.0 Graphviz

1

Can the latest graphviz be compiled with emcc?

Specifically dot_static would be useful.

I’m looking to build a wasm library from just a few components at a time.
I’m looking to produce a very small subset of graphviz into a build.

probably something like Text → (cgraph) → gvc → (dot) → (json/svg)

I was able to build a very small subset but there seems to be a large/complex system of dynamic plugin loading. I see that this is handled very dynamically and I’m ok with setting up the static context.

my plan is to first get a minimal version of dot working using GCC (hopefully i can use just the c code) and then switch over to emcc to produce a wasm file. I would like these to be minimal.

The build setups do seem pretty complicated. so i thought i’d start here with the communication.

I was able to produce a version that would (seemingly) produce the dot layout. but i couldn’t get any of the rendering plugins working. they are all setup as dynamic, which makes the thing pretty difficult to figure out.

even using
gvconfig_plugin_install_builtins() didn’t seem to have much a positive affect.

2

I think GitHub - hpcc-systems/hpcc-js-wasm: HPCC-Systems Web-Assembly (JavaScript) is what you are looking for.

1 Like
3

Yeah I found this. And it does have some of the missing information inside of it (how to setup lt_preloaded_symbols ). There are still some mysteries. There are a lot of code folders that do not explicitly say what the component actually does. I had a subset built that would do the layout, but for some reason, it didn’t handle the text widths properly. I figure there is an optional componet that i didn’t include or a preprocessor macro that is set incorrectly. The builds look like they can be pretty complicated and its hard to figure out which options to enable for a particular situation.

4

So right now things are working. i am using just a small subset of the c base code:

digraph structs {
node [shape=record];
struct1 [label=“ left| mid\ dle| right”];
struct2 [label=<{bold text| regular text | d }>];
struct3 [label=“hello\nworld |{ b |{c| b|e}| f}| g | h”];
struct1:f1 → struct2:f0;
struct1:f2 → struct3:here;
}

but something is a bit off:
image
should look more like:

image
image944×559 14.3 KB

I was wondering if maybe i had to select some font settings or something?

5

Having them right next to each other i notice the font is different.

6

Turns out the program i was rendering in needed to use the proper font.
now next on the list of weird.

7

fillcolor doesn’t seem to work. color does but fillcolor does not. im using the core_svg render.

8

it was simple style=filled was missing.

9

Yes, the Graphviz build is unfortunately pretty complicated. There are three independent build systems (Autotools, CMake, MS Build), of which Autotools is the most complete. The directory ci/ in the repository contains details of how automated testing builds Graphviz which may be helpful.

Something that may be relevant is that the most accurate SVG rendering is usually using the Cairo backend (-Tsvg:cairo). This delegates all font stuff and text rendering to Cairo. I am unsure if/how Cairo is available in a JS/WASM environment.