How visualize .dot file with "Graphviz (dot) Stephanvs" extension in VSCode, Windows 10?

Question

• Operating System: Windows 10, 64 bit
• Editor: VSCode 1.55.2 (with Graphviz (dot) Stephanvs extension installed)

I'm watching a course and he said install "Graphviz (dot) Stephanvs" extension.

I installed that extension and then reload VSCode.

I have a .dot file and when I click on ... icon I didn't see "Open Preview to the Side" option.

I also tried ctrl + k - ctrl + k,v - ctrl + shift + v but they didn't work.

Answer 1

I think I followed the tutorial you mentioned which led me to this stack overflow post. That part of the tutorial is slightly misleading as the "Graphviz (dot) Stephanvs" extension is only for syntax on dot files. To visualize dot files in VSC, you can do the following:

1. Install the “Graphviz Interactive Preview” extension from the Visual Studio Code marketplace.
2. Open a Graphviz/Dot file in the active editor.
3. Use either of the following methods to render the preview: Open the command prompt (cmd+shift+p) and type > graphviz preview, Click the button in the editor title, From the editor window’s context menu, select "Preview Graphviz / Dot (beside)

That should open the visualization on the side. Hope this helps!

Answer 2

Finally, I installed "Graphviz (dot) language support for Visual Studio Code, João Pinto" extension instead.