Adopting a text-based diagram syntax in Jupyter Markdown

bollwyvl · bollwyvl · commit 0306b106ea8c · 2023-03-14T18:44:20.000-05:00
diff --git a/.gitignore b/.gitignore
@@ -31,3 +31,6 @@ _build
 
 # Python files
 __pycache__
+
+# Jupyter Server
+.ipynb_checkpoints/
diff --git a/xx-text-based-diagrams-in-markdown/example.dot.svg b/xx-text-based-diagrams-in-markdown/example.dot.svg
@@ -0,0 +1,38 @@
+<?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.40.1 (20161225.0304)
+ -->
+<!-- Title: LR Pages: 1 -->
+<svg width="90pt" height="116pt"
+ viewBox="0.00 0.00 90.13 116.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 112)">
+<title>LR</title>
+<polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-112 86.1315,-112 86.1315,4 -4,4"/>
+<!-- chicken -->
+<g id="node1" class="node">
+<title>chicken</title>
+<ellipse fill="none" stroke="#000000" cx="41.0657" cy="-90" rx="41.1316" ry="18"/>
+<text text-anchor="middle" x="41.0657" y="-85.8" font-family="Times,serif" font-size="14.00" fill="#000000">chicken</text>
+</g>
+<!-- egg -->
+<g id="node2" class="node">
+<title>egg</title>
+<ellipse fill="none" stroke="#000000" cx="41.0657" cy="-18" rx="27" ry="18"/>
+<text text-anchor="middle" x="41.0657" y="-13.8" font-family="Times,serif" font-size="14.00" fill="#000000">egg</text>
+</g>
+<!-- chicken&#45;&gt;egg -->
+<g id="edge1" class="edge">
+<title>chicken&#45;&gt;egg</title>
+<path fill="none" stroke="#000000" d="M35.1134,-71.8314C34.3514,-64.0125 34.1354,-54.6923 34.4653,-46.0221"/>
+<polygon fill="#000000" stroke="#000000" points="37.9662,-46.1239 35.1385,-35.9134 30.9816,-45.6587 37.9662,-46.1239"/>
+</g>
+<!-- egg&#45;&gt;chicken -->
+<g id="edge2" class="edge">
+<title>egg&#45;&gt;chicken</title>
+<path fill="none" stroke="#000000" d="M46.993,-35.9134C47.7669,-43.6993 47.9948,-53.01 47.6768,-61.6941"/>
+<polygon fill="#000000" stroke="#000000" points="44.174,-61.6254 47.0181,-71.8314 51.1592,-62.0794 44.174,-61.6254"/>
+</g>
+</g>
+</svg>
+
diff --git a/xx-text-based-diagrams-in-markdown/example.mermaid.svg b/xx-text-based-diagrams-in-markdown/example.mermaid.svg
@@ -0,0 +1,2 @@
+
+<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="-8 -8 181.546875 52.5" style="max-width: 181.546875px;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="jp-mermaid-1"><style>#jp-mermaid-1{font-family:system-ui,-apple-system,blinkmacsystemfont,"Segoe UI",helvetica,arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:16px;fill:#333;}#jp-mermaid-1 .error-icon{fill:#552222;}#jp-mermaid-1 .error-text{fill:#552222;stroke:#552222;}#jp-mermaid-1 .edge-thickness-normal{stroke-width:2px;}#jp-mermaid-1 .edge-thickness-thick{stroke-width:3.5px;}#jp-mermaid-1 .edge-pattern-solid{stroke-dasharray:0;}#jp-mermaid-1 .edge-pattern-dashed{stroke-dasharray:3;}#jp-mermaid-1 .edge-pattern-dotted{stroke-dasharray:2;}#jp-mermaid-1 .marker{fill:#333333;stroke:#333333;}#jp-mermaid-1 .marker.cross{stroke:#333333;}#jp-mermaid-1 svg{font-family:system-ui,-apple-system,blinkmacsystemfont,"Segoe UI",helvetica,arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:16px;}#jp-mermaid-1 .label{font-family:system-ui,-apple-system,blinkmacsystemfont,"Segoe UI",helvetica,arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";color:#333;}#jp-mermaid-1 .cluster-label text{fill:#333;}#jp-mermaid-1 .cluster-label span{color:#333;}#jp-mermaid-1 .label text,#jp-mermaid-1 span{fill:#333;color:#333;}#jp-mermaid-1 .node rect,#jp-mermaid-1 .node circle,#jp-mermaid-1 .node ellipse,#jp-mermaid-1 .node polygon,#jp-mermaid-1 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#jp-mermaid-1 .node .label{text-align:center;}#jp-mermaid-1 .node.clickable{cursor:pointer;}#jp-mermaid-1 .arrowheadPath{fill:#333333;}#jp-mermaid-1 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#jp-mermaid-1 .flowchart-link{stroke:#333333;fill:none;}#jp-mermaid-1 .edgeLabel{background-color:#e8e8e8;text-align:center;}#jp-mermaid-1 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#jp-mermaid-1 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#jp-mermaid-1 .cluster text{fill:#333;}#jp-mermaid-1 .cluster span{color:#333;}#jp-mermaid-1 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:system-ui,-apple-system,blinkmacsystemfont,"Segoe UI",helvetica,arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#jp-mermaid-1 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#jp-mermaid-1 :root{--mermaid-font-family:system-ui,-apple-system,blinkmacsystemfont,"Segoe UI",helvetica,arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}</style><g><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="10" viewBox="0 0 12 20" class="marker flowchart" id="flowchart-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"></path></marker><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="0" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart" id="flowchart-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart" id="flowchart-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path marker-end="url(#flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-chicken LE-egg" id="L-chicken-egg-0" d="M71.836,12.354L76.003,11.67C80.169,10.986,88.503,9.618,96.836,9.823C105.169,10.029,113.503,11.807,117.669,12.696L121.836,13.586"></path><path marker-end="url(#flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-egg LE-chicken" id="L-egg-chicken-0" d="M121.836,22.914L117.669,23.804C113.503,24.693,105.169,26.471,96.836,26.677C88.503,26.882,80.169,25.514,76.003,24.83L71.836,24.146"></path></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(35.91796875, 18.25)" id="flowchart-chicken-12" class="node default default"><rect height="36.5" width="71.8359375" y="-18.25" x="-35.91796875" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-28.41796875, -10.75)" style="" class="label"><foreignObject height="21.5" width="56.8359375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">chicken</span></div></foreignObject></g></g><g transform="translate(143.69140625, 18.25)" id="flowchart-egg-13" class="node default default"><rect height="36.5" width="43.7109375" y="-18.25" x="-21.85546875" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-14.35546875, -10.75)" style="" class="label"><foreignObject height="21.5" width="28.7109375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">egg</span></div></foreignObject></g></g></g></g></g></svg>
diff --git a/xx-text-based-diagrams-in-markdown/example.plantuml.svg b/xx-text-based-diagrams-in-markdown/example.plantuml.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="us-ascii" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="170px" preserveAspectRatio="none" style="width:104px;height:170px;background:#FFFFFF;" version="1.1" viewBox="0 0 104 170" width="104px" zoomAndPan="magnify"><defs/><g><!--class Chicken--><g id="elem_Chicken"><rect codeLine="1" fill="#F1F1F1" height="48" id="Chicken" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="90" x="7" y="115"/><ellipse cx="22" cy="131" fill="#ADD1B2" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M24.3438,126.6719 C23.4063,126.2344 22.8125,126.0938 21.9375,126.0938 C19.3125,126.0938 17.3125,128.1719 17.3125,130.8906 L17.3125,132.0156 C17.3125,134.5938 19.4219,136.4844 22.3125,136.4844 C23.5313,136.4844 24.6875,136.1875 25.4375,135.6406 C26.0156,135.2344 26.3438,134.7813 26.3438,134.3906 C26.3438,133.9375 25.9531,133.5469 25.4844,133.5469 C25.2656,133.5469 25.0625,133.625 24.875,133.8125 C24.4219,134.2969 24.4219,134.2969 24.2344,134.3906 C23.8125,134.6563 23.125,134.7813 22.3594,134.7813 C20.3125,134.7813 19.0156,133.6875 19.0156,131.9844 L19.0156,130.8906 C19.0156,129.1094 20.2656,127.7969 22,127.7969 C22.5781,127.7969 23.1875,127.9531 23.6563,128.2031 C24.1406,128.4844 24.3125,128.7031 24.4063,129.1094 C24.4688,129.5156 24.5,129.6406 24.6406,129.7656 C24.7813,129.9063 25.0156,130.0156 25.2344,130.0156 C25.5,130.0156 25.7656,129.875 25.9375,129.6563 C26.0469,129.5 26.0781,129.3125 26.0781,128.8906 L26.0781,127.4688 C26.0781,127.0313 26.0625,126.9063 25.9688,126.75 C25.8125,126.4844 25.5313,126.3438 25.2344,126.3438 C24.9375,126.3438 24.7344,126.4375 24.5156,126.75 L24.3438,126.6719 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="58" x="36" y="135.8467">Chicken</text><line style="stroke:#181818;stroke-width:0.5;" x1="8" x2="96" y1="147" y2="147"/><line style="stroke:#181818;stroke-width:0.5;" x1="8" x2="96" y1="155" y2="155"/></g><!--class Egg--><g id="elem_Egg"><rect codeLine="2" fill="#F1F1F1" height="48" id="Egg" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="59" x="22.5" y="7"/><ellipse cx="37.5" cy="23" fill="#ADD1B2" rx="11" ry="11" style="stroke:#181818;stroke-width:1.0;"/><path d="M39.8438,18.6719 C38.9063,18.2344 38.3125,18.0938 37.4375,18.0938 C34.8125,18.0938 32.8125,20.1719 32.8125,22.8906 L32.8125,24.0156 C32.8125,26.5938 34.9219,28.4844 37.8125,28.4844 C39.0313,28.4844 40.1875,28.1875 40.9375,27.6406 C41.5156,27.2344 41.8438,26.7813 41.8438,26.3906 C41.8438,25.9375 41.4531,25.5469 40.9844,25.5469 C40.7656,25.5469 40.5625,25.625 40.375,25.8125 C39.9219,26.2969 39.9219,26.2969 39.7344,26.3906 C39.3125,26.6563 38.625,26.7813 37.8594,26.7813 C35.8125,26.7813 34.5156,25.6875 34.5156,23.9844 L34.5156,22.8906 C34.5156,21.1094 35.7656,19.7969 37.5,19.7969 C38.0781,19.7969 38.6875,19.9531 39.1563,20.2031 C39.6406,20.4844 39.8125,20.7031 39.9063,21.1094 C39.9688,21.5156 40,21.6406 40.1406,21.7656 C40.2813,21.9063 40.5156,22.0156 40.7344,22.0156 C41,22.0156 41.2656,21.875 41.4375,21.6563 C41.5469,21.5 41.5781,21.3125 41.5781,20.8906 L41.5781,19.4688 C41.5781,19.0313 41.5625,18.9063 41.4688,18.75 C41.3125,18.4844 41.0313,18.3438 40.7344,18.3438 C40.4375,18.3438 40.2344,18.4375 40.0156,18.75 L39.8438,18.6719 Z " fill="#000000"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="27" x="51.5" y="27.8467">Egg</text><line style="stroke:#181818;stroke-width:0.5;" x1="23.5" x2="80.5" y1="39" y2="39"/><line style="stroke:#181818;stroke-width:0.5;" x1="23.5" x2="80.5" y1="47" y2="47"/></g><!--reverse link Egg to Chicken--><g id="link_Egg_Chicken"><path codeLine="3" d="M39.4529,75.0236 C38.8955,88.5792 39.4864,103.0381 41.2257,114.6784 " fill="none" id="Egg-backto-Chicken" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="none" points="32.4912,74.2841,41.2741,55,46.4336,75.5523,32.4912,74.2841" style="stroke:#181818;stroke-width:1.0;"/></g><!--link Egg to Chicken--><g id="link_Egg_Chicken"><path codeLine="4" d="M63.3568,55 C65.5315,68.5198 66.0512,85.9223 64.9159,101.2977 " fill="none" id="Egg-to-Chicken" style="stroke:#181818;stroke-width:1.0;"/><polygon fill="#181818" points="63.4081,114.6784,68.0549,109.1641,64.752,102.7539,60.1052,108.2682,63.4081,114.6784" style="stroke:#181818;stroke-width:1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="37" x="24.5264" y="75.1558">many</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="8" x="57.2138" y="104.005">1</text></g><!--SRC=[Iyv9B2vMSCx8JCvEpUDA1lDSqzEvW5Z1faOt9RyyJnSk3QKLb0oL5BHqImjq5PHo4_CgbK0w0000]--></g></svg>
diff --git a/xx-text-based-diagrams-in-markdown/text-based-diagrams.md b/xx-text-based-diagrams-in-markdown/text-based-diagrams.md
