vim-literate-markdown

commit 7f7709ab70701b788ae4a9772628ee7cd9106b52
parent 9539f297006e2c7c9d70c739b24f3c62248f29df
Author: Alex Balgavy <alex@balgavy.eu>
Date:   Mon, 28 Mar 2022 12:21:49 +0200

Another example

Diffstat:
A
examples/first-diagram.dot
 | 
7
+++++++
A
examples/first-diagram.dot.svg
 | 
67
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
A
examples/graphs.md
 | 
44
++++++++++++++++++++++++++++++++++++++++++++
A
examples/second-diagram.dot
 | 
5
+++++
A
examples/second-diagram.dot.svg
 | 
37
+++++++++++++++++++++++++++++++++++++

5 files changed, 160 insertions(+), 0 deletions(-)
diff --git a/examples/first-diagram.dot b/examples/first-diagram.dot
@@ -0,0 +1,7 @@
+graph t {
+a -- b [label="x"]
+a -- c [label="y"]
+c -- d [label="y"]
+c -- e [label="z"]
+}
+
diff --git a/examples/first-diagram.dot.svg b/examples/first-diagram.dot.svg
@@ -0,0 +1,67 @@
+<?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.50.0 (20211204.2007)
+ -->
+<!-- Title: t Pages: 1 -->
+<svg width="170pt" height="218pt"
+ viewBox="0.00 0.00 170.00 218.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 214)">
+<title>t</title>
+<polygon fill="white" stroke="transparent" points="-4,4 -4,-214 166,-214 166,4 -4,4"/>
+<!-- a -->
+<g id="node1" class="node">
+<title>a</title>
+<ellipse fill="none" stroke="black" cx="52" cy="-192" rx="27" ry="18"/>
+<text text-anchor="middle" x="52" y="-188.3" font-family="Times,serif" font-size="14.00">a</text>
+</g>
+<!-- b -->
+<g id="node2" class="node">
+<title>b</title>
+<ellipse fill="none" stroke="black" cx="27" cy="-105" rx="27" ry="18"/>
+<text text-anchor="middle" x="27" y="-101.3" font-family="Times,serif" font-size="14.00">b</text>
+</g>
+<!-- a&#45;&#45;b -->
+<g id="edge1" class="edge">
+<title>a&#45;&#45;b</title>
+<path fill="none" stroke="black" d="M47.06,-174.21C42.68,-159.31 36.31,-137.65 31.93,-122.76"/>
+<text text-anchor="middle" x="44.5" y="-144.8" font-family="Times,serif" font-size="14.00">x</text>
+</g>
+<!-- c -->
+<g id="node3" class="node">
+<title>c</title>
+<ellipse fill="none" stroke="black" cx="99" cy="-105" rx="27" ry="18"/>
+<text text-anchor="middle" x="99" y="-101.3" font-family="Times,serif" font-size="14.00">c</text>
+</g>
+<!-- a&#45;&#45;c -->
+<g id="edge2" class="edge">
+<title>a&#45;&#45;c</title>
+<path fill="none" stroke="black" d="M61.06,-174.61C69.44,-159.46 81.81,-137.09 90.13,-122.05"/>
+<text text-anchor="middle" x="81.5" y="-144.8" font-family="Times,serif" font-size="14.00">y</text>
+</g>
+<!-- d -->
+<g id="node4" class="node">
+<title>d</title>
+<ellipse fill="none" stroke="black" cx="63" cy="-18" rx="27" ry="18"/>
+<text text-anchor="middle" x="63" y="-14.3" font-family="Times,serif" font-size="14.00">d</text>
+</g>
+<!-- c&#45;&#45;d -->
+<g id="edge3" class="edge">
+<title>c&#45;&#45;d</title>
+<path fill="none" stroke="black" d="M91.89,-87.21C85.54,-72.21 76.29,-50.37 69.98,-35.47"/>
+<text text-anchor="middle" x="86.5" y="-57.8" font-family="Times,serif" font-size="14.00">y</text>
+</g>
+<!-- e -->
+<g id="node5" class="node">
+<title>e</title>
+<ellipse fill="none" stroke="black" cx="135" cy="-18" rx="27" ry="18"/>
+<text text-anchor="middle" x="135" y="-14.3" font-family="Times,serif" font-size="14.00">e</text>
+</g>
+<!-- c&#45;&#45;e -->
+<g id="edge4" class="edge">
+<title>c&#45;&#45;e</title>
+<path fill="none" stroke="black" d="M106.11,-87.21C112.46,-72.21 121.71,-50.37 128.02,-35.47"/>
+<text text-anchor="middle" x="122.5" y="-57.8" font-family="Times,serif" font-size="14.00">z</text>
+</g>
+</g>
+</svg>
diff --git a/examples/graphs.md b/examples/graphs.md
@@ -0,0 +1,44 @@
+# Graphs
+This is an example that I've actually used in my lecture notes.
+Let's say I want to include a diagram, drawn programmatically.
+First, I include the image:
+
+![First diagram](first-diagram.dot.svg)
+
+Then I can add the code, folded away in a `details` tag.
+
+<details>
+<summary>Graphviz code</summary>
+
+<!-- :Tangle(dot) first-diagram.dot -->
+```dot
+graph t {
+a -- b [label="x"]
+a -- c [label="y"]
+c -- d [label="y"]
+c -- e [label="z"]
+}
+```
+
+</details>
+
+Then a second diagram, in the same way.
+
+![Second diagram](second-diagram.dot.svg)
+
+<details>
+<summary>Graphviz code</summary>
+
+<!-- :Tangle(dot) second-diagram.dot -->
+```dot
+digraph g {
+a -> b
+b -> a
+}
+```
+
+</details>
+
+Now in the markdown document, I just call `:Tangle` in Vim.
+I close the markdown document window, and run `:windo make`.
+My ftplugin for Dot files sets makeprg to `dot -Tsvg -O %`, which means the graphs will be simple to generate, and will be made with easily predictable filenames.
diff --git a/examples/second-diagram.dot b/examples/second-diagram.dot
@@ -0,0 +1,5 @@
+digraph g {
+a -> b
+b -> a
+}
+
diff --git a/examples/second-diagram.dot.svg b/examples/second-diagram.dot.svg
@@ -0,0 +1,37 @@
+<?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.50.0 (20211204.2007)
+ -->
+<!-- Title: g Pages: 1 -->
+<svg width="62pt" height="116pt"
+ viewBox="0.00 0.00 62.00 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>g</title>
+<polygon fill="white" stroke="transparent" points="-4,4 -4,-112 58,-112 58,4 -4,4"/>
+<!-- a -->
+<g id="node1" class="node">
+<title>a</title>
+<ellipse fill="none" stroke="black" cx="27" cy="-90" rx="27" ry="18"/>
+<text text-anchor="middle" x="27" y="-86.3" font-family="Times,serif" font-size="14.00">a</text>
+</g>
+<!-- b -->
+<g id="node2" class="node">
+<title>b</title>
+<ellipse fill="none" stroke="black" cx="27" cy="-18" rx="27" ry="18"/>
+<text text-anchor="middle" x="27" y="-14.3" font-family="Times,serif" font-size="14.00">b</text>
+</g>
+<!-- a&#45;&gt;b -->
+<g id="edge1" class="edge">
+<title>a&#45;&gt;b</title>
+<path fill="none" stroke="black" d="M21.16,-72.41C20.3,-64.51 20.05,-54.85 20.41,-45.94"/>
+<polygon fill="black" stroke="black" points="23.9,-46.18 21.12,-35.96 16.92,-45.68 23.9,-46.18"/>
+</g>
+<!-- b&#45;&gt;a -->
+<g id="edge2" class="edge">
+<title>b&#45;&gt;a</title>
+<path fill="none" stroke="black" d="M32.88,-35.96C33.71,-43.83 33.95,-53.37 33.58,-62.19"/>
+<polygon fill="black" stroke="black" points="30.07,-62.18 32.84,-72.41 37.06,-62.69 30.07,-62.18"/>
+</g>
+</g>
+</svg>