diff --git a/.github/actions/deploy-to-github-pages/action.yml b/.github/actions/deploy-to-github-pages/action.yml index 85104884dd..67230be8cd 100644 --- a/.github/actions/deploy-to-github-pages/action.yml +++ b/.github/actions/deploy-to-github-pages/action.yml @@ -81,6 +81,13 @@ runs: find public/book public/docs -name \*.html -print0 | xargs -0r sed -i 's,http://git-scm\.com,https://git-scm.com,g' + - uses: actions/setup-node@v5 + - name: pre-render the Graphviz diagrams + shell: bash + run: | + npm install node-html-parser && + node ./script/graphviz-ssr.js + - name: run Pagefind ${{ env.PAGEFIND_VERSION }} to build the search index shell: bash run: npx -y pagefind@${{ env.PAGEFIND_VERSION }} --site public --write-playground diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 39d15260a1..7df82cbc3d 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -32,6 +32,12 @@ jobs: exit 1 fi + - uses: actions/setup-node@v5 + - name: pre-render the Graphviz diagrams + run: | + npm install node-html-parser && + node ./script/graphviz-ssr.js + - name: run Pagefind ${{ env.PAGEFIND_VERSION }} to build the search index run: npx -y pagefind@${{ env.PAGEFIND_VERSION }} --site public --write-playground diff --git a/assets/js/application.js b/assets/js/application.js index a8f521e2c8..5226700cbc 100644 --- a/assets/js/application.js +++ b/assets/js/application.js @@ -782,6 +782,32 @@ var PostelizeAnchor = { }, } +var Graphviz = { + render: function() { + let vizInstance + [...document.querySelectorAll("pre[class=graphviz]")].forEach(async (x) => { + if (!vizInstance) vizInstance = await Viz.instance() + const options = { + format: "svg", + graphAttributes: { + bgcolor: "transparent", + }, + engine: x.getAttribute("engine") || "dot", + } + const svg = vizInstance.renderString(x.innerText, options) + const img = document.createElement('img') + img.setAttribute( + 'src', + `data:image/svg+xml;utf8,${encodeURIComponent(svg.substring(svg.indexOf('
- }}" 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 >}}
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.
- }}" 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 >}}
@@ -42,7 +87,41 @@
- }}" 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 >}}