Graphs for Software Development Documentation

VSCode supports the format.

Example 1

digraph unix {
  rootNode;
  
  node1 [
    shape=record
    label="{
      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: https://marketplace.visualstudio.com/items?itemName=joaompinto.vscode-graphviz

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: https://marketplace.visualstudio.com/items?itemName=geeklearningio.graphviz-markdown-preview

References

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