Custom nodes are not rendered in VS Code

Help
1

Hi. I am trying to create a diargam with a custom node in a VS code (v. 1.83.1) on Windows 11. I have installed the following VS Code extensions: Graphviz (dot) language support for Visual Studio Code by João Pinto and Graphviz Preview by EFanZh.

I try to create a simple diagram with one custom node using this code:

digraph G {
    a [label="" image="Intersect-3.svg" shape=none]
    b;
    a -> b;
}

The svg image is located in the same location as the .dot file. When I preview the diagram, there is blank space instead of the node shape:

image
image1226×570 20.8 KB

The svg file I am using:
Intersect-3

Surprisingly it works on Mac OS with the same app and extensions used. I do not understand why it is not working on Windows. Any ideas on what I am missing and how to make it work?

2

No guesses, but here are some debugging suggestions:

  1. test on Windows from the command line (without VS)
    dot -Tsvg myfile.gv >myfile.svg
  2. check Graphviz version on both systems
    dot -V
  3. Test to see if there is a problem with Intersect-3.svg, like so:
  • create a new file cow.gv:
    graph {m[label=“moo”]}
  • create a new svg file: dot -Tsvg cow.gv >cow.svg
  • edit the original file to use cow.svg as an image
3

@steveroush thank you for your answer!

The node shape is rendered correctly in the created svg file. I can’t upload it here as I get an error “Sorry, but we couldn’t determine the size of the image. Maybe your image is corrupted?”. Maybe because the size is too small. Here is the screenshot of how it looks:

image
image702×480 12.5 KB

Both on MacOS and Windows: dot - graphviz version 8.1.0 (20230707.0739). I also tried with 9.0.0 version on Windows and it didn’t work either.

That’s what I get:

image
image1920×389 24.3 KB

4

Not proof, but if the output was correct when not using Visual Studio, my guess is that the problem lies with Visual Studio.

5

Don’t we have a new option for inlinable svg? dot -Tsvg_inline. Maybe that would help.