diff --git a/demos/flowchart.html b/demos/flowchart.html index 0c71a2bf84..7d5764f7be 100644 --- a/demos/flowchart.html +++ b/demos/flowchart.html @@ -16,6 +16,15 @@

Comparison "graph vs. flowchart"

Sample 1

graph

+
+      flowchart TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        A --> |Vroom| F[fa:fa-car Car]
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+    
     ---
     title: This is a complicated flow
diff --git a/packages/mermaid/src/diagrams/flowchart/styles.ts b/packages/mermaid/src/diagrams/flowchart/styles.ts
index ade9613fb4..080eba84b8 100644
--- a/packages/mermaid/src/diagrams/flowchart/styles.ts
+++ b/packages/mermaid/src/diagrams/flowchart/styles.ts
@@ -57,7 +57,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
   .node path {
     fill: ${options.mainBkg};
     stroke: ${options.nodeBorder};
-    stroke-width: 1px;
+    stroke-width: 10px;
   }
   .rough-node .label text , .node .label text, .image-shape .label, .icon-shape .label {
     text-anchor: middle;
diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts
index 7dab485b4b..c87accb452 100644
--- a/packages/mermaid/src/rendering-util/createText.ts
+++ b/packages/mermaid/src/rendering-util/createText.ts
@@ -22,8 +22,8 @@ async function addHtmlSpan(element, node, width, classes, addBackground = false)
   const fo = element.append('foreignObject');
   // This is not the final width but used in order to make sure the foreign
   // object in firefox gets a width at all. The final width is fetched from the div
-  fo.attr('width', `${10 * width}px`);
-  fo.attr('height', `${10 * width}px`);
+  fo.attr('width', `${1000 * width}px`);
+  fo.attr('height', `${1000 * width}px`);
 
   const div = fo.append('xhtml:div');
   let label = node.label;
@@ -143,8 +143,8 @@ function createFormattedText(
     bkg
       .attr('x', bbox.x - padding)
       .attr('y', bbox.y - padding)
-      .attr('width', bbox.width + 2 * padding)
-      .attr('height', bbox.height + 2 * padding);
+      .attr('width', bbox.width + 500 * padding)
+      .attr('height', bbox.height + 500 * padding);
 
     return labelGroup.node();
   } else {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index 41368ee1e2..527143b2f8 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -395,7 +395,7 @@ const fixCorners = function (lineData) {
           Math.abs(nextPoint.x - prevPoint.x),
           Math.abs(nextPoint.y - prevPoint.y)
         );
-        const r = 5;
+        const r = 50000;
         if (cornerPoint.x === newPrevPoint.x) {
           newCornerPoint = {
             x: xDiff < 0 ? newPrevPoint.x - r + a : newPrevPoint.x + r - a,