From b39fb756bfb3c52e43198006c932d1264918d2a6 Mon Sep 17 00:00:00 2001
From: Thomas Hintz <t@thintz.com>
Date: Thu, 10 Sep 2020 08:59:57 -0700
Subject: [PATCH] Testing image with caption.

---
 foundations-high-performance-react.org        | 37 +++++--------
 manuscript/image-test.markua                  |  3 +-
 .../resources/images/render-tree-basic.svg    | 55 +++++++++++++++++++
 3 files changed, 70 insertions(+), 25 deletions(-)
 create mode 100644 manuscript/resources/images/render-tree-basic.svg

diff --git a/foundations-high-performance-react.org b/foundations-high-performance-react.org
index 2b6e64d..5fcebf4 100644
--- a/foundations-high-performance-react.org
+++ b/foundations-high-performance-react.org
@@ -791,34 +791,23 @@ only the start of your High-Performance React journey.
 :PROPERTIES:
 :EXPORT_FILE_NAME: manuscript/image-test.markua
 :END:
-#+name: workflow-diagram
-#+begin_src dot :file "./images/high-level-workflow.svg" :exports results :cmdline -Tsvg
+#+name: render-tree-basic
+#+begin_src dot :file "./images/render-tree-basic.svg" :exports results :cmdline -Tsvg
   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"];
+     a [label="A", shape=oval, fillcolor=yellow, style=filled];
+     b [label="B", shape=oval];
+     c [label="C", shape=oval];
+     note [label="State Changed", shape=box]
+     note -> a;
+     a -> b;
+     a -> c;
+     { rank=same; note; a; }
   }
 #+end_src
 
-#+RESULTS: workflow-diagram
-[[file:./images/high-level-workflow.svg]]
+#+caption: Tree of components
+#+RESULTS: render-tree-basic
+[[file:./images/render-tree-basic.svg]]
diff --git a/manuscript/image-test.markua b/manuscript/image-test.markua
index 4ba1515..347c3d5 100644
--- a/manuscript/image-test.markua
+++ b/manuscript/image-test.markua
@@ -1,5 +1,6 @@
 # Image Test
 
-![](./images/high-level-workflow.svg) 
+{caption: "Tree of components"}
+![Tree of components](./images/render-tree-basic.svg) 
 
 
diff --git a/manuscript/resources/images/render-tree-basic.svg b/manuscript/resources/images/render-tree-basic.svg
new file mode 100644
index 0000000..dd017ad
--- /dev/null
+++ b/manuscript/resources/images/render-tree-basic.svg
@@ -0,0 +1,55 @@
+<?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="236pt" height="116pt"
+ viewBox="0.00 0.00 235.50 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>%3</title>
+<polygon fill="white" stroke="transparent" points="-4,4 -4,-112 231.5,-112 231.5,4 -4,4"/>
+<!-- a -->
+<g id="node1" class="node">
+<title>a</title>
+<ellipse fill="yellow" stroke="black" cx="164.5" cy="-90" rx="27" ry="18"/>
+<text text-anchor="middle" x="164.5" y="-86.3" font-family="DejaVu Sans" font-size="14.00">A</text>
+</g>
+<!-- b -->
+<g id="node2" class="node">
+<title>b</title>
+<ellipse fill="none" stroke="black" cx="128.5" cy="-18" rx="27" ry="18"/>
+<text text-anchor="middle" x="128.5" y="-14.3" font-family="DejaVu Sans" font-size="14.00">B</text>
+</g>
+<!-- a&#45;&gt;b -->
+<g id="edge2" class="edge">
+<title>a&#45;&gt;b</title>
+<path fill="none" stroke="black" d="M156.15,-72.76C151.79,-64.28 146.35,-53.71 141.46,-44.2"/>
+<polygon fill="black" stroke="black" points="144.49,-42.44 136.8,-35.15 138.27,-45.64 144.49,-42.44"/>
+</g>
+<!-- c -->
+<g id="node3" class="node">
+<title>c</title>
+<ellipse fill="none" stroke="black" cx="200.5" cy="-18" rx="27" ry="18"/>
+<text text-anchor="middle" x="200.5" y="-14.3" font-family="DejaVu Sans" font-size="14.00">C</text>
+</g>
+<!-- a&#45;&gt;c -->
+<g id="edge3" class="edge">
+<title>a&#45;&gt;c</title>
+<path fill="none" stroke="black" d="M172.85,-72.76C177.21,-64.28 182.65,-53.71 187.54,-44.2"/>
+<polygon fill="black" stroke="black" points="190.73,-45.64 192.2,-35.15 184.51,-42.44 190.73,-45.64"/>
+</g>
+<!-- note -->
+<g id="node4" class="node">
+<title>note</title>
+<polygon fill="none" stroke="black" points="119,-108 0,-108 0,-72 119,-72 119,-108"/>
+<text text-anchor="middle" x="59.5" y="-86.3" font-family="DejaVu Sans" font-size="14.00">State Changed</text>
+</g>
+<!-- note&#45;&gt;a -->
+<g id="edge1" class="edge">
+<title>note&#45;&gt;a</title>
+<path fill="none" stroke="black" d="M119.38,-90C122,-90 124.63,-90 127.25,-90"/>
+<polygon fill="black" stroke="black" points="127.36,-93.5 137.36,-90 127.36,-86.5 127.36,-93.5"/>
+</g>
+</g>
+</svg>