Replace the diagrams in about/distributed with Graphviz versions

This commit recreates those diagrams that have been provided as `.png`
files before. Of course, this is not strictly necessary because the
previous `.png` diagrams served their purpose well enough. But I wanted
to show off that we can now use Graphviz diagrams on git-scm.com.

Note: When developing this patch, I had considered inlining the SVGs as
`<svg>` instead of `<img>`. That would have had the following
advantages:

- The text in those diagrams would have been copy/paste-able.

- We could have defined explicit colors for dark mode, as the `<style>`
  element would have been able to refer to the HTML document's `:root`
  element's dark mode definitions.

However, having SVGs embedded in `<img>` elements have a few benefits:

- Current browsers allow to `Open Image in New Tab` (where the text
  would be copy/paste-able again).

- Current browsers allow to `Save Image` (even if there is no way to
  specify a filename, see whatwg/html#2722).

- By using `<img>` elements, we can reuse the previous work on images in
  dark mode.

Signed-off-by: Johannes Schindelin <[email protected]>

Author: dscho

content/about/distributed.html

@@ -27,22 +27,101 @@ <h4>Subversion-Style Workflow</h4>
     A centralized workflow is very common, especially from people transitioning from a centralized system. Git will not allow you to push if someone has pushed since the last time you fetched, so a centralized model where all developers push to the same server works just fine.
     </p>
     <p class="center">
-    <img src="{{< relurl "images/about/[email protected]" >}}" width="415" height="209" alt="Workflow A">
+    {{< graphviz alt="workflow A" >}}
+    digraph dev_workflow {
+      layout=neato;
+      overlap=false;
+      sep="+10";
+      node [shape=box, style="filled,rounded", penwidth=0, fontname="Helvetica"];
+      edge [penwidth=3, color="gray", arrowsize=0.5, dir=both];
+
+      shared_repo [label="shared repository", fillcolor=teal, fontcolor=white, pos="2,1.5!"];
+
+      developer1 [label="developer", fillcolor=lightblue, pos="0,0!"];
+      developer2 [label="developer", fillcolor=lightblue, pos="2,0!"];
+      developer3 [label="developer", fillcolor=lightblue, pos="4,0!"];
+
+      developer1 -> shared_repo;
+      developer2 -> shared_repo;
+      developer3 -> shared_repo;
+    }
+    {{< /graphviz >}}
     </p>
     <h4>Integration Manager Workflow</h4>
     <p>
     Another common Git workflow involves an integration manager — a single person who commits to the 'blessed' repository. A number of developers then clone from that repository, push to their own independent repositories, and ask the integrator to pull in their changes. This is the type of development model often seen with open source or GitHub repositories.
     </p>
     <p class="center">
-    <img src="{{< relurl "images/about/[email protected]" >}}" width="407" height="164" alt="Workflow B">
+    {{< graphviz alt="workflow B" >}}
+    digraph workflow {
+      layout=neato;
+      overlap=false;
+      node [shape=box, style="filled,rounded", penwidth=0, fontname="Helvetica"];
+      edge [penwidth=3, color="gray", arrowsize=0.5];
+
+      // Nodes
+      blessed_repo [label="blessed\nrepository", fillcolor=teal, fontcolor=white, margin="0.3", pos="0,3!"];
+      integration_manager [label="integration\nmanager", fillcolor=orange, fontcolor=white, pos="0,1!"];
+
+      dev_pub1 [label="developer\npublic", fillcolor="#CCAA00", fontcolor=black, pos="2,3!"];
+      dev_pub2 [label="developer\npublic", fillcolor="#CCAA00", fontcolor=black, pos="4,3!"];
+
+      dev_priv1 [label="developer\nprivate", fillcolor="#CCAA00", fontcolor=black, pos="2,1!"];
+      dev_priv2 [label="developer\nprivate", fillcolor="#CCAA00", fontcolor=black, pos="4,1!"];
+
+      // Edges with labels
+      dev_priv1 -> dev_pub1;
+      dev_priv2 -> dev_pub2;
+      integration_manager -> blessed_repo;
+
+      dev_pub1 -> integration_manager [color="lightgray"];
+      dev_pub2 -> integration_manager [color="lightgray"];
+      blessed_repo -> dev_priv1 [color="lightgray"];
+      blessed_repo -> dev_priv2 [color="lightgray"];
+    }
+    {{< /graphviz >}}
     </p>
     <h4>Dictator and Lieutenants Workflow</h4>
     <p>
     For more massive projects, a development workflow like that of the Linux kernel is often effective.
     In this model, some people ('lieutenants') are in charge of a specific subsystem of the project and they merge in all changes related to that subsystem. Another integrator (the 'dictator') can pull changes from only his/her lieutenants and then push to the 'blessed' repository that everyone then clones from again.
     </p>
     <p class="center">
-    <img src="{{< relurl "images/about/[email protected]" >}}" width="562" height="303" alt="Workflow C">
+    {{< graphviz alt="workflow C" >}}
+    digraph workflow {
+      layout=neato;
+      overlap=false;
+      node [shape=box, style="filled,rounded", penwidth=0, fontname="Helvetica"];
+      edge [penwidth=3, color="gray", arrowsize=0.5];
+
+      // Nodes
+      blessed_repo [label="blessed\nrepository", fillcolor=teal, fontcolor=white, margin="0.3", pos="6,4!"];
+      dictator [label="dictator", fillcolor=red, fontcolor=white, pos="0,4!"];
+
+      lieutenant1 [label="lieutenant", fillcolor="#CCAA00", fontcolor=white, pos="0,2.5!"];
+      lieutenant2 [label="lieutenant", fillcolor="#CCAA00", fontcolor=white, pos="2,3!"];
+
+      developer1 [label="developer", fillcolor=lightblue, fontcolor=black, pos="0,1!"];
+      developer2 [label="developer", fillcolor=lightblue, fontcolor=black, pos="2,1!"];
+      developer3 [label="developer", fillcolor=lightblue, fontcolor=black, pos="4,1!"];
+      developer4 [label="developer", fillcolor=lightblue, fontcolor=black, pos="6,1!"];
+
+      // Edges
+      dictator -> blessed_repo;
+      lieutenant1 -> dictator;
+      lieutenant2 -> dictator;
+
+      developer1 -> lieutenant1;
+      developer2 -> lieutenant1;
+      developer3 -> lieutenant2;
+      developer4 -> lieutenant2;
+
+      blessed_repo -> developer1;
+      blessed_repo -> developer2;
+      blessed_repo -> developer3;
+      blessed_repo -> developer4;
+    }
+    {{< /graphviz >}}
     </p>
     <div class="bottom-nav" style="display: block;">
       <a href="{{< relurl "about/small-and-fast" >}}" class="previous" data-section-id="small-and-fast">← Small and Fast</a>