Graphviz Diagrams

Graphviz SVG's

Trees

<center>

<span class="graphviz-light-dark" data-library-default="#789abc" data-default="#789abc" data-light="#000000" data-dark="#ffffff"></span><svg width="130pt" height="112pt" viewBox="0.00 0.00 130.00 112.30" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graphviz dot"><g id="graph0" class="graph" transform="scale(0.442203 0.442203) rotate(0) translate(4 249.95)"><title>G</title><polygon fill="none" stroke="none" points="-4,4 -4,-249.95 289.98,-249.95 289.98,4 -4,4"/><!-- &#45; --><g id="node1" class="node"><title>&#45;</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="104.99" cy="-216.96" rx="28.99" ry="28.99"/><text text-anchor="middle" x="104.99" y="-206.86" font-family="fira code" font-size="28.00" fill="#789abc">&#45;</text></g><!-- x --><g id="node2" class="node"><title>x</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="66.99" cy="-122.97" rx="28.99" ry="28.99"/><text text-anchor="middle" x="66.99" y="-112.87" font-family="fira code" font-size="28.00" fill="#789abc">x</text></g><!-- &#45;&#45;&#45;x --><g id="edge1" class="edge"><title>&#45;&#45;&#45;x</title><path fill="none" stroke="#789abc" stroke-width="3" d="M93.8,-188.86C88.89,-176.99 83.15,-163.08 78.24,-151.2"/></g><!-- + --><g id="node3" class="node"><title>+</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="218.99" cy="-122.97" rx="28.99" ry="28.99"/><text text-anchor="middle" x="218.99" y="-112.87" font-family="fira code" font-size="28.00" fill="#789abc">+</text></g><!-- &#45;&#45;&#45;+ --><g id="edge2" class="edge"><title>&#45;&#45;&#45;+</title><path fill="none" stroke="#789abc" stroke-width="3" d="M128.06,-197.34C147.84,-181.38 176.19,-158.51 195.96,-142.56"/></g><!-- 3 --><g id="node4" class="node"><title>3</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="28.99" cy="-28.99" rx="28.99" ry="28.99"/><text text-anchor="middle" x="28.99" y="-18.89" font-family="fira code" font-size="28.00" fill="#789abc">3</text></g><!-- x&#45;&#45;3 --><g id="edge3" class="edge"><title>x&#45;&#45;3</title><path fill="none" stroke="#789abc" stroke-width="3" d="M55.8,-94.87C50.89,-83 45.15,-69.1 40.24,-57.22"/></g><!-- 5 --><g id="node5" class="node"><title>5</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="104.99" cy="-28.99" rx="28.99" ry="28.99"/><text text-anchor="middle" x="104.99" y="-18.89" font-family="fira code" font-size="28.00" fill="#789abc">5</text></g><!-- x&#45;&#45;5 --><g id="edge4" class="edge"><title>x&#45;&#45;5</title><path fill="none" stroke="#789abc" stroke-width="3" d="M78.19,-94.87C83.09,-83 88.83,-69.1 93.74,-57.22"/></g><!-- 2 --><g id="node6" class="node"><title>2</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="180.99" cy="-28.99" rx="28.99" ry="28.99"/><text text-anchor="middle" x="180.99" y="-18.89" font-family="fira code" font-size="28.00" fill="#789abc">2</text></g><!-- +&#45;&#45;2 --><g id="edge5" class="edge"><title>+&#45;&#45;2</title><path fill="none" stroke="#789abc" stroke-width="3" d="M207.8,-94.87C202.89,-83 197.15,-69.1 192.24,-57.22"/></g><!-- 4 --><g id="node7" class="node"><title>4</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="256.99" cy="-28.99" rx="28.99" ry="28.99"/><text text-anchor="middle" x="256.99" y="-18.89" font-family="fira code" font-size="28.00" fill="#789abc">4</text></g><!-- +&#45;&#45;4 --><g id="edge6" class="edge"><title>+&#45;&#45;4</title><path fill="none" stroke="#789abc" stroke-width="3" d="M230.19,-94.87C235.09,-83 240.83,-69.1 245.74,-57.22"/></g></g></svg>

<figcaption><b>Tree 1: Tree of Arithmetic Expressions</b></figcaption>


<span class="graphviz-light-dark" data-library-default="#789abc" data-default="#789abc" data-light="#000000" data-dark="#ffffff"></span><svg width="216pt" height="206pt" viewBox="0.00 0.00 216.00 206.41" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graphviz dot"><g id="graph0" class="graph" transform="scale(0.413351 0.413351) rotate(0) translate(4 495.35)"><title>G</title><polygon fill="none" stroke="none" points="-4,4 -4,-495.35 518.56,-495.35 518.56,4 -4,4"/><!-- 5 --><g id="node1" class="node"><title>5</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="249.28" cy="-466.07" rx="25.28" ry="25.28"/><text text-anchor="middle" x="249.28" y="-457.14" font-family="fira code" font-size="24.00" fill="#789abc">5</text></g><!-- 4 --><g id="node2" class="node"><title>4</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="180.28" cy="-379.51" rx="25.28" ry="25.28"/><text text-anchor="middle" x="180.28" y="-370.59" font-family="fira code" font-size="24.00" fill="#789abc">4</text></g><!-- 5&#45;&#45;4 --><g id="edge1" class="edge"><title>5&#45;&#45;4</title><path fill="none" stroke="red" stroke-width="3" d="M232.93,-445.03C221.93,-431.55 207.49,-413.86 196.51,-400.41"/></g><!-- 32 --><g id="node3" class="node"><title>32</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="405.28" cy="-379.51" rx="25.28" ry="25.28"/><text text-anchor="middle" x="405.28" y="-370.59" font-family="fira code" font-size="24.00" fill="#789abc">3</text></g><!-- 5&#45;&#45;32 --><g id="edge2" class="edge"><title>5&#45;&#45;32</title><path fill="none" stroke="red" stroke-width="3" d="M272.3,-452.59C301.88,-436.56 352.92,-408.89 382.42,-392.9"/></g><!-- 31 --><g id="node4" class="node"><title>31</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="94.28" cy="-292.95" rx="25.28" ry="25.28"/><text text-anchor="middle" x="94.28" y="-284.03" font-family="fira code" font-size="24.00" fill="#789abc">3</text></g><!-- 4&#45;&#45;31 --><g id="edge3" class="edge"><title>4&#45;&#45;31</title><path fill="none" stroke="blue" stroke-width="3" d="M162.04,-360.58C147.54,-346.33 127.35,-326.47 112.79,-312.15"/></g><!-- 22 --><g id="node6" class="node"><title>22</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="231.28" cy="-292.95" rx="25.28" ry="25.28"/><text text-anchor="middle" x="231.28" y="-284.03" font-family="fira code" font-size="24.00" fill="#789abc">2</text></g><!-- 4&#45;&#45;22 --><g id="edge4" class="edge"><title>4&#45;&#45;22</title><path fill="none" stroke="blue" stroke-width="3" d="M193.41,-356.74C200.97,-344.21 210.43,-328.51 218.01,-315.95"/></g><!-- 23 --><g id="node7" class="node"><title>23</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="371.28" cy="-292.95" rx="25.28" ry="25.28"/><text text-anchor="middle" x="371.28" y="-284.03" font-family="fira code" font-size="24.00" fill="#789abc">2</text></g><!-- 32&#45;&#45;23 --><g id="edge7" class="edge"><title>32&#45;&#45;23</title><path fill="none" stroke="blue" stroke-width="3" d="M395.81,-354.96C391.13,-343.33 385.5,-329.33 380.82,-317.67"/></g><!-- 15 --><g id="node12" class="node"><title>15</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="440.28" cy="-292.95" rx="25.28" ry="25.28"/><text text-anchor="middle" x="440.28" y="-284.03" font-family="fira code" font-size="24.00" fill="#789abc">1</text></g><!-- 32&#45;&#45;15 --><g id="edge8" class="edge"><title>32&#45;&#45;15</title><path fill="none" stroke="blue" stroke-width="3" d="M415.03,-354.96C419.84,-343.33 425.64,-329.33 430.46,-317.67"/></g><!-- 21 --><g id="node5" class="node"><title>21</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="59.28" cy="-202.4" rx="25.28" ry="25.28"/><text text-anchor="middle" x="59.28" y="-193.47" font-family="fira code" font-size="24.00" fill="#789abc">2</text></g><!-- 31&#45;&#45;21 --><g id="edge5" class="edge"><title>31&#45;&#45;21</title><path fill="none" stroke="red" stroke-width="3" d="M84.9,-268.22C79.88,-255.52 73.71,-239.91 68.68,-227.19"/></g><!-- 12 --><g id="node9" class="node"><title>12</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="128.28" cy="-202.4" rx="25.28" ry="25.28"/><text text-anchor="middle" x="128.28" y="-193.47" font-family="fira code" font-size="24.00" fill="#789abc">1</text></g><!-- 31&#45;&#45;12 --><g id="edge6" class="edge"><title>31&#45;&#45;12</title><path fill="none" stroke="red" stroke-width="3" d="M103.39,-268.22C108.23,-255.62 114.16,-240.16 119.02,-227.5"/></g><!-- 11 --><g id="node8" class="node"><title>11</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="25.28" cy="-111.84" rx="25.28" ry="25.28"/><text text-anchor="middle" x="25.28" y="-102.91" font-family="fira code" font-size="24.00" fill="#789abc">1</text></g><!-- 21&#45;&#45;11 --><g id="edge9" class="edge"><title>21&#45;&#45;11</title><path fill="none" stroke="blue" stroke-width="3" d="M50.17,-177.66C45.33,-165.06 39.39,-149.6 34.53,-136.94"/></g><!-- 02 --><g id="node14" class="node"><title>02</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="94.28" cy="-111.84" rx="25.28" ry="25.28"/><text text-anchor="middle" x="94.28" y="-102.91" font-family="fira code" font-size="24.00" fill="#789abc">0</text></g><!-- 21&#45;&#45;02 --><g id="edge10" class="edge"><title>21&#45;&#45;02</title><path fill="none" stroke="blue" stroke-width="3" d="M68.66,-177.66C73.68,-164.96 79.85,-149.35 84.87,-136.63"/></g><!-- 13 --><g id="node10" class="node"><title>13</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="197.28" cy="-202.4" rx="25.28" ry="25.28"/><text text-anchor="middle" x="197.28" y="-193.47" font-family="fira code" font-size="24.00" fill="#789abc">1</text></g><!-- 22&#45;&#45;13 --><g id="edge13" class="edge"><title>22&#45;&#45;13</title><path fill="none" stroke="red" stroke-width="3" d="M222.17,-268.22C217.33,-255.62 211.39,-240.16 206.53,-227.5"/></g><!-- 05 --><g id="node17" class="node"><title>05</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="266.28" cy="-202.4" rx="25.28" ry="25.28"/><text text-anchor="middle" x="266.28" y="-193.47" font-family="fira code" font-size="24.00" fill="#789abc">0</text></g><!-- 22&#45;&#45;05 --><g id="edge14" class="edge"><title>22&#45;&#45;05</title><path fill="none" stroke="red" stroke-width="3" d="M240.66,-268.22C245.68,-255.52 251.85,-239.91 256.87,-227.19"/></g><!-- 14 --><g id="node11" class="node"><title>14</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="335.28" cy="-202.4" rx="25.28" ry="25.28"/><text text-anchor="middle" x="335.28" y="-193.47" font-family="fira code" font-size="24.00" fill="#789abc">1</text></g><!-- 23&#45;&#45;14 --><g id="edge16" class="edge"><title>23&#45;&#45;14</title><path fill="none" stroke="red" stroke-width="3" d="M361.63,-268.22C356.47,-255.52 350.12,-239.91 344.95,-227.19"/></g><!-- 07 --><g id="node19" class="node"><title>07</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="408.28" cy="-202.4" rx="25.28" ry="25.28"/><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="408.28" cy="-202.4" rx="29.28" ry="29.28"/><text text-anchor="middle" x="408.28" y="-193.47" font-family="fira code" font-size="24.00" fill="#789abc">0</text></g><!-- 23&#45;&#45;07 --><g id="edge17" class="edge"><title>23&#45;&#45;07</title><path fill="none" stroke="red" stroke-width="3" d="M381.19,-268.22C386.03,-256.64 391.88,-242.65 396.9,-230.64"/></g><!-- 01 --><g id="node13" class="node"><title>01</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="25.28" cy="-25.28" rx="25.28" ry="25.28"/><text text-anchor="middle" x="25.28" y="-16.35" font-family="fira code" font-size="24.00" fill="#789abc">0</text></g><!-- 11&#45;&#45;01 --><g id="edge11" class="edge"><title>11&#45;&#45;01</title><path fill="none" stroke="red" stroke-width="3" d="M25.28,-85.47C25.28,-74.86 25.28,-62.56 25.28,-51.92"/></g><!-- 03 --><g id="node15" class="node"><title>03</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="163.28" cy="-111.84" rx="25.28" ry="25.28"/><text text-anchor="middle" x="163.28" y="-102.91" font-family="fira code" font-size="24.00" fill="#789abc">0</text></g><!-- 12&#45;&#45;03 --><g id="edge12" class="edge"><title>12&#45;&#45;03</title><path fill="none" stroke="blue" stroke-width="3" d="M137.66,-177.66C142.68,-164.96 148.85,-149.35 153.87,-136.63"/></g><!-- 04 --><g id="node16" class="node"><title>04</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="232.28" cy="-111.84" rx="25.28" ry="25.28"/><text text-anchor="middle" x="232.28" y="-102.91" font-family="fira code" font-size="24.00" fill="#789abc">0</text></g><!-- 13&#45;&#45;04 --><g id="edge15" class="edge"><title>13&#45;&#45;04</title><path fill="none" stroke="blue" stroke-width="3" d="M206.66,-177.66C211.68,-164.96 217.85,-149.35 222.87,-136.63"/></g><!-- 06 --><g id="node18" class="node"><title>06</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="335.28" cy="-111.84" rx="25.28" ry="25.28"/><text text-anchor="middle" x="335.28" y="-102.91" font-family="fira code" font-size="24.00" fill="#789abc">0</text></g><!-- 14&#45;&#45;06 --><g id="edge18" class="edge"><title>14&#45;&#45;06</title><path fill="none" stroke="blue" stroke-width="3" d="M335.28,-175.78C335.28,-164.03 335.28,-150.14 335.28,-138.39"/></g><!-- 08 --><g id="node20" class="node"><title>08</title><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="485.28" cy="-202.4" rx="25.28" ry="25.28"/><ellipse fill="none" stroke="#789abc" stroke-width="3" cx="485.28" cy="-202.4" rx="29.28" ry="29.28"/><text text-anchor="middle" x="485.28" y="-193.47" font-family="fira code" font-size="24.00" fill="#789abc">0</text></g><!-- 15&#45;&#45;08 --><g id="edge19" class="edge"><title>15&#45;&#45;08</title><path fill="none" stroke="red" stroke-width="3" d="M451.87,-269.15C457.96,-257.16 465.46,-242.39 471.81,-229.89"/></g></g></svg>

<figcaption><b>Tree 2: Game Tree (of Nim)</b></figcaption>

</center>

Graphs

An Unweighted
Undirected
Multi-graph (with loops)

Graph G Undirected Unweighted Unrelated

Graphviz inside Admonitions

graphviz in UnExpanded Block

graphviz in Expanded Block

Graphviz PNG's (lower quality than SVGs)

Graphviz RenderExample of Code Syntax

SYNTAX (WATCHOUT) : NO SPACES BETWEEN ``` and graphviz

``` graphviz dot attack_plan.png
digraph G {
    rankdir=LR
    Earth [peripheries=2]
    Mars
    Earth -> Mars
}
```