# GRAPHVIZ

sketchviz is a handy tool:

https://sketchviz.com/new

Here is the dot notation for the locations in horses on the brink:

```
graph {
  rankdir = LR

  s [ label = "Stables" ]
  t [ label = "Racetrack" ]
  p [ label = "Pasture" ]
  v [ label = "Vet" ]
  w [ label = "The Old Watering Hole" ]

  w -- p -- s -- t
  s -- v
}
```


in vim you can visually select the lines and 

```
:w !neato -Tsvg > graph.svg`
```

to create the image.

(neato is a good "spring loaded" layout engine for non directional graphs)

or if you want to replace the lines with svg,
visually select the lines and

```
:!neato -Tsvg
```

I'll do this, copy the resulting svg to a buffer, and then `u` to undo
so I can paste the svg somewhere in the document while retaining the original dot info.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 8.1.0 (20230707.0739)
 -->
<!-- Pages: 1 -->
<svg width="237pt" height="245pt"
 viewBox="0.00 0.00 237.31 244.65" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 240.65)">
<polygon fill="white" stroke="none" points="-4,4 -4,-240.65 233.31,-240.65 233.31,4 -4,4"/>
<!-- s -->
<g id="node1" class="node">
<title>s</title>
<ellipse fill="none" stroke="black" cx="99.11" cy="-164.54" rx="37.53" ry="18"/>
<text text-anchor="middle" x="99.11" y="-159.49" font-family="Times,serif" font-size="14.00">Stables</text>
</g>
<!-- t -->
<g id="node2" class="node">
<title>t</title>
<ellipse fill="none" stroke="black" cx="154.96" cy="-218.65" rx="47.77" ry="18"/>
<text text-anchor="middle" x="154.96" y="-213.6" font-family="Times,serif" font-size="14.00">Racetrack</text>
</g>
<!-- s&#45;&#45;t -->
<g id="edge3" class="edge">
<title>s&#45;&#45;t</title>
<path fill="none" stroke="black" d="M116.17,-181.07C122.84,-187.53 130.49,-194.95 137.23,-201.47"/>
</g>
<!-- v -->
<g id="node4" class="node">
<title>v</title>
<ellipse fill="none" stroke="black" cx="27" cy="-193.67" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-188.62" font-family="Times,serif" font-size="14.00">Vet</text>
</g>
<!-- s&#45;&#45;v -->
<g id="edge4" class="edge">
<title>s&#45;&#45;v</title>
<path fill="none" stroke="black" d="M70.19,-176.22C63.61,-178.88 56.7,-181.67 50.38,-184.22"/>
</g>
<!-- p -->
<g id="node3" class="node">
<title>p</title>
<ellipse fill="none" stroke="black" cx="113.48" cy="-89.1" rx="38.04" ry="18"/>
<text text-anchor="middle" x="113.48" y="-84.05" font-family="Times,serif" font-size="14.00">Pasture</text>
</g>
<!-- p&#45;&#45;s -->
<g id="edge2" class="edge">
<title>p&#45;&#45;s</title>
<path fill="none" stroke="black" d="M110,-107.36C107.76,-119.13 104.85,-134.39 102.6,-146.18"/>
</g>
<!-- w -->
<g id="node5" class="node">
<title>w</title>
<ellipse fill="none" stroke="black" cx="130.87" cy="-18" rx="98.44" ry="18"/>
<text text-anchor="middle" x="130.87" y="-12.95" font-family="Times,serif" font-size="14.00">The Old Watering Hole</text>
</g>
<!-- w&#45;&#45;p -->
<g id="edge1" class="edge">
<title>w&#45;&#45;p</title>
<path fill="none" stroke="black" d="M126.39,-36.31C123.78,-47.01 120.49,-60.45 117.88,-71.09"/>
</g>
</g>
</svg>



if you install `graph-easy` from CPAN then you can use a limited subset of dot to make unicode box art!


```
[ The Old Watering Hole ] -- [ Pasture ] -- [ Stables ] -- [ Racetrack ], [ Vet ]
```

visually select and:

```
:!graph-easy --as=boxart
```


```
┌───────────────────────┐     ┌─────────┐     ┌─────────┐     ┌───────────┐
│ The Old Watering Hole │ ─── │ Pasture │ ─── │ Stables │ ─── │ Racetrack │
└───────────────────────┘     └─────────┘     └─────────┘     └───────────┘
                                                │
                                                │
                                                │
                                              ┌─────────┐
                                              │   Vet   │
                                              └─────────┘
```
