diff --git a/.github/workflows/doc-ci.yml b/.github/workflows/doc-ci.yml
index ca648b01e..f434a02d5 100644
--- a/.github/workflows/doc-ci.yml
+++ b/.github/workflows/doc-ci.yml
@@ -18,7 +18,7 @@ jobs:
     - name: install dependencies
       run: |
         sudo apt-get update
-        sudo apt-get install -y git virtualenv graphviz
+        sudo apt-get install -y git virtualenv
         virtualenv tmp/docs-virtualenv
         tmp/docs-virtualenv/bin/pip install -r docs/requirements.txt
     - name: build docs
diff --git a/docs/generate.sh b/docs/generate.sh
index ee4418b61..e817a8356 100755
--- a/docs/generate.sh
+++ b/docs/generate.sh
@@ -42,7 +42,7 @@ my_git() {
 assert_dependencies() {
   if [ "${DO_SETUP}" == "yes" ] ; then
     if ! (which dot && which virtualenv); then
-      sudo apt-get install -y git virtualenv graphviz
+      sudo apt-get install -y git virtualenv
     fi
     if [ ! -e "$OUTPUT_DIR/.git" ] ; then
       my_git clone --branch gw-pages --depth 1 "$SANDSTORM_DOC_URL" "$OUTPUT_DIR"
diff --git a/docs/requirements.txt b/docs/requirements.txt
index 7394b334d..bbde971b1 100644
--- a/docs/requirements.txt
+++ b/docs/requirements.txt
@@ -1,2 +1,3 @@
+jinja2==3.0.3
+markdown==3.3.7
 mkdocs==1.0.4
-mkdocs-markdown-graphviz==1.3
diff --git a/docs/using/communication_overview_http_app.svg b/docs/using/communication_overview_http_app.svg
new file mode 100644
index 000000000..16d3e0987
--- /dev/null
+++ b/docs/using/communication_overview_http_app.svg
@@ -0,0 +1,79 @@
+<?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: communication_overview_http_app Pages: 1 -->
+<svg width="658pt" height="115pt" viewBox="0.00 0.00 658.00 115.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 111)">
+<title>communication_overview_http_app</title>
+<polygon fill="white" stroke="transparent" points="-4,4 -4,-111 654,-111 654,4 -4,4"/>
+<g id="clust1" class="cluster">
+<title>cluster_sandstorm</title>
+<polygon fill="none" stroke="black" points="112,-13 112,-94 401,-94 401,-13 112,-13"/>
+<text text-anchor="middle" x="256.5" y="-78.8" font-family="Times,serif" font-size="14.00">Sandstorm</text>
+</g>
+<g id="clust2" class="cluster">
+<title>cluster_grain</title>
+<polygon fill="none" stroke="black" points="421,-8 421,-99 642,-99 642,-8 421,-8"/>
+<text text-anchor="middle" x="531.5" y="-83.8" font-family="Times,serif" font-size="14.00">Grain</text>
+</g>
+<!-- client -->
+<g id="node1" class="node">
+<title>client</title>
+<polygon fill="none" stroke="black" points="84,-60 0,-60 0,-24 84,-24 84,-60"/>
+<text text-anchor="middle" x="42" y="-45" font-family="Times,serif" font-size="10.00">Web client</text>
+<text text-anchor="middle" x="42" y="-34" font-family="Times,serif" font-size="10.00">(eg. browser)</text>
+</g>
+<!-- proxy -->
+<g id="node2" class="node">
+<title>proxy</title>
+<polygon fill="none" stroke="black" points="213,-60 120,-60 120,-24 213,-24 213,-60"/>
+<text text-anchor="middle" x="166.5" y="-45" font-family="Times,serif" font-size="10.00">Gateway</text>
+<text text-anchor="middle" x="166.5" y="-34" font-family="Times,serif" font-size="10.00"> (gateway.c++)</text>
+</g>
+<!-- client&#45;&#45;proxy -->
+<g id="edge1" class="edge">
+<title>client&#45;&#45;proxy</title>
+<path fill="none" stroke="black" d="M84.13,-42C95.53,-42 107.98,-42 119.63,-42"/>
+</g>
+<!-- websession -->
+<g id="node3" class="node">
+<title>websession</title>
+<polygon fill="none" stroke="black" points="393,-62.5 249,-62.5 249,-21.5 393,-21.5 393,-62.5"/>
+<text text-anchor="middle" x="321" y="-50.5" font-family="Times,serif" font-size="10.00">WebSession Serialization</text>
+<text text-anchor="middle" x="321" y="-39.5" font-family="Times,serif" font-size="10.00">(HTTP over Cap&#39;n Proto,</text>
+<text text-anchor="middle" x="321" y="-28.5" font-family="Times,serif" font-size="10.00">web&#45;session.capnp)</text>
+</g>
+<!-- proxy&#45;&#45;websession -->
+<g id="edge2" class="edge">
+<title>proxy&#45;&#45;websession</title>
+<path fill="none" stroke="black" d="M213.26,-42C224.48,-42 236.77,-42 248.88,-42"/>
+</g>
+<!-- bridge -->
+<g id="node4" class="node">
+<title>bridge</title>
+<polygon fill="none" stroke="black" points="528,-68 429,-68 429,-16 528,-16 528,-68"/>
+<text text-anchor="middle" x="478.5" y="-56" font-family="Times,serif" font-size="10.00">Sandstorm</text>
+<text text-anchor="middle" x="478.5" y="-45" font-family="Times,serif" font-size="10.00">HTTP Bridge</text>
+<text text-anchor="middle" x="478.5" y="-34" font-family="Times,serif" font-size="10.00">(sandstorm&#45;http</text>
+<text text-anchor="middle" x="478.5" y="-23" font-family="Times,serif" font-size="10.00">&#45;bridge.c++)</text>
+</g>
+<!-- websession&#45;&#45;bridge -->
+<g id="edge3" class="edge">
+<title>websession&#45;&#45;bridge</title>
+<path fill="none" stroke="black" d="M393.38,-42C405.35,-42 417.53,-42 428.77,-42"/>
+</g>
+<!-- app -->
+<g id="node5" class="node">
+<title>app</title>
+<polygon fill="none" stroke="black" points="634,-60 564,-60 564,-24 634,-24 634,-60"/>
+<text text-anchor="middle" x="599" y="-39.5" font-family="Times,serif" font-size="10.00">HTTP App</text>
+</g>
+<!-- bridge&#45;&#45;app -->
+<g id="edge4" class="edge">
+<title>bridge&#45;&#45;app</title>
+<path fill="none" stroke="black" d="M528.04,-42C540.06,-42 552.68,-42 563.85,-42"/>
+</g>
+</g>
+</svg>
diff --git a/docs/using/communication_overview_native_app.svg b/docs/using/communication_overview_native_app.svg
new file mode 100644
index 000000000..fe2a142e6
--- /dev/null
+++ b/docs/using/communication_overview_native_app.svg
@@ -0,0 +1,66 @@
+<?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: communication_overview_native_app Pages: 1 -->
+<svg width="586pt" height="105pt" viewBox="0.00 0.00 586.00 105.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 101)">
+<title>communication_overview_native_app</title>
+<polygon fill="white" stroke="transparent" points="-4,4 -4,-101 582,-101 582,4 -4,4"/>
+<g id="clust1" class="cluster">
+<title>cluster_sandstorm</title>
+<polygon fill="none" stroke="black" points="112,-8 112,-89 401,-89 401,-8 112,-8"/>
+<text text-anchor="middle" x="256.5" y="-73.8" font-family="Times,serif" font-size="14.00">Sandstorm</text>
+</g>
+<g id="clust2" class="cluster">
+<title>cluster_grain</title>
+<polygon fill="none" stroke="black" points="421,-11 421,-86 570,-86 570,-11 421,-11"/>
+<text text-anchor="middle" x="495.5" y="-70.8" font-family="Times,serif" font-size="14.00">Grain</text>
+</g>
+<!-- client -->
+<g id="node1" class="node">
+<title>client</title>
+<polygon fill="none" stroke="black" points="84,-55 0,-55 0,-19 84,-19 84,-55"/>
+<text text-anchor="middle" x="42" y="-40" font-family="Times,serif" font-size="10.00">Web client</text>
+<text text-anchor="middle" x="42" y="-29" font-family="Times,serif" font-size="10.00">(eg. browser)</text>
+</g>
+<!-- proxy -->
+<g id="node2" class="node">
+<title>proxy</title>
+<polygon fill="none" stroke="black" points="213,-55 120,-55 120,-19 213,-19 213,-55"/>
+<text text-anchor="middle" x="166.5" y="-40" font-family="Times,serif" font-size="10.00">Gateway</text>
+<text text-anchor="middle" x="166.5" y="-29" font-family="Times,serif" font-size="10.00"> (gateway.c++)</text>
+</g>
+<!-- client&#45;&#45;proxy -->
+<g id="edge1" class="edge">
+<title>client&#45;&#45;proxy</title>
+<path fill="none" stroke="black" d="M84.13,-37C95.53,-37 107.98,-37 119.63,-37"/>
+</g>
+<!-- websession -->
+<g id="node3" class="node">
+<title>websession</title>
+<polygon fill="none" stroke="black" points="393,-57.5 249,-57.5 249,-16.5 393,-16.5 393,-57.5"/>
+<text text-anchor="middle" x="321" y="-45.5" font-family="Times,serif" font-size="10.00">WebSession Serialization</text>
+<text text-anchor="middle" x="321" y="-34.5" font-family="Times,serif" font-size="10.00">(HTTP over Cap&#39;n Proto,</text>
+<text text-anchor="middle" x="321" y="-23.5" font-family="Times,serif" font-size="10.00">web&#45;session.capnp)</text>
+</g>
+<!-- proxy&#45;&#45;websession -->
+<g id="edge2" class="edge">
+<title>proxy&#45;&#45;websession</title>
+<path fill="none" stroke="black" d="M213.26,-37C224.48,-37 236.77,-37 248.88,-37"/>
+</g>
+<!-- app -->
+<g id="node4" class="node">
+<title>app</title>
+<polygon fill="none" stroke="black" points="562,-55 429,-55 429,-19 562,-19 562,-55"/>
+<text text-anchor="middle" x="495.5" y="-40" font-family="Times,serif" font-size="10.00">Native Sandstorm App</text>
+<text text-anchor="middle" x="495.5" y="-29" font-family="Times,serif" font-size="10.00">(speaks Cap&#39;n Proto )</text>
+</g>
+<!-- websession&#45;&#45;app -->
+<g id="edge3" class="edge">
+<title>websession&#45;&#45;app</title>
+<path fill="none" stroke="black" d="M393.16,-37C404.94,-37 417.12,-37 428.76,-37"/>
+</g>
+</g>
+</svg>
diff --git a/docs/using/how-it-works.md b/docs/using/how-it-works.md
index c094b6465..383535380 100644
--- a/docs/using/how-it-works.md
+++ b/docs/using/how-it-works.md
@@ -22,7 +22,12 @@ and the grain occur over the Cap'n Proto WebSession format.  With existing
 applications, the Sandstorm HTTP bridge is used to translate between Cap'n
 Proto and HTTP.
 
-```graphviz dot communication_overview_http_app.svg
+![Diagram with HTTP Bridge](communication_overview_http_app.svg)
+
+<!--
+NOTE: Included SVGs on this page were created in Graphviz DOT language, and are provided here for convenience in regenerating the files if needed.
+
+graphviz dot communication_overview_http_app.svg
     graph communication_overview_http_app {
       rankdir=LR;
       compound=true;
@@ -47,12 +52,15 @@ Proto and HTTP.
       websession -- bridge;
       bridge -- app;
     }
-```
+-->
 
 When an application can speak Cap'n Proto directly to Sandstorm, the HTTP
 bridge is not needed.
 
-```graphviz dot communication_overview_native_app.svg
+![Diagram without HTTP Bridge](communication_overview_native_app.svg)
+
+<!--
+graphviz dot communication_overview_native_app.svg
     graph communication_overview_native_app {
       rankdir=LR;
       compound=true;
@@ -75,4 +83,4 @@ bridge is not needed.
       proxy -- websession;
       websession -- app;
     }
-```
+-->
diff --git a/mkdocs.yml b/mkdocs.yml
index 5c667bdf7..a84ee042e 100755
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -7,7 +7,6 @@ theme:
 repo_url: https://github.com/sandstorm-io/sandstorm
 edit_uri: edit/master/docs/
 markdown_extensions:
-    - mkdocs_markdown_graphviz
     - admonition
 extra_css:
     - "extra.css"