GoAT renders ASCII diagrams as SVG and is a Golang implementation of Markdeep’s ASCII renderer.

GoAt is not directly an extension of the Markdown renderer, but a new option for rendering code blocks with Hugo.

Markdeep provides the documentation to create ASCII diagrams for GoAT. We need to surround them with a fenced code block and the language identifier goat like this:

```goat
                  _______
.---------.      /      /    .-----.
|  Write  +-+-->/ Edit +-+->| Share |
'---------' ^  /______/  |   '-----'
            |            |
             '----------'
```

And the ASCII gets transformed into a nice SVG-diagram:




<div class="goat svg-container ">
  
    <svg
      xmlns="http://www.w3.org/2000/svg"
      font-family="Menlo,Lucida Console,monospace"
      
        viewBox="0 0 304 105"
      >
      <g transform='translate(8,16)'>
<path d='M 0,16 L 80,16' fill='none' stroke='currentColor'></path>
<path d='M 240,16 L 272,16' fill='none' stroke='currentColor'></path>
<path d='M 80,32 L 96,32' fill='none' stroke='currentColor'></path>
<path d='M 96,32 L 120,32' fill='none' stroke='currentColor'></path>
<path d='M 184,32 L 200,32' fill='none' stroke='currentColor'></path>
<path d='M 200,32 L 216,32' fill='none' stroke='currentColor'></path>
<path d='M 0,48 L 80,48' fill='none' stroke='currentColor'></path>
<path d='M 240,48 L 272,48' fill='none' stroke='currentColor'></path>
<path d='M 112,80 L 184,80' fill='none' stroke='currentColor'></path>
<path d='M 140,8 L 196,8' fill='none' stroke='currentColor'></path>
<path d='M 116,56 L 172,56' fill='none' stroke='currentColor'></path>
<path d='M 0,16 L 0,48' fill='none' stroke='currentColor'></path>
<path d='M 80,16 L 80,32' fill='none' stroke='currentColor'></path>
<path d='M 80,32 L 80,48' fill='none' stroke='currentColor'></path>
<path d='M 96,48 L 96,64' fill='none' stroke='currentColor'></path>
<path d='M 200,32 L 200,64' fill='none' stroke='currentColor'></path>
<path d='M 116,56 L 140,8' fill='none' stroke='currentColor'></path>
<path d='M 172,56 L 184,32' fill='none' stroke='currentColor'></path>
<path d='M 184,32 L 196,8' fill='none' stroke='currentColor'></path>
<path d='M 96,40 L 96,48' fill='none' stroke='currentColor'></path>
<polygon points='112.000000,48.000000 100.000000,42.400002 100.000000,53.599998' fill='currentColor' transform='rotate(270.000000, 96.000000, 48.000000)'></polygon>
<polygon points='128.000000,32.000000 116.000000,26.400000 116.000000,37.599998' fill='currentColor' transform='rotate(0.000000, 120.000000, 32.000000)'></polygon>
<polygon points='224.000000,32.000000 212.000000,26.400000 212.000000,37.599998' fill='currentColor' transform='rotate(0.000000, 216.000000, 32.000000)'></polygon>
<path d='M 240,16 A 16,16 0 0,0 224,32' fill='none' stroke='currentColor'></path>
<path d='M 272,16 A 16,16 0 0,1 288,32' fill='none' stroke='currentColor'></path>
<path d='M 224,32 A 16,16 0 0,0 240,48' fill='none' stroke='currentColor'></path>
<path d='M 288,32 A 16,16 0 0,1 272,48' fill='none' stroke='currentColor'></path>
<path d='M 96,64 A 16,16 0 0,0 112,80' fill='none' stroke='currentColor'></path>
<path d='M 200,64 A 16,16 0 0,1 184,80' fill='none' stroke='currentColor'></path>
<text text-anchor='middle' x='24' y='36' fill='currentColor' style='font-size:1em'>W</text>
<text text-anchor='middle' x='32' y='36' fill='currentColor' style='font-size:1em'>r</text>
<text text-anchor='middle' x='40' y='36' fill='currentColor' style='font-size:1em'>i</text>
<text text-anchor='middle' x='48' y='36' fill='currentColor' style='font-size:1em'>t</text>
<text text-anchor='middle' x='56' y='36' fill='currentColor' style='font-size:1em'>e</text>
<text text-anchor='middle' x='144' y='36' fill='currentColor' style='font-size:1em'>E</text>
<text text-anchor='middle' x='152' y='36' fill='currentColor' style='font-size:1em'>d</text>
<text text-anchor='middle' x='160' y='36' fill='currentColor' style='font-size:1em'>i</text>
<text text-anchor='middle' x='168' y='36' fill='currentColor' style='font-size:1em'>t</text>
<text text-anchor='middle' x='240' y='36' fill='currentColor' style='font-size:1em'>S</text>
<text text-anchor='middle' x='248' y='36' fill='currentColor' style='font-size:1em'>h</text>
<text text-anchor='middle' x='256' y='36' fill='currentColor' style='font-size:1em'>a</text>
<text text-anchor='middle' x='264' y='36' fill='currentColor' style='font-size:1em'>r</text>
<text text-anchor='middle' x='272' y='36' fill='currentColor' style='font-size:1em'>e</text>
</g>

    </svg>
  
</div>

and looks like:

WriteEditShare