Graphviz

Graphviz is open source graph visualization software. It has several main graph layout programs. - Home / online

Ressources

Create diagrams with code using Graphviz
vscode-interactive-graphviz - Interactive Graphviz Dot Preview for Visual Studio Code using d3-graphviz and so does not require native Graphviz to be installed.
Comes with animation. No need to save file to see changes.
GraphvizOnline
Generating Dependency Graphs With Text

Options

rankdir="LR"; - horizontal graph
Partially Transparent Colors

Graphviz How to go from .dot to a graph

dot -Tsvg graph.dot -o graph.svg

If you want to use the dot renderer. There are alternatives like neato and twopi. You can change the output format by varying the extension of the filename specified with -o.

SVG result, can be opened in a browser.

Shape example

 digraph structs { 
    node [shape=record];

    struct2 [label="{ {_|_|o} |{x|x|o}| {x|_|o}}"];
    struct3 [label="{ {_|_|o} |{x|x|o}| {x|_|o}}"];
    struct4 [label="{ {_|_|o} |{x|x|o}| {x|_|o}}"];
    struct5 [label="{ {_|_|o} |{x|x|o}| {x|_|o}}"];

    struct2 -> struct3
    struct2 -> struct4
    struct3 -> struct5
 }

Tic-tac-to MCT search

digraph structs { node [shape=record,fontname = "courrier"];
x7ffedf12b700 [color=red,label="{ {x -9780 / 10000\no = -0.978}|{x|o|o}|{ |x| }|{ | | }}"];
x7ffedf12b700 -> { x55b9b2558a50 x55b9b2558a80 x55b9b2558ab0 x55b9b2558ae0 x55b9b2558b10  }
x55b9b2558a50 [color=blue,label="{ {o 3581 / 3581\nx = 1}|{x|o|o}|{ |x| }|{ | |x}}"];
x55b9b2558a80 [label="{ {o 11 / 49\nx = 0.22449}|{x|o|o}|{ |x| }|{ |x| }}"];
x55b9b2558ab0 [label="{ {o 1548 / 1627\nx = 0.951444}|{x|o|o}|{ |x| }|{x| | }}"];
x55b9b2558ae0 [label="{ {o 1625 / 1702\nx = 0.954759}|{x|o|o}|{ |x|x}|{ | | }}"];
x55b9b2558b10 [label="{ {o 3015 / 3041\nx = 0.99145}|{x|o|o}|{x|x| }|{ | | }}"];
}

node

digraph structs { node [shape=record,fontname = "courrier"];
x7ffedf12b700 [color=red,label="{ {x -9780 / 10000\no = -0.978}|
{x|o|o}|{ |x| }|{ | | }
}"];
}

Written on October 8, 2018, Last update on November 24, 2023

graph tree visualizer vscode online doc markdown python ruby

#4577