add dot diagrams & nested-lookup origin story to jason post

three graphviz SVG diagrams:
- nested JSON hell (response.data.data.results[0].data)
- bipolar love cycle (discover → euphoria → frustration → crawl back)
- format rivals (JSON vs YAML vs XML vs TOML)

link nested-lookup origin to pagination post where the function
first appeared. deduplicate footer references.
This commit is contained in:
russell@unturf.com 2026-02-27 17:09:32 -05:00
parent 886e744fea
commit f141054977
4 changed files with 284 additions and 1 deletions

View file

@ -29,6 +29,11 @@ Seven levels deep. Keys named ``data`` containing keys named ``data`` containing
I started seeing curly braces when I closed my eyes.
.. image:: /uploads/2026/02/jason-nested.svg
:alt: nested JSON hell diagram showing response.data.data.results[0].data
:align: center
:width: 400px
|
But then. *Then.* I discovered ``jq``.
@ -75,6 +80,11 @@ I tried TOML once, during a low point. TOML plays a rebound you date to make Jas
I went back to Jason by Friday.
.. image:: /uploads/2026/02/jason-rivals.svg
:alt: format rivals diagram showing JSON vs YAML vs XML vs TOML
:align: center
:width: 500px
|
Here sits truth about loving Jason. He lives everywhere. He speaks as lingua franca of a connected world. He rides inside every webhook, every REST API, every config file that gave up on cleverness. He sits in your browser's local storage. He hides in your package.json. He lurks in your Jupyter notebooks. He underpins modern computing & still can't support integers larger than 2^53 without losing precision.
@ -83,6 +93,11 @@ I know this. I know all of his flaws. Missing comments. Trailing comma fascism.
I know all of this & I love him anyway.
.. image:: /uploads/2026/02/jason-cycle.svg
:alt: bipolar love cycle diagram showing discover, euphoria, build, frustration, betrayal, try alternatives, crawl back
:align: center
:width: 500px
|
Some nights I write YAML & think of him. YAML with its invisible whitespace traps & its "Norway problem" where ``NO`` becomes ``false``. Do you even know `who owns YAML <https://russell.ballestrini.net/who-owns-yaml/>`_? YAML who looks friendly but will silently interpret ``3.10`` as a float ``3.1`` & destroy your Python version matrix. YAML who needs you to memorize which scalars evaluate truthy. At least Jason stays honest about difficulty. At least Jason fails loudly. At least Jason has never turned a country code into a boolean.
@ -123,6 +138,7 @@ I wrote `nested-lookup <https://pypi.org/project/nested-lookup/>`_ so nobody has
- `nested-lookup on PyPI <https://pypi.org/project/nested-lookup/>`_
- `nested-lookup source code <https://git.unturf.com/python/nested-lookup>`_
- `Dealing with pagination in Python </dealing-with-pagination-in-python/>`_ — where ``nested_lookup()`` first appeared, extracted from paginated AWS ElastiCache API work. Origin story of a library.
**JSON in Production**
@ -132,7 +148,6 @@ Every API I ever built speaks Jason fluently.
- `Nginx throw HTTP 503 maintenance JSON for all requests </nginx-throw-503-maintenance-json-for-all-requests/>`_
- `Filter Salt Stack return data output </filter-salt-stack-return-data-output/>`_ — pipes ``--out=json`` through ``json.loads()`` & ``json.dumps()``
- `Introducing SLOP </introducing-slop/>`_ — Simple Language Open Protocol. RESTful JSON API standard for ML services. No fuss. No proprietary lock-in.
- `Dealing with pagination in Python </dealing-with-pagination-in-python/>`_ — consuming paginated JSON API responses
**JSON HTTP Servers in 42+ Languages**

View file

@ -0,0 +1,109 @@
<?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 2.43.0 (0)
-->
<!-- Title: love_cycle Pages: 1 -->
<svg width="201pt" height="601pt"
viewBox="0.00 0.00 200.72 601.27" 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 597.27)">
<title>love_cycle</title>
<text text-anchor="middle" x="96.36" y="-7" font-family="monospace" font-size="10.00" fill="#888888">a bipolar love cycle</text>
<!-- discover -->
<g id="node1" class="node">
<title>discover</title>
<ellipse fill="#50fa7b" fill-opacity="0.200000" stroke="#666666" cx="106.72" cy="-570.65" rx="50.41" ry="22.76"/>
<text text-anchor="middle" x="106.72" y="-573.85" font-family="monospace" font-size="11.00" fill="#50fa7b">discover</text>
<text text-anchor="middle" x="106.72" y="-561.85" font-family="monospace" font-size="11.00" fill="#50fa7b">Jason</text>
</g>
<!-- euphoria -->
<g id="node2" class="node">
<title>euphoria</title>
<ellipse fill="#50fa7b" fill-opacity="0.200000" stroke="#666666" cx="106.72" cy="-484.02" rx="42.89" ry="18"/>
<text text-anchor="middle" x="106.72" y="-481.22" font-family="monospace" font-size="11.00" fill="#50fa7b">euphoria</text>
</g>
<!-- discover&#45;&gt;euphoria -->
<g id="edge1" class="edge">
<title>discover&#45;&gt;euphoria</title>
<path fill="none" stroke="#888888" d="M106.72,-547.85C106.72,-537.09 106.72,-523.99 106.72,-512.54"/>
<polygon fill="#888888" stroke="#888888" points="110.22,-512.2 106.72,-502.2 103.22,-512.2 110.22,-512.2"/>
<text text-anchor="middle" x="138.72" y="-522.82" font-family="monospace" font-size="9.00" fill="#888888">json.loads()</text>
</g>
<!-- build -->
<g id="node3" class="node">
<title>build</title>
<ellipse fill="#50fa7b" fill-opacity="0.200000" stroke="#666666" cx="61.72" cy="-397.39" rx="59.29" ry="22.76"/>
<text text-anchor="middle" x="61.72" y="-400.59" font-family="monospace" font-size="11.00" fill="#50fa7b">build</text>
<text text-anchor="middle" x="61.72" y="-388.59" font-family="monospace" font-size="11.00" fill="#50fa7b">everything</text>
</g>
<!-- euphoria&#45;&gt;build -->
<g id="edge2" class="edge">
<title>euphoria&#45;&gt;build</title>
<path fill="none" stroke="#888888" d="M97.83,-466.3C92.14,-455.6 84.59,-441.41 77.87,-428.76"/>
<polygon fill="#888888" stroke="#888888" points="80.94,-427.09 73.16,-419.9 74.76,-430.37 80.94,-427.09"/>
<text text-anchor="middle" x="109.22" y="-440.82" font-family="monospace" font-size="9.00" fill="#888888">indent=2</text>
</g>
<!-- frustration -->
<g id="node4" class="node">
<title>frustration</title>
<ellipse fill="#ff5555" fill-opacity="0.200000" stroke="#666666" cx="54.72" cy="-310.76" rx="54.94" ry="18"/>
<text text-anchor="middle" x="54.72" y="-307.96" font-family="monospace" font-size="11.00" fill="#ff5555">frustration</text>
</g>
<!-- build&#45;&gt;frustration -->
<g id="edge3" class="edge">
<title>build&#45;&gt;frustration</title>
<path fill="none" stroke="#888888" d="M59.92,-374.6C59.02,-363.72 57.92,-350.47 56.97,-338.93"/>
<polygon fill="#888888" stroke="#888888" points="60.46,-338.63 56.14,-328.95 53.48,-339.2 60.46,-338.63"/>
<text text-anchor="middle" x="93.22" y="-349.56" font-family="monospace" font-size="9.00" fill="#888888">7 levels deep</text>
</g>
<!-- betrayal -->
<g id="node5" class="node">
<title>betrayal</title>
<ellipse fill="#ff5555" fill-opacity="0.200000" stroke="#666666" cx="62.72" cy="-224.14" rx="50.41" ry="22.76"/>
<text text-anchor="middle" x="62.72" y="-227.34" font-family="monospace" font-size="11.00" fill="#ff5555">null</text>
<text text-anchor="middle" x="62.72" y="-215.34" font-family="monospace" font-size="11.00" fill="#ff5555">betrayal</text>
</g>
<!-- frustration&#45;&gt;betrayal -->
<g id="edge4" class="edge">
<title>frustration&#45;&gt;betrayal</title>
<path fill="none" stroke="#888888" d="M54.14,-292.68C53.97,-286.98 53.81,-280.6 53.72,-274.76 53.66,-270.32 53.23,-269.18 53.72,-264.76 54.02,-262.1 54.43,-259.34 54.91,-256.59"/>
<polygon fill="#888888" stroke="#888888" points="58.34,-257.28 56.89,-246.79 51.48,-255.9 58.34,-257.28"/>
<text text-anchor="middle" x="90.72" y="-267.56" font-family="monospace" font-size="9.00" fill="#888888">trailing comma</text>
</g>
<!-- try_other -->
<g id="node6" class="node">
<title>try_other</title>
<ellipse fill="#ffb86c" fill-opacity="0.200000" stroke="#666666" cx="73.72" cy="-132.88" rx="45.01" ry="22.76"/>
<text text-anchor="middle" x="73.72" y="-136.08" font-family="monospace" font-size="11.00" fill="#ffb86c">try XML</text>
<text text-anchor="middle" x="73.72" y="-124.08" font-family="monospace" font-size="11.00" fill="#ffb86c">or TOML</text>
</g>
<!-- betrayal&#45;&gt;try_other -->
<g id="edge5" class="edge">
<title>betrayal&#45;&gt;try_other</title>
<path fill="none" stroke="#888888" d="M65.38,-201.53C66.71,-190.76 68.34,-177.52 69.81,-165.62"/>
<polygon fill="#888888" stroke="#888888" points="73.3,-165.95 71.05,-155.6 66.35,-165.1 73.3,-165.95"/>
<text text-anchor="middle" x="97.72" y="-176.31" font-family="monospace" font-size="9.00" fill="#888888">mass&#45;delete</text>
</g>
<!-- crawl_back -->
<g id="node7" class="node">
<title>crawl_back</title>
<ellipse fill="#bd93f9" fill-opacity="0.200000" stroke="#666666" cx="111.72" cy="-41.63" rx="35.21" ry="22.76"/>
<text text-anchor="middle" x="111.72" y="-44.83" font-family="monospace" font-size="11.00" fill="#bd93f9">crawl</text>
<text text-anchor="middle" x="111.72" y="-32.83" font-family="monospace" font-size="11.00" fill="#bd93f9">back</text>
</g>
<!-- try_other&#45;&gt;crawl_back -->
<g id="edge6" class="edge">
<title>try_other&#45;&gt;crawl_back</title>
<path fill="none" stroke="#888888" d="M75.53,-110.01C76.81,-101.13 78.99,-90.94 82.72,-82.25 84.51,-78.09 86.81,-73.94 89.33,-69.99"/>
<polygon fill="#888888" stroke="#888888" points="92.25,-71.92 95.08,-61.71 86.5,-67.92 92.25,-71.92"/>
<text text-anchor="middle" x="109.22" y="-85.05" font-family="monospace" font-size="9.00" fill="#888888">45 minutes</text>
</g>
<!-- crawl_back&#45;&gt;euphoria -->
<g id="edge7" class="edge">
<title>crawl_back&#45;&gt;euphoria</title>
<path fill="none" stroke="#888888" d="M125.66,-62.52C136.5,-79.97 149.72,-106.45 149.72,-131.88 149.72,-398.39 149.72,-398.39 149.72,-398.39 149.72,-421.43 145.45,-427.63 134.72,-448.02 132.82,-451.64 130.52,-455.24 128.07,-458.69"/>
<polygon fill="#888888" stroke="#888888" points="125.12,-456.78 121.79,-466.84 130.66,-461.05 125.12,-456.78"/>
<text text-anchor="middle" x="171.22" y="-267.56" font-family="monospace" font-size="9.00" fill="#888888">jq saves</text>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.6 KiB

View file

@ -0,0 +1,91 @@
<?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 2.43.0 (0)
-->
<!-- Title: nested_hell Pages: 1 -->
<svg width="301pt" height="453pt"
viewBox="0.00 0.00 301.00 453.00" 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 449)">
<title>nested_hell</title>
<text text-anchor="middle" x="146.5" y="-7" font-family="monospace" font-size="10.00" fill="#888888">response[&quot;data&quot;][&quot;data&quot;][&quot;results&quot;][0][&quot;data&quot;]</text>
<!-- response -->
<g id="node1" class="node">
<title>response</title>
<path fill="#2d2d2d" stroke="#666666" d="M123,-404.5C123,-404.5 170,-404.5 170,-404.5 176,-404.5 182,-410.5 182,-416.5 182,-416.5 182,-432.5 182,-432.5 182,-438.5 176,-444.5 170,-444.5 170,-444.5 123,-444.5 123,-444.5 117,-444.5 111,-438.5 111,-432.5 111,-432.5 111,-416.5 111,-416.5 111,-410.5 117,-404.5 123,-404.5"/>
<text text-anchor="middle" x="146.5" y="-431.7" font-family="monospace" font-size="11.00" fill="#f8f8f2">response</text>
<polyline fill="none" stroke="#666666" points="111,-424.5 182,-424.5 "/>
<text text-anchor="middle" x="146.5" y="-411.7" font-family="monospace" font-size="11.00" fill="#f8f8f2">data</text>
</g>
<!-- data1 -->
<g id="node2" class="node">
<title>data1</title>
<path fill="#2d2d2d" stroke="#666666" d="M131.5,-327.5C131.5,-327.5 161.5,-327.5 161.5,-327.5 167.5,-327.5 173.5,-333.5 173.5,-339.5 173.5,-339.5 173.5,-355.5 173.5,-355.5 173.5,-361.5 167.5,-367.5 161.5,-367.5 161.5,-367.5 131.5,-367.5 131.5,-367.5 125.5,-367.5 119.5,-361.5 119.5,-355.5 119.5,-355.5 119.5,-339.5 119.5,-339.5 119.5,-333.5 125.5,-327.5 131.5,-327.5"/>
<text text-anchor="middle" x="146.5" y="-354.7" font-family="monospace" font-size="11.00" fill="#f8f8f2">data</text>
<polyline fill="none" stroke="#666666" points="119.5,-347.5 173.5,-347.5 "/>
<text text-anchor="middle" x="146.5" y="-334.7" font-family="monospace" font-size="11.00" fill="#f8f8f2">data</text>
</g>
<!-- response&#45;&gt;data1 -->
<g id="edge1" class="edge">
<title>response&#45;&gt;data1</title>
<path fill="none" stroke="#888888" d="M146.5,-404.19C146.5,-395.26 146.5,-384.53 146.5,-374.87"/>
<polygon fill="#888888" stroke="#888888" points="148.95,-374.75 146.5,-367.75 144.05,-374.75 148.95,-374.75"/>
</g>
<!-- data2 -->
<g id="node3" class="node">
<title>data2</title>
<path fill="#2d2d2d" stroke="#666666" d="M126.5,-250.5C126.5,-250.5 166.5,-250.5 166.5,-250.5 172.5,-250.5 178.5,-256.5 178.5,-262.5 178.5,-262.5 178.5,-278.5 178.5,-278.5 178.5,-284.5 172.5,-290.5 166.5,-290.5 166.5,-290.5 126.5,-290.5 126.5,-290.5 120.5,-290.5 114.5,-284.5 114.5,-278.5 114.5,-278.5 114.5,-262.5 114.5,-262.5 114.5,-256.5 120.5,-250.5 126.5,-250.5"/>
<text text-anchor="middle" x="146.5" y="-277.7" font-family="monospace" font-size="11.00" fill="#f8f8f2">data</text>
<polyline fill="none" stroke="#666666" points="114.5,-270.5 178.5,-270.5 "/>
<text text-anchor="middle" x="146.5" y="-257.7" font-family="monospace" font-size="11.00" fill="#f8f8f2">results</text>
</g>
<!-- data1&#45;&gt;data2 -->
<g id="edge2" class="edge">
<title>data1&#45;&gt;data2</title>
<path fill="none" stroke="#888888" d="M146.5,-327.19C146.5,-318.26 146.5,-307.53 146.5,-297.87"/>
<polygon fill="#888888" stroke="#888888" points="148.95,-297.75 146.5,-290.75 144.05,-297.75 148.95,-297.75"/>
</g>
<!-- results -->
<g id="node4" class="node">
<title>results</title>
<path fill="#2d2d2d" stroke="#666666" d="M103,-173.5C103,-173.5 190,-173.5 190,-173.5 196,-173.5 202,-179.5 202,-185.5 202,-185.5 202,-201.5 202,-201.5 202,-207.5 196,-213.5 190,-213.5 190,-213.5 103,-213.5 103,-213.5 97,-213.5 91,-207.5 91,-201.5 91,-201.5 91,-185.5 91,-185.5 91,-179.5 97,-173.5 103,-173.5"/>
<text text-anchor="middle" x="146.5" y="-200.7" font-family="monospace" font-size="11.00" fill="#f8f8f2">results</text>
<polyline fill="none" stroke="#666666" points="91,-193.5 202,-193.5 "/>
<text text-anchor="middle" x="146.5" y="-180.7" font-family="monospace" font-size="11.00" fill="#f8f8f2">[0, 1, 2, ...]</text>
</g>
<!-- data2&#45;&gt;results -->
<g id="edge3" class="edge">
<title>data2&#45;&gt;results</title>
<path fill="none" stroke="#888888" d="M146.5,-250.19C146.5,-241.26 146.5,-230.53 146.5,-220.87"/>
<polygon fill="#888888" stroke="#888888" points="148.95,-220.75 146.5,-213.75 144.05,-220.75 148.95,-220.75"/>
</g>
<!-- item -->
<g id="node5" class="node">
<title>item</title>
<path fill="#2d2d2d" stroke="#666666" d="M131.5,-96.5C131.5,-96.5 161.5,-96.5 161.5,-96.5 167.5,-96.5 173.5,-102.5 173.5,-108.5 173.5,-108.5 173.5,-124.5 173.5,-124.5 173.5,-130.5 167.5,-136.5 161.5,-136.5 161.5,-136.5 131.5,-136.5 131.5,-136.5 125.5,-136.5 119.5,-130.5 119.5,-124.5 119.5,-124.5 119.5,-108.5 119.5,-108.5 119.5,-102.5 125.5,-96.5 131.5,-96.5"/>
<text text-anchor="middle" x="146.5" y="-123.7" font-family="monospace" font-size="11.00" fill="#f8f8f2">item</text>
<polyline fill="none" stroke="#666666" points="119.5,-116.5 173.5,-116.5 "/>
<text text-anchor="middle" x="146.5" y="-103.7" font-family="monospace" font-size="11.00" fill="#f8f8f2">data</text>
</g>
<!-- results&#45;&gt;item -->
<g id="edge4" class="edge">
<title>results&#45;&gt;item</title>
<path fill="none" stroke="#888888" d="M146.5,-173.19C146.5,-164.26 146.5,-153.53 146.5,-143.87"/>
<polygon fill="#888888" stroke="#888888" points="148.95,-143.75 146.5,-136.75 144.05,-143.75 148.95,-143.75"/>
</g>
<!-- value -->
<g id="node6" class="node">
<title>value</title>
<path fill="#44475a" stroke="#666666" d="M120,-19.5C120,-19.5 173,-19.5 173,-19.5 179,-19.5 185,-25.5 185,-31.5 185,-31.5 185,-47.5 185,-47.5 185,-53.5 179,-59.5 173,-59.5 173,-59.5 120,-59.5 120,-59.5 114,-59.5 108,-53.5 108,-47.5 108,-47.5 108,-31.5 108,-31.5 108,-25.5 114,-19.5 120,-19.5"/>
<text text-anchor="middle" x="146.5" y="-46.7" font-family="monospace" font-size="11.00" fill="#f8f8f2">data</text>
<polyline fill="none" stroke="#666666" points="108,-39.5 185,-39.5 "/>
<text text-anchor="middle" x="146.5" y="-26.7" font-family="monospace" font-size="11.00" fill="#f8f8f2">&quot;finally&quot;</text>
</g>
<!-- item&#45;&gt;value -->
<g id="edge5" class="edge">
<title>item&#45;&gt;value</title>
<path fill="none" stroke="#888888" d="M146.5,-96.19C146.5,-87.26 146.5,-76.53 146.5,-66.87"/>
<polygon fill="#888888" stroke="#888888" points="148.95,-66.75 146.5,-59.75 144.05,-66.75 148.95,-66.75"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.4 KiB

View file

@ -0,0 +1,68 @@
<?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 2.43.0 (0)
-->
<!-- Title: format_wars Pages: 1 -->
<svg width="231pt" height="171pt"
viewBox="0.00 0.00 231.00 171.00" 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 167)">
<title>format_wars</title>
<text text-anchor="middle" x="111.5" y="-7" font-family="monospace" font-size="10.00" fill="#888888">rivals who never stood a chance</text>
<!-- json -->
<g id="node1" class="node">
<title>json</title>
<path fill="#44475a" stroke="#666666" d="M42,-109C42,-109 12,-109 12,-109 6,-109 0,-103 0,-97 0,-97 0,-85 0,-85 0,-79 6,-73 12,-73 12,-73 42,-73 42,-73 48,-73 54,-79 54,-85 54,-85 54,-97 54,-97 54,-103 48,-109 42,-109"/>
<text text-anchor="middle" x="27" y="-94.2" font-family="monospace" font-size="11.00" fill="#50fa7b">JSON</text>
<text text-anchor="middle" x="27" y="-82.2" font-family="monospace" font-size="11.00" fill="#50fa7b">{}</text>
</g>
<!-- yaml -->
<g id="node2" class="node">
<title>yaml</title>
<path fill="#2d2d2d" stroke="#666666" d="M211,-163C211,-163 181,-163 181,-163 175,-163 169,-157 169,-151 169,-151 169,-139 169,-139 169,-133 175,-127 181,-127 181,-127 211,-127 211,-127 217,-127 223,-133 223,-139 223,-139 223,-151 223,-151 223,-157 217,-163 211,-163"/>
<text text-anchor="middle" x="196" y="-148.2" font-family="monospace" font-size="11.00" fill="#ffb86c">YAML</text>
<text text-anchor="middle" x="196" y="-136.2" font-family="monospace" font-size="11.00" fill="#ffb86c"> &#160;:</text>
</g>
<!-- json&#45;&gt;yaml -->
<g id="edge1" class="edge">
<title>json&#45;&gt;yaml</title>
<path fill="none" stroke="#888888" stroke-dasharray="5,2" d="M63.44,-111.33C66.29,-112.66 69.17,-113.9 72,-115 100.34,-125.97 133.94,-133.84 158.86,-138.76"/>
<polygon fill="#888888" stroke="#888888" points="64.97,-108.19 54.46,-106.87 61.86,-114.46 64.97,-108.19"/>
<polygon fill="#888888" stroke="#888888" points="158.49,-142.25 168.96,-140.69 159.8,-135.38 158.49,-142.25"/>
<text text-anchor="middle" x="111.5" y="-149.8" font-family="monospace" font-size="9.00" fill="#888888">NO = false</text>
<text text-anchor="middle" x="111.5" y="-139.8" font-family="monospace" font-size="9.00" fill="#888888">3.10 = 3.1</text>
</g>
<!-- xml -->
<g id="node3" class="node">
<title>xml</title>
<path fill="#2d2d2d" stroke="#666666" d="M211,-109C211,-109 181,-109 181,-109 175,-109 169,-103 169,-97 169,-97 169,-85 169,-85 169,-79 175,-73 181,-73 181,-73 211,-73 211,-73 217,-73 223,-79 223,-85 223,-85 223,-97 223,-97 223,-103 217,-109 211,-109"/>
<text text-anchor="middle" x="196" y="-94.2" font-family="monospace" font-size="11.00" fill="#ff5555">XML</text>
<text text-anchor="middle" x="196" y="-82.2" font-family="monospace" font-size="11.00" fill="#ff5555">&lt;/&gt;</text>
</g>
<!-- json&#45;&gt;xml -->
<g id="edge2" class="edge">
<title>json&#45;&gt;xml</title>
<path fill="none" stroke="#888888" stroke-dasharray="5,2" d="M64.23,-91C92.18,-91 130.67,-91 158.65,-91"/>
<polygon fill="#888888" stroke="#888888" points="64.09,-87.5 54.09,-91 64.09,-94.5 64.09,-87.5"/>
<polygon fill="#888888" stroke="#888888" points="158.81,-94.5 168.81,-91 158.81,-87.5 158.81,-94.5"/>
<text text-anchor="middle" x="111.5" y="-103.8" font-family="monospace" font-size="9.00" fill="#888888">45 minutes</text>
<text text-anchor="middle" x="111.5" y="-93.8" font-family="monospace" font-size="9.00" fill="#888888">then crawl back</text>
</g>
<!-- toml -->
<g id="node4" class="node">
<title>toml</title>
<path fill="#2d2d2d" stroke="#666666" d="M211,-55C211,-55 181,-55 181,-55 175,-55 169,-49 169,-43 169,-43 169,-31 169,-31 169,-25 175,-19 181,-19 181,-19 211,-19 211,-19 217,-19 223,-25 223,-31 223,-31 223,-43 223,-43 223,-49 217,-55 211,-55"/>
<text text-anchor="middle" x="196" y="-40.2" font-family="monospace" font-size="11.00" fill="#8be9fd">TOML</text>
<text text-anchor="middle" x="196" y="-28.2" font-family="monospace" font-size="11.00" fill="#8be9fd">[.]</text>
</g>
<!-- json&#45;&gt;toml -->
<g id="edge3" class="edge">
<title>json&#45;&gt;toml</title>
<path fill="none" stroke="#888888" stroke-dasharray="5,2" d="M63.44,-70.67C66.29,-69.34 69.17,-68.1 72,-67 100.34,-56.03 133.94,-48.16 158.86,-43.24"/>
<polygon fill="#888888" stroke="#888888" points="61.86,-67.54 54.46,-75.13 64.97,-73.81 61.86,-67.54"/>
<polygon fill="#888888" stroke="#888888" points="159.8,-46.62 168.96,-41.31 158.49,-39.75 159.8,-46.62"/>
<text text-anchor="middle" x="111.5" y="-79.8" font-family="monospace" font-size="9.00" fill="#888888">studio apt</text>
<text text-anchor="middle" x="111.5" y="-69.8" font-family="monospace" font-size="9.00" fill="#888888">vs warehouse</text>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.8 KiB