Adding rendering tests and unit tests

cypress/integration/rendering/flowchart-elk.spec.js

@@ -684,4 +684,149 @@ A --> B
       { titleTopMargin: 0 }
     );
   });
+  describe('Markdown strings flowchart-elk (#4220)', () => {
+    describe('html labels', () => {
+      it('With styling and classes', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+    classDef someclass fill:#f96
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('With formatting in a node', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+  a{"\`The **cat** in the hat\`"} -- 1o --> b
+  a -- 2o --> c
+  a -- 3o --> d
+  g --2i--> a
+  d --1i--> a
+  h --3i -->a
+  b --> d(The dog in the hog)
+  c --> d
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('New line in node and formatted edge label', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Wrapping long text with a new line', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+b(\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`) --> c
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Sub graphs and markdown strings', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+subgraph "One"
+  a("\`The **cat**
+  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+  c("\`The **cat**
+  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+    });
+
+    describe('svg text labels', () => {
+      it('With styling and classes', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+    classDef someclass fill:#f96
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('With formatting in a node', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+  a{"\`The **cat** in the hat\`"} -- 1o --> b
+  a -- 2o --> c
+  a -- 3o --> d
+  g --2i--> a
+  d --1i--> a
+  h --3i -->a
+  b --> d(The dog in the hog)
+  c --> d
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('New line in node and formatted edge label', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Wrapping long text with a new line', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Sub graphs and markdown strings', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+subgraph "One"
+  a("\`The **cat**
+  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+  c("\`The **cat**
+  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+    });
+  });
 });

cypress/integration/rendering/flowchart-v2.spec.js

@@ -685,4 +685,149 @@ A ~~~ B
       { titleTopMargin: 0 }
     );
   });
+  describe('Markdown strings flowchart (#4220)', () => {
+    describe('html labels', () => {
+      it('With styling and classes', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+    classDef someclass fill:#f96
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('With formatting in a node', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+  a{"\`The **cat** in the hat\`"} -- 1o --> b
+  a -- 2o --> c
+  a -- 3o --> d
+  g --2i--> a
+  d --1i--> a
+  h --3i -->a
+  b --> d(The dog in the hog)
+  c --> d
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('New line in node and formatted edge label', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Wrapping long text with a new line', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Sub graphs and markdown strings', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+subgraph "One"
+  a("\`The **cat**
+  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+  c("\`The **cat**
+  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+    });
+
+    describe('svg text labels', () => {
+      it('With styling and classes', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+    classDef someclass fill:#f96
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('With formatting in a node', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+  a{"\`The **cat** in the hat\`"} -- 1o --> b
+  a -- 2o --> c
+  a -- 3o --> d
+  g --2i--> a
+  d --1i--> a
+  h --3i -->a
+  b --> d(The dog in the hog)
+  c --> d
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('New line in node and formatted edge label', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Wrapping long text with a new line', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Sub graphs and markdown strings', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+subgraph "One"
+  a("\`The **cat**
+  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+  c("\`The **cat**
+  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+    });
+  });
 });

cypress/integration/rendering/mindmap.spec.ts

@@ -223,5 +223,18 @@ mindmap
       shouldHaveRoot
     );
   });
+  describe('Markdown strings mindmaps (#4220)', () => {
+    it('Formatted label with linebreak and a wrapping label and emojis', () => {
+      imgSnapshotTest(
+        `mindmap
+    id1[\`**Start** with
+    a second line 😎\`]
+      id2[\`The dog in **the** hog... a *very long text* about it
+Word!\`]
+`,
+        { titleTopMargin: 0 }
+      );
+    });
+  });
   /* The end */
 });

cypress/platform/knsv2.html

@@ -58,91 +58,23 @@
   </head>
   <body>
     <pre id="diagram" class="mermaid">
-flowchart LR
+      %%{init: {"flowchart": {"htmlLabels": false}} }%%
-    A:::someclass --> B[`The **cat** in the hat`]:::someclass
-    id1(Start)-->id2(Stop)
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
-    classDef someclass fill:#f96
-</pre
-    >
-    <pre id="diagram" class="mermaid">
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-%%
-flowchart LR
-    A:::someclass --> B[`The **cat** in the hat`]:::someclass
-    id1(Start)-->id2(Stop)
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
-    classDef someclass fill:#f96
-</pre
-    >
-    <pre id="diagram" class="mermaid">
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-%%
-graph LR
-  a{`The **cat** in the hat`} -- 1o --> b
-  a -- 2o --> c
-  a -- 3o --> d
-  g --2i--> a
-  d --1i--> a
-  h --3i -->a
-  b --> d(The dog in the hog)
-  c --> d
-</pre
-    >
-    <pre id="diagram" class="mermaid">
-      %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-flowchart LR
-b(`The dog in **the** hog.(1)
-NL`) --`1o **bold**`--> c
-</pre
-    >
-    <pre id="diagram" class="mermaid">
-flowchart-elk LR
-b(`The dog in **the** hog.(1)
-NL`) --`1o **bold**`--> c
-</pre
-    >
-    <pre id="diagram" class="mermaid">
-flowchart-elk LR
-b(`The dog in **the** hog.(1).. a a a a *very long text* about it
-Word!
-
-Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `) --> c
-</pre
-    >
-    <pre id="diagram" class="mermaid">
-      %%{init: {"flowchart": {"htmlLabels": true}} }%%
 flowchart-elk LR
 b(`The dog in **the** hog(2)... a a a a *very long text* about it
 Word!
 Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `)
 </pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
-      %%{init: {"flowchart": {"htmlLabels": false}} }%%
 flowchart-elk LR
 b("The dog in the hog... a very<br/>long text about it<br/>Word!")
 </pre>
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
-      %%{init: {"flowchart": {"htmlLabels": true}} }%%
 flowchart-elk LR
 b("The dog in the hog... a very<br/>long text about it<br/>Word!")
 </pre>
-    <pre id="diagram" class="mermaid">
-flowchart-elk LR
-subgraph "One"
-  a(`The **cat**
-  in the hat`) -- "1o" --> b{{`The **dog** in the hog`}}
-end
-subgraph `**Two**`
-  c(`The **cat**
-  in the hat`) -- `1o **ipa**` --> d("The dog in the hog")
-end
-</pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 mindmap
     id1[`**Start2**
     second line 😎 with long text that is wrapping to the next line`]
@@ -157,12 +89,12 @@ mindmap
     </pre>
     <pre id="diagram" class="mermaid">
 mindmap
-    id1[`**Start** with
+    id1["`**Start** with
-    a second line 😎`]
+    a second line 😎`"]
-      id2[`The dog in **the** hog... a *very long text* about it
+      id2["`The dog in **the** hog... a *very long text* about it
-Word!`]
+Word!`"]
     </pre>
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 flowchart TB
   %% I could not figure out how to use double quotes in labels in Mermaid
@@ -218,7 +150,7 @@ flowchart TB
 </pre
     >
     <br />
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 flowchart TB
   %% I could not figure out how to use double quotes in labels in Mermaid
   subgraph ibm[IBM Espresso CPU]
@@ -274,7 +206,7 @@ flowchart TB
     >
     <br />
     &nbsp;
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
       flowchart LR
   B1 --be be--x B2
   B1 --bo bo--o B3
@@ -307,7 +239,7 @@ flowchart TB
   B6 --> B5
   </pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 sequenceDiagram
     Customer->>+Stripe: Makes a payment request
     Stripe->>+Bank: Forwards the payment request to the bank
@@ -320,7 +252,7 @@ sequenceDiagram
     Customer->>+Merchant: Receives goods or services
         </pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 mindmap
   root((mindmap))
     Origins
@@ -340,7 +272,7 @@ mindmap
       Mermaid
     </pre>
     <br />
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
   example-diagram
     </pre>
 
@@ -368,7 +300,7 @@ mindmap
           htmlLabels: false,
           // htmlLabels: true,
         },
-        htmlLabels: false,
+        // htmlLabels: true,
         gantt: {
           useMaxWidth: false,
         },

packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js

@@ -0,0 +1,64 @@
+import flowDb from '../flowDb';
+import flow from './flow';
+import { setConfig } from '../../../config';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe('parsing a flow chart with markdown strings', function () {
+  beforeEach(function () {
+    flow.parser.yy = flowDb;
+    flow.parser.yy.clear();
+  });
+
+  it('mardown formatting in nodes and labels', function () {
+    const res = flow.parser.parse(`flowchart
+A["\`The cat in **the** hat\`"]-- "\`The *bat* in the chat\`" -->B["The dog in the hog"] -- "The rat in the mat" -->C;`);
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(vert['A'].id).toBe('A');
+    expect(vert['A'].text).toBe('The cat in **the** hat');
+    expect(vert['A'].labelType).toBe('markdown');
+    expect(vert['B'].id).toBe('B');
+    expect(vert['B'].text).toBe('The dog in the hog');
+    expect(vert['B'].labelType).toBe('text');
+    expect(edges.length).toBe(2);
+    expect(edges[0].start).toBe('A');
+    expect(edges[0].end).toBe('B');
+    expect(edges[0].type).toBe('arrow_point');
+    expect(edges[0].text).toBe('The *bat* in the chat');
+    expect(edges[0].labelType).toBe('markdown');
+    expect(edges[1].start).toBe('B');
+    expect(edges[1].end).toBe('C');
+    expect(edges[1].type).toBe('arrow_point');
+    expect(edges[1].text).toBe('The rat in the mat');
+    expect(edges[1].labelType).toBe('text');
+  });
+  it('mardown formatting in subgraphs', function () {
+    const res = flow.parser.parse(`flowchart LR
+subgraph "One"
+  a("\`The **cat**
+  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+  c("\`The **cat**
+  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end`);
+
+    const subgraphs = flow.parser.yy.getSubGraphs();
+    expect(subgraphs.length).toBe(2);
+    const subgraph = subgraphs[0];
+
+    expect(subgraph.nodes.length).toBe(2);
+    expect(subgraph.title).toBe('One');
+    expect(subgraph.labelType).toBe('text');
+
+    const subgraph2 = subgraphs[1];
+    expect(subgraph2.nodes.length).toBe(2);
+    expect(subgraph2.title).toBe('**Two**');
+    expect(subgraph2.labelType).toBe('markdown');
+  });
+});

packages/mermaid/src/diagrams/flowchart/parser/flow.jison

@@ -38,9 +38,9 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <acc_descr_multiline>[\}]                       { this.popState(); }
 <acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
 // <acc_descr_multiline>.*[^\n]*                    {  return "acc_descr_line"}
-[`]          { this.begin("md_string");}
+["][`]          { this.begin("md_string");}
-<md_string>[^`]+        { return "MD_STR";}
+<md_string>[^`"]+        { return "MD_STR";}
-<md_string>[`]          { this.popState();}
+<md_string>[`]["]          { this.popState();}
 ["]                     this.begin("string");
 <string>["]             this.popState();
 <string>[^"]*           return "STR";

packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js

@@ -167,12 +167,15 @@ function positionNodes(cy) {
 export const draw = async (text, id, version, diagObj) => {
   const conf = getConfig();
 
+  // console.log('Config: ', conf);
+  conf.htmlLabels = false;
+
   // This is done only for throwing the error if the text is not valid.
   diagObj.db.clear();
   // Parse the graph definition
   diagObj.parser.parse(text);
 
-  log.debug('Renering info diagram\n' + text);
+  log.debug('Renering mindmap diagram\n' + text, diagObj);
 
   const securityLevel = getConfig().securityLevel;
   // Handle root and Document for when rendering in sandbox mode

packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison

@@ -42,9 +42,9 @@
 // !(-\()            return 'NODE_ID';
 [^\(\[\n\-\)\{\}]+         return 'NODE_ID';
 <<EOF>>            return 'EOF';
-<NODE>[`]          { this.begin("NSTR2");}
+<NODE>["][`]          { this.begin("NSTR2");}
-<NSTR2>[^`]+        { return "NODE_DESCR";}
+<NSTR2>[^`"]+        { return "NODE_DESCR";}
-<NSTR2>[`]          { this.popState();}
+<NSTR2>[`]["]          { this.popState();}
 <NODE>["]          { yy.getLogger().trace('Starting NSTR');this.begin("NSTR");}
 <NSTR>[^"]+        { yy.getLogger().trace('description:', yytext); return "NODE_DESCR";}
 <NSTR>["]          {this.popState();}