Templates (#601)

* Add Templates

* Add translations

* Dark Mode

app/src/lib/queries.ts

@@ -121,6 +121,7 @@ type MakeChartArgs = {
 } & (
   | { fromPrompt: true; prompt: string; method: "instruct" | "extract" }
   | { fromPrompt?: never; prompt?: never; method?: never }
+  | { template: string; fromPrompt?: never; prompt?: never; method?: never }
 );
 
 export async function makeChart({
@@ -151,6 +152,14 @@ export async function makeChart({
     const result = await response.json();
 
     if ("chart" in result) chart = result["chart"] as string;
+  } else if ("template" in rest) {
+    // get template here
+    try {
+      const template = await import(`./templates/${rest.template}-template.ts`);
+      chart = template.default;
+    } catch (error) {
+      console.error(error);
+    }
   }
 
   return await supabase

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

@@ -0,0 +1,30 @@
+const template = `
+Database
+  Fetch Blog API .color_blue
+    (#display)
+  Post Comments API .color_green
+
+DisplayBlog\\(\\) #display.color_purple
+  (User)
+useEffect\\(\\) #effect
+  DisplayComments\\(\\) .color_purple
+    (User)
+Post Comment UI .color_purple
+  POST
+    (Post Comments API)
+
+User
+  (Post Comment UI)
+
+=====
+{
+"cytoscapeStyle": "@import url(\\"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400&display=swap\\");\\n@import url(\\"https://fonts.googleapis.com/css2?family=Red+Hat+Mono&display=swap\\");\\n\\n$background: white;\\n$color: #000000;\\n$fontFamily: \\"Red Hat Mono\\", sans-serif;\\n$blue: #3375e5;\\n$purple: #6844a3;\\n$red: #e63946;\\n$orange: #f4a261;\\n$yellow: #f1fa3b;\\n$green: #72d9b3;\\n$grey: #8f8f8f;\\n$lightgrey: #a2a2a2;\\n\\nedge {\\n  width: 1px;\\n  curve-style: taxi;\\n  taxi-direction: downward;\\n  target-arrow-shape: triangle;\\n  line-color: $lightgrey;\\n  source-arrow-color: $lightgrey;\\n  target-arrow-color: $lightgrey;\\n  label: data(label);\\n  text-background-color: $background;\\n  text-background-opacity: 1;\\n  text-background-padding: 5;\\n  font-family: $fontFamily;\\n  font-size: 14;\\n}\\n\\n:childless[shapeWidth] {\\n  width: data(shapeWidth);\\n}\\n\\n:childless[shapeHeight] {\\n  height: data(shapeHeight);\\n}\\n\\n:childless[textMarginY] {\\n  text-margin-y: data(textMarginY);\\n}\\n\\n:childless[textMarginX] {\\n  text-margin-x: data(textMarginX);\\n}\\n\\n:childless {\\n  label: data(label);\\n  font-family: $fontFamily;\\n  text-wrap: wrap;\\n  text-max-width: 150;\\n  width: 200;\\n  height: label;\\n  font-size: 16;\\n  padding: 24;\\n  text-valign: center;\\n  text-halign: center;\\n  line-height: 1.4;\\n  shape: roundrectangle;\\n  background-color: $grey;\\n  color: white;\\n  border-color: $grey;\\n  border-width: 2;\\n  border-style: solid;\\n  font-weight: 400;\\n}\\n\\n/** Start */\\n:childless[in_degree < 1][out_degree > 0] {\\n  shape: roundrectangle;\\n  border-color: $color;\\n  background-color: white;\\n  color: $color;\\n}\\n\\n/** Branching */\\n:childless[in_degree > 0][in_degree < 2][out_degree > 1] {\\n  shape: diamond;\\n  background-color: $blue;\\n  color: white;\\n  height: 200;\\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  border-color: $green;\\n  background-color: #f0fbf8;\\n  color: $color;\\n}\\n:childless.color_blue {\\n  border-color: $blue;\\n  background-color: #dae4ef;\\n  color: $color;\\n}\\n:childless.color_purple {\\n  border-color: $purple;\\n  background-color: #ddd8e7;\\n  color: $color;\\n}\\n:childless.color_grey {\\n  background-color: $grey;\\n}\\n\\n:childless.shape_rectangle {\\n  shape: rectangle;\\n}\\n:childless.shape_roundrectangle {\\n  shape: roundrectangle;\\n}\\n:childless.shape_ellipse {\\n  shape: ellipse;\\n}\\n:childless.shape_triangle {\\n  shape: triangle;\\n}\\n:childless.shape_pentagon {\\n  shape: pentagon;\\n}\\n:childless.shape_hexagon {\\n  shape: hexagon;\\n}\\n:childless.shape_heptagon {\\n  shape: heptagon;\\n}\\n:childless.shape_octagon {\\n  shape: octagon;\\n}\\n:childless.shape_star {\\n  shape: star;\\n}\\n:childless.shape_barrel {\\n  shape: barrel;\\n}\\n:childless.shape_diamond {\\n  shape: diamond;\\n}\\n:childless.shape_vee {\\n  shape: vee;\\n}\\n:childless.shape_rhomboid {\\n  shape: rhomboid;\\n}\\n:childless.shape_right-rhomboid {\\n  shape: right-rhomboid;\\n}\\n:childless.shape_tag {\\n  shape: tag;\\n}\\n:childless.shape_round-rectangle {\\n  shape: round-rectangle;\\n}\\n:childless.shape_cut-rectangle {\\n  shape: cut-rectangle;\\n}\\n:childless.shape_bottom-round-rectangle {\\n  shape: bottom-round-rectangle;\\n}\\n:childless.shape_concave-hexagon {\\n  shape: concave-hexagon;\\n}\\n:childless.border_none {\\n  border-width: 0;\\n  border-style: solid;\\n}\\n:childless.border_solid {\\n  border-width: 2;\\n  border-style: solid;\\n}\\n:childless.border_dashed {\\n  border-width: 2;\\n  border-style: dashed;\\n}\\n:childless.border_dotted {\\n  border-width: 2;\\n  border-style: dotted;\\n}\\n\\n:childless[w] {\\n  width: data(w);\\n}\\n\\n:childless[h] {\\n  height: data(h);\\n}\\n\\nedge.line_solid {\\n  line-style: solid;\\n}\\nedge.line_dotted {\\n  line-style: dotted;\\n}\\nedge.line_dashed {\\n  line-style: dashed;\\n}\\nedge.target-arrow_triangle {\\n  target-arrow-shape: triangle;\\n}\\nedge.target-arrow_triangle-tee {\\n  target-arrow-shape: triangle-tee;\\n}\\nedge.target-arrow_circle-triangle {\\n  target-arrow-shape: circle-triangle;\\n}\\nedge.target-arrow_triangle-cross {\\n  target-arrow-shape: triangle-cross;\\n}\\nedge.target-arrow_triangle-backcurve {\\n  target-arrow-shape: triangle-backcurve;\\n}\\nedge.target-arrow_vee {\\n  target-arrow-shape: vee;\\n}\\nedge.target-arrow_tee {\\n  target-arrow-shape: tee;\\n}\\nedge.target-arrow_square {\\n  target-arrow-shape: square;\\n}\\nedge.target-arrow_circle {\\n  target-arrow-shape: circle;\\n}\\nedge.target-arrow_diamond {\\n  target-arrow-shape: diamond;\\n}\\nedge.target-arrow_chevron {\\n  target-arrow-shape: chevron;\\n}\\nedge.target-arrow_none {\\n  target-arrow-shape: none;\\n}\\nedge.source-arrow_triangle {\\n  source-arrow-shape: triangle;\\n}\\nedge.source-arrow_triangle-tee {\\n  source-arrow-shape: triangle-tee;\\n}\\nedge.source-arrow_circle-triangle {\\n  source-arrow-shape: circle-triangle;\\n}\\nedge.source-arrow_triangle-cross {\\n  source-arrow-shape: triangle-cross;\\n}\\nedge.source-arrow_triangle-backcurve {\\n  source-arrow-shape: triangle-backcurve;\\n}\\nedge.source-arrow_vee {\\n  source-arrow-shape: vee;\\n}\\nedge.source-arrow_tee {\\n  source-arrow-shape: tee;\\n}\\nedge.source-arrow_square {\\n  source-arrow-shape: square;\\n}\\nedge.source-arrow_circle {\\n  source-arrow-shape: circle;\\n}\\nedge.source-arrow_diamond {\\n  source-arrow-shape: diamond;\\n}\\nedge.source-arrow_chevron {\\n  source-arrow-shape: chevron;\\n}\\nedge.source-arrow_none {\\n  source-arrow-shape: none;\\n}\\n\\n:parent {\\n  padding: 10;\\n  border-style: solid;\\n  border-width: 2;\\n  border-color: $color;\\n  background-color: $background;\\n  text-valign: top;\\n  font-family: $fontFamily;\\n  label: data(label);\\n  color: $color;\\n  font-size: 19.5px;\\n  text-margin-y: -5;\\n}\\n\\n:parent.color_white {\\n  background-color: white;\\n}\\n:parent.color_grey {\\n  background-color: $grey;\\n}\\n",
+"layout": {
+  "name": "dagre",
+  "spacingFactor": 1.07,
+  "rankDir": "TB"
+}
+}
+=====`;
+
+export default template;

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

@@ -0,0 +1,24 @@
+const template = `Brainstorming Session
+  Prototyping
+    Prototype Evaluation
+      Yes: Design .color_blue
+        Testing
+      No: Review .color_pink
+        Quick Design .color_pink
+          (Prototyping)
+Trends
+  (Prototyping)
+Research
+  (Prototyping)
+
+=====
+{
+  "cytoscapeStyle": "@import url(\\"https://fonts.googleapis.com/css2?family=REM&display=swap\\");\\n\\n$background: #f2f2f2;\\n$color: #1a1a1a;\\n$fontFamily: \\"REM\\", sans-serif;\\n$red: #ed6e49;\\n$orange: #f4a261;\\n$yellow: #f5c844;\\n$green: #2a9d8f;\\n$blue: #4351d1;\\n$pink: #f5c3c2;\\n$grey: #f2eded;\\n\\nedge {\\n  width: 2px;\\n  curve-style: bezier;\\n  target-arrow-shape: vee;\\n  arrow-scale: 1.5;\\n  line-color: #5a5a5a;\\n  source-arrow-color: #5a5a5a;\\n  target-arrow-color: #5a5a5a;\\n  label: data(label);\\n  text-background-color: $background;\\n  text-background-opacity: 1;\\n  text-background-padding: 5;\\n  font-family: $fontFamily;\\n  font-size: 14;\\n}\\n\\n:childless[shapeWidth] {\\n  width: data(shapeWidth);\\n}\\n\\n:childless[shapeHeight] {\\n  height: data(shapeHeight);\\n}\\n\\n:childless[textMarginY] {\\n  text-margin-y: data(textMarginY);\\n}\\n\\n:childless[textMarginX] {\\n  text-margin-x: data(textMarginX);\\n}\\n\\n:childless {\\n  label: data(label);\\n  font-family: $fontFamily;\\n  text-wrap: wrap;\\n  text-max-width: 150;\\n  width: 200;\\n  height: 100;\\n  font-size: 16;\\n  text-valign: center;\\n  text-halign: center;\\n  line-height: 1.4;\\n  shape: rectangle;\\n  background-color: $yellow;\\n  color: $color;\\n  border-width: 0;\\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: 200;\\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}\\n\\n:childless.shape_rectangle {\\n  shape: rectangle;\\n}\\n:childless.shape_roundrectangle {\\n  shape: roundrectangle;\\n}\\n:childless.shape_ellipse {\\n  shape: ellipse;\\n}\\n:childless.shape_triangle {\\n  shape: triangle;\\n}\\n:childless.shape_pentagon {\\n  shape: pentagon;\\n}\\n:childless.shape_hexagon {\\n  shape: hexagon;\\n}\\n:childless.shape_heptagon {\\n  shape: heptagon;\\n}\\n:childless.shape_octagon {\\n  shape: octagon;\\n}\\n:childless.shape_star {\\n  shape: star;\\n}\\n:childless.shape_barrel {\\n  shape: barrel;\\n}\\n:childless.shape_diamond {\\n  shape: diamond;\\n}\\n:childless.shape_vee {\\n  shape: vee;\\n}\\n:childless.shape_rhomboid {\\n  shape: rhomboid;\\n}\\n:childless.shape_right-rhomboid {\\n  shape: right-rhomboid;\\n}\\n:childless.shape_tag {\\n  shape: tag;\\n}\\n:childless.shape_round-rectangle {\\n  shape: round-rectangle;\\n}\\n:childless.shape_cut-rectangle {\\n  shape: cut-rectangle;\\n}\\n:childless.shape_bottom-round-rectangle {\\n  shape: bottom-round-rectangle;\\n}\\n:childless.shape_concave-hexagon {\\n  shape: concave-hexagon;\\n}\\n:childless.border_none {\\n  border-width: 0;\\n  border-style: solid;\\n}\\n:childless.border_solid {\\n  border-width: 2;\\n  border-style: solid;\\n}\\n:childless.border_dashed {\\n  border-width: 2;\\n  border-style: dashed;\\n}\\n:childless.border_dotted {\\n  border-width: 2;\\n  border-style: dotted;\\n}\\n\\n:childless[w] {\\n  width: data(w);\\n}\\n\\n:childless[h] {\\n  height: data(h);\\n}\\n\\nedge.line_solid {\\n  line-style: solid;\\n}\\nedge.line_dotted {\\n  line-style: dotted;\\n}\\nedge.line_dashed {\\n  line-style: dashed;\\n}\\nedge.target-arrow_triangle {\\n  target-arrow-shape: triangle;\\n}\\nedge.target-arrow_triangle-tee {\\n  target-arrow-shape: triangle-tee;\\n}\\nedge.target-arrow_circle-triangle {\\n  target-arrow-shape: circle-triangle;\\n}\\nedge.target-arrow_triangle-cross {\\n  target-arrow-shape: triangle-cross;\\n}\\nedge.target-arrow_triangle-backcurve {\\n  target-arrow-shape: triangle-backcurve;\\n}\\nedge.target-arrow_vee {\\n  target-arrow-shape: vee;\\n}\\nedge.target-arrow_tee {\\n  target-arrow-shape: tee;\\n}\\nedge.target-arrow_square {\\n  target-arrow-shape: square;\\n}\\nedge.target-arrow_circle {\\n  target-arrow-shape: circle;\\n}\\nedge.target-arrow_diamond {\\n  target-arrow-shape: diamond;\\n}\\nedge.target-arrow_chevron {\\n  target-arrow-shape: chevron;\\n}\\nedge.target-arrow_none {\\n  target-arrow-shape: none;\\n}\\nedge.source-arrow_triangle {\\n  source-arrow-shape: triangle;\\n}\\nedge.source-arrow_triangle-tee {\\n  source-arrow-shape: triangle-tee;\\n}\\nedge.source-arrow_circle-triangle {\\n  source-arrow-shape: circle-triangle;\\n}\\nedge.source-arrow_triangle-cross {\\n  source-arrow-shape: triangle-cross;\\n}\\nedge.source-arrow_triangle-backcurve {\\n  source-arrow-shape: triangle-backcurve;\\n}\\nedge.source-arrow_vee {\\n  source-arrow-shape: vee;\\n}\\nedge.source-arrow_tee {\\n  source-arrow-shape: tee;\\n}\\nedge.source-arrow_square {\\n  source-arrow-shape: square;\\n}\\nedge.source-arrow_circle {\\n  source-arrow-shape: circle;\\n}\\nedge.source-arrow_diamond {\\n  source-arrow-shape: diamond;\\n}\\nedge.source-arrow_chevron {\\n  source-arrow-shape: chevron;\\n}\\nedge.source-arrow_none {\\n  source-arrow-shape: none;\\n}\\n\\n:parent {\\n  padding: 10;\\n  border-style: solid;\\n  border-width: 2;\\n  border-color: $color;\\n  background-color: $background;\\n  text-valign: top;\\n  font-family: $fontFamily;\\n  label: data(label);\\n  color: $color;\\n  font-size: 19.5px;\\n  text-margin-y: -5;\\n}\\n\\n:parent.color_white {\\n  background-color: white;\\n}\\n:parent.color_grey {\\n  background-color: $grey;\\n}\\n",
+  "layout": {
+    "name": "dagre",
+    "spacingFactor": 1.05
+  }
+}
+=====`;
+
+export default template;

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

@@ -0,0 +1,28 @@
+const template = `
+Mind Mapping .color_purple
+  Organization
+    Breaks .color_orange
+  Learning Style .color_orange
+    Read .color_purple
+    Listen .color_purple
+    Sumamrize .color_purple
+  Goals
+  Motivation .color_purple.shape_ellipse
+    Tips .color_orange
+    Roadmap .color_orange
+  Review
+    Notes .color_red
+    Method .color_red
+    Discuss .color_red
+
+=====
+{
+  "cytoscapeStyle": "@import url(\\"https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap\\");\\n\\n$background: white;\\n$color: #314137;\\n$fontFamily: \\"Gloria Hallelujah\\", sans-serif;\\n$green: #d2e6e0;\\n$red: #f4bab2;\\n$orange: #f9dcbe;\\n$purple: #dfcefb;\\n$grey: #fefbf7;\\n\\nedge {\\n  width: 3px;\\n  curve-style: bezier;\\n  target-arrow-shape: triangle;\\n  line-color: $color;\\n  source-arrow-color: $color;\\n  target-arrow-color: $color;\\n  arrow-scale: 2;\\n  label: data(label);\\n  text-background-color: $background;\\n  text-background-opacity: 1;\\n  text-background-padding: 5;\\n  font-family: $fontFamily;\\n  font-size: 14;\\n  source-distance-from-node: 10;\\n  target-distance-from-node: 10;\\n}\\n\\n:childless[shapeWidth] {\\n  width: data(shapeWidth);\\n}\\n\\n:childless[shapeHeight] {\\n  height: data(shapeHeight);\\n}\\n\\n:childless[textMarginY] {\\n  text-margin-y: data(textMarginY);\\n}\\n\\n:childless[textMarginX] {\\n  text-margin-x: data(textMarginX);\\n}\\n\\n:childless {\\n  label: data(label);\\n  font-family: $fontFamily;\\n  text-wrap: wrap;\\n  text-max-width: 100;\\n  width: 140;\\n  height: label;\\n  padding: 12;\\n  font-size: 16;\\n  text-valign: center;\\n  text-halign: center;\\n  line-height: 1.4;\\n  shape: roundrectangle;\\n  background-color: $green;\\n  color: $color;\\n  border-color: $color;\\n  border-width: 0;\\n  border-style: solid;\\n  font-weight: 500;\\n}\\n\\n:childless.color_red {\\n  background-color: $red;\\n}\\n:childless.color_orange {\\n  background-color: $orange;\\n}\\n:childless.color_green {\\n  background-color: $green;\\n}\\n:childless.color_purple {\\n  background-color: $purple;\\n}\\n:childless.color_grey {\\n  background-color: $grey;\\n}\\n\\n:childless.shape_rectangle {\\n  shape: rectangle;\\n}\\n:childless.shape_roundrectangle {\\n  shape: roundrectangle;\\n}\\n:childless.shape_ellipse {\\n  shape: ellipse;\\n}\\n:childless.shape_triangle {\\n  shape: triangle;\\n}\\n:childless.shape_pentagon {\\n  shape: pentagon;\\n}\\n:childless.shape_hexagon {\\n  shape: hexagon;\\n}\\n:childless.shape_heptagon {\\n  shape: heptagon;\\n}\\n:childless.shape_octagon {\\n  shape: octagon;\\n}\\n:childless.shape_star {\\n  shape: star;\\n}\\n:childless.shape_barrel {\\n  shape: barrel;\\n}\\n:childless.shape_diamond {\\n  shape: diamond;\\n}\\n:childless.shape_vee {\\n  shape: vee;\\n}\\n:childless.shape_rhomboid {\\n  shape: rhomboid;\\n}\\n:childless.shape_right-rhomboid {\\n  shape: right-rhomboid;\\n}\\n:childless.shape_tag {\\n  shape: tag;\\n}\\n:childless.shape_round-rectangle {\\n  shape: round-rectangle;\\n}\\n:childless.shape_cut-rectangle {\\n  shape: cut-rectangle;\\n}\\n:childless.shape_bottom-round-rectangle {\\n  shape: bottom-round-rectangle;\\n}\\n:childless.shape_concave-hexagon {\\n  shape: concave-hexagon;\\n}\\n:childless.border_none {\\n  border-width: 0;\\n  border-style: solid;\\n}\\n:childless.border_solid {\\n  border-width: 2;\\n  border-style: solid;\\n}\\n:childless.border_dashed {\\n  border-width: 2;\\n  border-style: dashed;\\n}\\n:childless.border_dotted {\\n  border-width: 2;\\n  border-style: dotted;\\n}\\n\\n:childless[w] {\\n  width: data(w);\\n}\\n\\n:childless[h] {\\n  height: data(h);\\n}\\n\\nedge.line_solid {\\n  line-style: solid;\\n}\\nedge.line_dotted {\\n  line-style: dotted;\\n}\\nedge.line_dashed {\\n  line-style: dashed;\\n}\\nedge.target-arrow_triangle {\\n  target-arrow-shape: triangle;\\n}\\nedge.target-arrow_triangle-tee {\\n  target-arrow-shape: triangle-tee;\\n}\\nedge.target-arrow_circle-triangle {\\n  target-arrow-shape: circle-triangle;\\n}\\nedge.target-arrow_triangle-cross {\\n  target-arrow-shape: triangle-cross;\\n}\\nedge.target-arrow_triangle-backcurve {\\n  target-arrow-shape: triangle-backcurve;\\n}\\nedge.target-arrow_vee {\\n  target-arrow-shape: vee;\\n}\\nedge.target-arrow_tee {\\n  target-arrow-shape: tee;\\n}\\nedge.target-arrow_square {\\n  target-arrow-shape: square;\\n}\\nedge.target-arrow_circle {\\n  target-arrow-shape: circle;\\n}\\nedge.target-arrow_diamond {\\n  target-arrow-shape: diamond;\\n}\\nedge.target-arrow_chevron {\\n  target-arrow-shape: chevron;\\n}\\nedge.target-arrow_none {\\n  target-arrow-shape: none;\\n}\\nedge.source-arrow_triangle {\\n  source-arrow-shape: triangle;\\n}\\nedge.source-arrow_triangle-tee {\\n  source-arrow-shape: triangle-tee;\\n}\\nedge.source-arrow_circle-triangle {\\n  source-arrow-shape: circle-triangle;\\n}\\nedge.source-arrow_triangle-cross {\\n  source-arrow-shape: triangle-cross;\\n}\\nedge.source-arrow_triangle-backcurve {\\n  source-arrow-shape: triangle-backcurve;\\n}\\nedge.source-arrow_vee {\\n  source-arrow-shape: vee;\\n}\\nedge.source-arrow_tee {\\n  source-arrow-shape: tee;\\n}\\nedge.source-arrow_square {\\n  source-arrow-shape: square;\\n}\\nedge.source-arrow_circle {\\n  source-arrow-shape: circle;\\n}\\nedge.source-arrow_diamond {\\n  source-arrow-shape: diamond;\\n}\\nedge.source-arrow_chevron {\\n  source-arrow-shape: chevron;\\n}\\nedge.source-arrow_none {\\n  source-arrow-shape: none;\\n}\\n\\n:parent {\\n  padding: 10;\\n  border-style: solid;\\n  border-width: 2;\\n  border-color: $color;\\n  background-color: $background;\\n  text-valign: top;\\n  font-family: $fontFamily;\\n  label: data(label);\\n  color: $color;\\n  font-size: 19.5px;\\n  text-margin-y: -5;\\n}\\n\\n:parent.color_white {\\n  background-color: white;\\n}\\n:parent.color_grey {\\n  background-color: $grey;\\n}\\n",
+  "layout": {
+    "name": "cose",
+    "spacingFactor": 1.25
+  }
+}
+=====`;
+
+export default template;