Added example Gifs for database migration & binary tree rotation

yairm210 · Sep 12, 2024 · 7fca037 · 7fca037
1 parent 9c4fc22
commit 7fca037
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -7,3 +7,13 @@ Made with:
 - [Mermaid](https://github.com/mermaid-js/mermaid) for graph rendering
 - [html2canvas](https://github.com/niklasvh/html2canvas) and [gif.js](https://github.com/jnordberg/gif.js) for creating the GIF
 - [simple.css](https://github.com/kevquirk/simple.css) for the styling
+
+### Examples
+
+Database migration
+
+![Database migration](examples/database-migration.gif)
+
+Binary tree rotation
+
+![Binary tree rotation](examples/binary-tree-rotation.gif)
diff --git a/examples/binary-tree-rotation.gif b/examples/binary-tree-rotation.gif
diff --git a/examples/database-migration.gif b/examples/database-migration.gif
diff --git a/index.html b/index.html
@@ -154,51 +154,90 @@
                 editor.setValue(initialGraphText)
             }
 
-            const frames = [
-                "graph TD\n" +
-                "Source-->OldDB\n" +
-                "Source~~~NewDB:::invisible\n" +
-                "OldDB-->Destination\n" +
-                "NewDB~~~Destination\n" +
-                "classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000; \n",
-
-                "graph TD\n" +
-                "Source-->OldDB\n" +
-                "Source-->NewDB\n" +
-                "OldDB-->Destination\n" +
-                "NewDB~~~Destination\n" +
-                "classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000; \n",
-
-                "graph TD\n" +
-                "Source-->OldDB\n" +
-                "Source-->NewDB\n" +
-                "OldDB-->Destination\n" +
-                "NewDB-.->Destination\n" +
-                "classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000; \n",
-
-                "graph TD\n" +
-                "Source-->OldDB\n" +
-                "Source-->NewDB\n" +
-                "OldDB-.->Destination\n" +
-                "NewDB-->Destination\n" +
-                "classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000; \n",
-
-                "graph TD\n" +
-                "Source-->OldDB\n" +
-                "Source-->NewDB\n" +
-                "OldDB~~~Destination\n" +
-                "NewDB-->Destination\n" +
-                "classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000; \n",
-
-                "graph TD\n" +
-                "Source~~~OldDB:::invisible\n" +
-                "Source-->NewDB\n" +
-                "OldDB~~~Destination\n" +
-                "NewDB-->Destination\n" +
-                "classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000; \n",
-            ]
-
-            frames.forEach(frame => {
+            const examples = {
+                "Migration": [
+                    "graph TD\n" +
+                    "Source-->OldDB\n" +
+                    "Source~~~NewDB:::invisible\n" +
+                    "OldDB-->Destination\n" +
+                    "NewDB~~~Destination\n" +
+                    "classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000; \n",
+
+                    "graph TD\n" +
+                    "Source-->OldDB\n" +
+                    "Source-->NewDB\n" +
+                    "OldDB-->Destination\n" +
+                    "NewDB~~~Destination\n" +
+                    "classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000; \n",
+
+                    "graph TD\n" +
+                    "Source-->OldDB\n" +
+                    "Source-->NewDB\n" +
+                    "OldDB-->Destination\n" +
+                    "NewDB-.->Destination\n" +
+                    "classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000; \n",
+
+                    "graph TD\n" +
+                    "Source-->OldDB\n" +
+                    "Source-->NewDB\n" +
+                    "OldDB-.->Destination\n" +
+                    "NewDB-->Destination\n" +
+                    "classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000; \n",
+
+                    "graph TD\n" +
+                    "Source-->OldDB\n" +
+                    "Source-->NewDB\n" +
+                    "OldDB~~~Destination\n" +
+                    "NewDB-->Destination\n" +
+                    "classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000; \n",
+
+                    "graph TD\n" +
+                    "Source~~~OldDB:::invisible\n" +
+                    "Source-->NewDB\n" +
+                    "OldDB~~~Destination\n" +
+                    "NewDB-->Destination\n" +
+                    "classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000; \n",
+                ],
+                "Binary tree": [
+                    "graph TD\n" +
+                    "Root[1]~~~L:::invisible\n" +
+                    "L~~~LL:::invisible\n" +
+                    "L~~~LR:::invisible\n" +
+                    "Root~~~R:::invisible\n" +
+                    "R~~~RL:::invisible\n" +
+                    "R~~~RR:::invisible\n" +
+                    "classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000; \n",
+
+                    "graph TD\n" +
+                    "Root[1]~~~L:::invisible\n" +
+                    "L~~~LL:::invisible\n" +
+                    "L~~~LR:::invisible\n" +
+                    "Root-->R[2]\n" +
+                    "R~~~RL:::invisible\n" +
+                    "R~~~RR:::invisible\n" +
+                    "classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000; \n",
+
+                    "graph TD\n" +
+                    "Root[1]~~~L:::invisible\n" +
+                    "L~~~LL:::invisible\n" +
+                    "L~~~LR:::invisible\n" +
+                    "Root-->R[2]\n" +
+                    "R~~~RL:::invisible\n" +
+                    "R-->RR[3]\n" +
+                    "classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000; \n",
+
+                    "graph TD\n" +
+                    "Root[2]-->L[1]\n" +
+                    "L~~~LL:::invisible\n" +
+                    "L~~~LR:::invisible\n" +
+                    "Root-->R[3]\n" +
+                    "R~~~RL:::invisible\n" +
+                    "R~~~RR:::invisible\n" +
+                    "classDef invisible fill-opacity:0, stroke-opacity:0, color:#0000; \n",
+                ]
+            }
+
+            examples["Migration"].forEach(frame => {
                 window.addEditor(frame)
             })
         });