diff --git a/foundations-high-performance-react.org b/foundations-high-performance-react.org
index 393f9a3..2b6e64d 100644
--- a/foundations-high-performance-react.org
+++ b/foundations-high-performance-react.org
@@ -792,7 +792,7 @@ only the start of your High-Performance React journey.
 :EXPORT_FILE_NAME: manuscript/image-test.markua
 :END:
 #+name: workflow-diagram
-#+begin_src dot :file "./images/high-level-workflow.png" :exports both
+#+begin_src dot :file "./images/high-level-workflow.svg" :exports results :cmdline -Tsvg
   digraph {
      rankdir=TB;
      node [fontname="DejaVu Sans"];
@@ -821,4 +821,4 @@ only the start of your High-Performance React journey.
 #+end_src
 
 #+RESULTS: workflow-diagram
-[[file:./images/high-level-workflow.png]]
+[[file:./images/high-level-workflow.svg]]
diff --git a/manuscript/image-test.markua b/manuscript/image-test.markua
index 11278a4..4ba1515 100644
--- a/manuscript/image-test.markua
+++ b/manuscript/image-test.markua
@@ -1,34 +1,5 @@
 # Image Test
 
-{format: "dot", id: "workflow-diagram"}
-```
-digraph {
-   rankdir=TB;
-   node [fontname="DejaVu Sans"];
-   edge [fontname="DejaVu Sans"];
-   files [label="Source files\n(Org doc, figures, etc.)", shape=oval];
-   emacs [label="Emacs + org-mode",
-          fillcolor=purple, fontcolor=white, style=filled, shape=box];
-   manuscript [label="Leanpub manuscript\n(Markua + other files)",
-               fillcolor=yellow, style=filled, shape=oval];
-   leanpub [label="Leanpub",
-            fillcolor=blue, fontcolor=white, style=filled, shape=box];
-   git [label="Git repo", fillcolor=red, style=filled, shape=box];
-   preview [label="Book preview",
-            fillcolor=grey, style=filled, shape=oval];
-   book [label="Book (PDF,\nePub, mobi, online)",
-         shape=oval, fillcolor=green, style=filled];
-   files -> emacs      [label="Edit"];
-   emacs -> manuscript [label="Export"];
-   manuscript -> git   [label="Commit"];
-   git -> leanpub      [label="Typeset"];
-   leanpub -> book     [label="Publish"];
-   book -> emacs       [label="Update"];
-   leanpub -> preview  [label="Preview"];
-   preview -> emacs    [label="Update"];
-}
-```
-
-![](./images/high-level-workflow.png) 
+![](./images/high-level-workflow.svg) 
 
 
diff --git a/manuscript/resources/images/high-level-workflow.png b/manuscript/resources/images/high-level-workflow.png
index e33bd24..d5b4702 100644
Binary files a/manuscript/resources/images/high-level-workflow.png and b/manuscript/resources/images/high-level-workflow.png differ
diff --git a/manuscript/resources/images/high-level-workflow.svg b/manuscript/resources/images/high-level-workflow.svg
new file mode 100644
index 0000000..7c1553d
--- /dev/null
+++ b/manuscript/resources/images/high-level-workflow.svg
@@ -0,0 +1,114 @@
+<?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: %3 Pages: 1 -->
+<svg width="432pt" height="532pt"
+ viewBox="0.00 0.00 432.27 532.22" 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 528.22)">
+<title>%3</title>
+<polygon fill="white" stroke="transparent" points="-4,4 -4,-528.22 428.27,-528.22 428.27,4 -4,4"/>
+<!-- files -->
+<g id="node1" class="node">
+<title>files</title>
+<ellipse fill="none" stroke="black" cx="194.49" cy="-497.35" rx="122.16" ry="26.74"/>
+<text text-anchor="middle" x="194.49" y="-501.15" font-family="DejaVu Sans" font-size="14.00">Source files</text>
+<text text-anchor="middle" x="194.49" y="-486.15" font-family="DejaVu Sans" font-size="14.00">(Org doc, figures, etc.)</text>
+</g>
+<!-- emacs -->
+<g id="node2" class="node">
+<title>emacs</title>
+<polygon fill="purple" stroke="black" points="269.49,-419.48 119.49,-419.48 119.49,-383.48 269.49,-383.48 269.49,-419.48"/>
+<text text-anchor="middle" x="194.49" y="-397.78" font-family="DejaVu Sans" font-size="14.00" fill="white">Emacs + org&#45;mode</text>
+</g>
+<!-- files&#45;&gt;emacs -->
+<g id="edge1" class="edge">
+<title>files&#45;&gt;emacs</title>
+<path fill="none" stroke="black" d="M194.49,-470.45C194.49,-457.82 194.49,-442.62 194.49,-429.8"/>
+<polygon fill="black" stroke="black" points="197.99,-429.7 194.49,-419.7 190.99,-429.7 197.99,-429.7"/>
+<text text-anchor="middle" x="208.49" y="-441.28" font-family="DejaVu Sans" font-size="14.00">Edit</text>
+</g>
+<!-- manuscript -->
+<g id="node3" class="node">
+<title>manuscript</title>
+<ellipse fill="yellow" stroke="black" cx="194.49" cy="-305.61" rx="119.5" ry="26.74"/>
+<text text-anchor="middle" x="194.49" y="-309.41" font-family="DejaVu Sans" font-size="14.00">Leanpub manuscript</text>
+<text text-anchor="middle" x="194.49" y="-294.41" font-family="DejaVu Sans" font-size="14.00">(Markua + other files)</text>
+</g>
+<!-- emacs&#45;&gt;manuscript -->
+<g id="edge2" class="edge">
+<title>emacs&#45;&gt;manuscript</title>
+<path fill="none" stroke="black" d="M194.49,-383.26C194.49,-371.96 194.49,-356.75 194.49,-342.86"/>
+<polygon fill="black" stroke="black" points="197.99,-342.58 194.49,-332.58 190.99,-342.58 197.99,-342.58"/>
+<text text-anchor="middle" x="217.49" y="-354.28" font-family="DejaVu Sans" font-size="14.00">Export</text>
+</g>
+<!-- git -->
+<g id="node5" class="node">
+<title>git</title>
+<polygon fill="red" stroke="black" points="229.99,-227.74 158.99,-227.74 158.99,-191.74 229.99,-191.74 229.99,-227.74"/>
+<text text-anchor="middle" x="194.49" y="-206.04" font-family="DejaVu Sans" font-size="14.00">Git repo</text>
+</g>
+<!-- manuscript&#45;&gt;git -->
+<g id="edge3" class="edge">
+<title>manuscript&#45;&gt;git</title>
+<path fill="none" stroke="black" d="M194.49,-278.71C194.49,-266.08 194.49,-250.88 194.49,-238.06"/>
+<polygon fill="black" stroke="black" points="197.99,-237.96 194.49,-227.96 190.99,-237.96 197.99,-237.96"/>
+<text text-anchor="middle" x="221.99" y="-249.54" font-family="DejaVu Sans" font-size="14.00">Commit</text>
+</g>
+<!-- leanpub -->
+<g id="node4" class="node">
+<title>leanpub</title>
+<polygon fill="blue" stroke="black" points="232.99,-140.74 155.99,-140.74 155.99,-104.74 232.99,-104.74 232.99,-140.74"/>
+<text text-anchor="middle" x="194.49" y="-119.04" font-family="DejaVu Sans" font-size="14.00" fill="white">Leanpub</text>
+</g>
+<!-- preview -->
+<g id="node6" class="node">
+<title>preview</title>
+<ellipse fill="grey" stroke="black" cx="71.49" cy="-26.87" rx="71.49" ry="18"/>
+<text text-anchor="middle" x="71.49" y="-23.17" font-family="DejaVu Sans" font-size="14.00">Book preview</text>
+</g>
+<!-- leanpub&#45;&gt;preview -->
+<g id="edge7" class="edge">
+<title>leanpub&#45;&gt;preview</title>
+<path fill="none" stroke="black" d="M171.93,-104.52C152.01,-89.32 122.82,-67.04 101.04,-50.42"/>
+<polygon fill="black" stroke="black" points="103.16,-47.63 93.09,-44.35 98.91,-53.2 103.16,-47.63"/>
+<text text-anchor="middle" x="175.49" y="-75.54" font-family="DejaVu Sans" font-size="14.00">Preview</text>
+</g>
+<!-- book -->
+<g id="node7" class="node">
+<title>book</title>
+<ellipse fill="green" stroke="black" cx="317.49" cy="-26.87" rx="106.55" ry="26.74"/>
+<text text-anchor="middle" x="317.49" y="-30.67" font-family="DejaVu Sans" font-size="14.00">Book (PDF,</text>
+<text text-anchor="middle" x="317.49" y="-15.67" font-family="DejaVu Sans" font-size="14.00">ePub, mobi, online)</text>
+</g>
+<!-- leanpub&#45;&gt;book -->
+<g id="edge5" class="edge">
+<title>leanpub&#45;&gt;book</title>
+<path fill="none" stroke="black" d="M217.05,-104.52C233.76,-91.78 256.97,-74.06 276.87,-58.87"/>
+<polygon fill="black" stroke="black" points="279.05,-61.61 284.88,-52.76 274.81,-56.04 279.05,-61.61"/>
+<text text-anchor="middle" x="285.99" y="-75.54" font-family="DejaVu Sans" font-size="14.00">Publish</text>
+</g>
+<!-- git&#45;&gt;leanpub -->
+<g id="edge4" class="edge">
+<title>git&#45;&gt;leanpub</title>
+<path fill="none" stroke="black" d="M194.49,-191.54C194.49,-179.9 194.49,-164.29 194.49,-150.98"/>
+<polygon fill="black" stroke="black" points="197.99,-150.92 194.49,-140.92 190.99,-150.92 197.99,-150.92"/>
+<text text-anchor="middle" x="220.99" y="-162.54" font-family="DejaVu Sans" font-size="14.00">Typeset</text>
+</g>
+<!-- preview&#45;&gt;emacs -->
+<g id="edge8" class="edge">
+<title>preview&#45;&gt;emacs</title>
+<path fill="none" stroke="black" d="M64.13,-44.81C56.75,-63.34 46.49,-94.08 46.49,-121.74 46.49,-306.61 46.49,-306.61 46.49,-306.61 46.49,-342.77 78.38,-365.58 112.55,-379.65"/>
+<polygon fill="black" stroke="black" points="111.64,-383.05 122.23,-383.39 114.16,-376.52 111.64,-383.05"/>
+<text text-anchor="middle" x="71.99" y="-206.04" font-family="DejaVu Sans" font-size="14.00">Update</text>
+</g>
+<!-- book&#45;&gt;emacs -->
+<g id="edge6" class="edge">
+<title>book&#45;&gt;emacs</title>
+<path fill="none" stroke="black" d="M328.24,-53.68C335.02,-72.27 342.49,-98.13 342.49,-121.74 342.49,-306.61 342.49,-306.61 342.49,-306.61 342.49,-342.77 310.61,-365.58 276.43,-379.65"/>
+<polygon fill="black" stroke="black" points="274.82,-376.52 266.76,-383.39 277.35,-383.05 274.82,-376.52"/>
+<text text-anchor="middle" x="367.99" y="-206.04" font-family="DejaVu Sans" font-size="14.00">Update</text>
+</g>
+</g>
+</svg>