Improve Templates

app/scripts/screenshot-templates.mjs

@@ -3,7 +3,6 @@ import fs from "fs";
 import { chromium } from "playwright";
 import { exec } from "child_process";
 import util from "util";
-import { writeFile } from "fs/promises";
 
 const execAsync = util.promisify(exec);
 

app/src/lib/templates/decision-flow-template.ts

@@ -1,150 +1,92 @@
 import { FFTheme } from "../FFTheme";
 
 export const content = `
-Should we launch the product? .decision
-  Yes: High demand
-    Prepare marketing campaign .action
-      Set budget .input
-      Create ads .input
-    Scale production .action
-      Hire staff .input
-      Increase inventory .input
-  No: More research needed
-    Conduct market analysis .action.color_blue
-      Positive results: Proceed
-        (Should we launch the product?)
-      Negative results: Abandon
-        End project .terminal.color_red
-    Improve product .action.color_green
-      Minor changes
-        (Should we launch the product?)
-      Major overhaul
-        Seek additional funding .action.color_orange
-          Approved: Continue
-            (Should we launch the product?)
-          Denied: Abandon
-            (End project)
+Start
+  Should we launch the product? .decision
+    Yes: Market ready
+      Launch campaign .action
+        Set budget .input
+          Launch .terminal.color_blue
+    No: Need improvements
+      Improve product .action.color_green
+        (Market ready)
 `;
 
 export const theme: FFTheme = {
-  layoutName: "layered",
+  layoutName: "mrtree",
   direction: "DOWN",
-  spacingFactor: 1.25,
+  spacingFactor: 1.2,
 
-  background: "#f2e9e4",
+  background: "#ffffff",
   fontFamily: "Roboto",
-  nodeBackground: "#4a4e69",
-  nodeForeground: "#ffffff",
-  borderWidth: 0,
-  edgeColor: "#22223b",
+  nodeBackground: "#f8fafc",
+  nodeForeground: "#1e293b",
+  borderWidth: 2,
+  edgeColor: "#64748b",
   padding: 16,
-  borderColor: "#ced4da",
+  borderColor: "#64748b",
   textMaxWidth: 150,
   lineHeight: 1.3,
-  textMarginY: 0,
+  textMarginY: 1.75,
   useFixedHeight: false,
   shape: "rectangle",
-  curveStyle: "round-taxi",
+  curveStyle: "bezier",
   edgeWidth: 2,
   sourceArrowShape: "none",
   targetArrowShape: "triangle",
   sourceDistanceFromNode: 0,
-  targetDistanceFromNode: 10,
-  arrowScale: 1.2,
-  edgeTextSize: 12,
+  targetDistanceFromNode: 0,
+  arrowScale: 1.75,
+  edgeTextSize: 0.9,
   rotateEdgeLabel: false,
   fixedHeight: 100,
 };
 
 export const cytoscapeStyle = `
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
 
-node {
-  font-weight: 500;
-  text-halign: center;
-  text-valign: center;
-  color: #ffffff;
-  background-color: #4a4e69;
-  border-width: 0;
-  font-size: 14px;
-  text-wrap: wrap;
-  text-max-width: 130px;
-  padding: 12px;
-  width: 160px;
-  height: 80px;
-  text-outline-color: #22223b;
-  text-outline-width: 1px;
-  text-outline-opacity: 0.5;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-edge {
-  taxi-direction: downward;
-  target-arrow-shape: triangle;
-  target-arrow-color: #22223b;
-  line-color: #22223b;
-  width: 2px;
-  font-size: 12px;
-  font-weight: 500;
-  color: #22223b;
-  text-background-color: #f2e9e4;
-  text-background-opacity: 1;
-  text-background-padding: 3px;
-  curve-style: unbundled-bezier;
-  control-point-distances: 0 -20 -20 20 0;
-  control-point-weights: 0.25 0.5 0.75;
-}
-
 .decision {
   shape: diamond;
-  background-color: #f72585;
-  width: 160px;
-  height: 160px;
+  background-color: #f1f5f9;
+  height: 150px;
 }
 
 .action {
   shape: rectangle;
-  background-color: #4361ee;
+  background-color: #bfdbfe;
+  border-color: #3b82f6;
 }
 
 .input {
   shape: parallelogram;
-  background-color: #4cc9f0;
-  width: 140px;
-  height: 70px;
+  background-color: #ddd6fe;
+  border-color: #7c3aed;
 }
 
 .terminal {
   shape: ellipse;
-  background-color: #7209b7;
-  width: 140px;
-  height: 70px;
-}
-
-.recurse {
-  shape: rectangle;
-  background-color: #4895ef;
-  border-width: 3px;
-  border-style: dashed;
-  border-color: #f72585;
-  width: 140px;
-  height: 70px;
+  background-color: #fecaca;
+  border-color: #dc2626;
 }
 
 .color_blue {
-  background-color: #4cc9f0;
+  background-color: #bfdbfe;
+  border-color: #3b82f6;
 }
 
 .color_green {
-  background-color: #52b788;
+  background-color: #bbf7d0;
+  border-color: #16a34a;
 }
 
 .color_red {
-  background-color: #e63946;
+  background-color: #fecaca;
+  border-color: #dc2626;
 }
 
 .color_orange {
-  background-color: #fb8500;
+  background-color: #fed7aa;
+  border-color: #f97316;
 }
 
 @keyframes pulse {

app/src/lib/templates/flowchart-template.ts

@@ -6,8 +6,8 @@ Brainstorming Session
     Prototype Evaluation
       Yes: Design .color_blue
         Testing
-      No: Review .color_green
-        Quick Design .color_green
+      No: Review .color_yellow
+        Quick Design .color_yellow
           (Prototyping)
 Trends
   (Prototyping)
@@ -21,31 +21,112 @@ export const theme: FFTheme = {
   spacingFactor: 1,
 
   background: "#ffffff",
-  fontFamily: "REM",
-
-  shape: "rectangle",
-  nodeBackground: "#f5c844",
-  nodeForeground: "#1a1a1a",
-  padding: 10,
-  borderWidth: 0,
-  borderColor: "#1a1a1a",
-  textMaxWidth: 150,
+  fontFamily: "Inclusive Sans",
+
+  shape: "roundrectangle",
+  nodeBackground: "#ffffff",
+  nodeForeground: "#2a2a2a",
+  padding: 12,
+  borderWidth: 2,
+  borderColor: "#565656",
+  textMaxWidth: 110,
   lineHeight: 1.4,
-  textMarginY: 0,
-  useFixedHeight: true,
-  fixedHeight: 80,
+  textMarginY: 0.5,
+  useFixedHeight: false,
+  fixedHeight: 50,
 
   curveStyle: "bezier",
   edgeWidth: 2,
-  edgeColor: "#1a1a1a",
+  edgeColor: "#666666",
   sourceArrowShape: "none",
   targetArrowShape: "triangle",
   sourceDistanceFromNode: 0,
   targetDistanceFromNode: 4,
-  arrowScale: 1.5,
+  arrowScale: 1.2,
   edgeTextSize: 1,
   rotateEdgeLabel: true,
 };
 
-export const cytoscapeStyle =
-  "$color: #1a1a1a;\n$red: #ed6e49;\n$orange: #f4a261;\n$yellow: #f5c844;\n$green: #11ac9a;\n$blue: #4351d1;\n$pink: #f5c3c2;\n$grey: #f2eded;\n\n:childless {\n  font-weight: 500;\n}\n\n/** Start */\n:childless[in_degree < 1][out_degree > 0] {\n  border-width: 0;\n  shape: roundrectangle;\n  background-color: $color;\n  color: white;\n}\n\n/** Terminal */\n:childless[out_degree < 1][in_degree > 0] {\n  border-width: 0;\n  shape: roundrectangle;\n  background-color: $color;\n  color: white;\n}\n\n/** Branching */\n:childless[in_degree > 0][in_degree < 2][out_degree > 1] {\n  shape: diamond;\n  background-color: $red;\n  color: white;\n  height: $width;\n  border-width: 0;\n  text-margin-y: 2;\n}\n\n/** Merging **/\n:childless[in_degree > 1][out_degree > 0][out_degree < 2] {\n}\n\n:childless.color_red {\n  background-color: $red;\n  color: white;\n}\n:childless.color_orange {\n  background-color: $orange;\n  color: white;\n}\n:childless.color_yellow {\n  background-color: $yellow;\n}\n:childless.color_green {\n  background-color: $green;\n  color: white;\n}\n:childless.color_blue {\n  background-color: $blue;\n  color: white;\n}\n:childless.color_pink {\n  background-color: $pink;\n  color: $color;\n}\n:childless.color_grey {\n  background-color: $grey;\n  color: $color;\n}\n\n:parent.color_white {\n  background-color: white;\n}\n:parent.color_grey {\n  background-color: $grey;\n}\n";
+export const cytoscapeStyle = `
+$color: #2a2a2a;
+$red: #ffebee;
+$orange: #fff3e0;
+$yellow: #fff8e1;
+$green: #e8f5e9;
+$blue: #e3f2fd;
+$pink: #fce4ec;
+$grey: #f5f5f5;
+
+:childless {
+  text-outline-width: 0;
+  text-outline-color: transparent;
+  shadow-blur: 5;
+  shadow-color: #00000010;
+  shadow-offset-x: 0;
+  shadow-offset-y: 2;
+}
+
+/** Start */
+:childless[in_degree < 1][out_degree > 0] {
+  shape: roundrectangle;
+  background-color: $green;
+}
+
+/** Terminal */
+:childless[out_degree < 1][in_degree > 0] {
+  shape: roundrectangle;
+  background-color: $red;
+}
+
+/** Branching - Updated for better readability */
+:childless[in_degree > 0][in_degree < 2][out_degree > 1] {
+  shape: diamond;
+  background-color: white;
+  color: $color;
+  height: $width;
+  text-margin-y: 2;
+}
+
+:childless.color_red {
+  background-color: $red;
+  color: $color;
+}
+:childless.color_orange {
+  background-color: $orange;
+  color: $color;
+}
+:childless.color_yellow {
+  background-color: $yellow;
+  color: $color;
+}
+:childless.color_green {
+  background-color: $green;
+  color: $color;
+}
+:childless.color_blue {
+  background-color: $blue;
+  color: $color;
+}
+:childless.color_pink {
+  background-color: $pink;
+  color: $color;
+}
+:childless.color_grey {
+  background-color: $grey;
+  color: $color;
+}
+:childless.color_white {
+  background-color: white;
+}
+:childless.color_black {
+  background-color: black;
+  color: white;
+}
+
+:parent.color_white {
+  background-color: white;
+}
+:parent.color_grey {
+  background-color: $grey;
+}
+`;