Graphs for Software Development Documentation

VSCode supports the format.

Example 1

digraph unix {
  node1 [
      Node 1 |
      attr1 \l
      attr2 \l
      attr3 \l
  rootNode -> node1;
  rootNode -> node2 [style="dotted"];

Useful Visual Studio Code Extensions

Name: Graphviz (dot) language support for Visual Studio Code

Id: joaompinto.vscode-graphviz
Description: This extension provides GraphViz (dot) language support for Visual Studio Code
Version: 0.0.5
Publisher: João Pinto

VS Marketplace Link:

Name: Graphviz Markdown Preview

Id: geeklearningio.graphviz-markdown-preview
Description: Adds Graphviz support to VSCode's builtin markdown preview
Version: 0.0.8
Publisher: Geek Learning

VS Marketplace Link:


  1. Node, Edge and Graph Attributes
  2. UML Diagrams Using Graphviz Dot
  3. top-down subgraphs, left-right inside subgraphs