Making sure to addDiagrams before detectType call

cypress/platform/knsv.html

@@ -15,8 +15,6 @@
         /* font-size: 18px !important; */
         width: 100%;
         display: flex;
-        flex-direction: column;
-        margin-left: 20px;
         }
       h1 { color: grey;}
       .mermaid2,.mermaid3 {
@@ -33,30 +31,26 @@
 
 
 <div class="mermaid2" style="width: 50%;">
-flowchart LR
-  classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
-  classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
-  classDef type stroke:#502604,fill:#FAB565,color:#502604,rx:20px,ry:20px;;
-
-  O0("Joe")
-  class O0 aPID;
-
-  O1("Person")
-  class O1 crm;
-  O0 -- has type -->O1["Person"]
-
-  O2("aat:300411314")
-  class O2 type;
-  click O2 function "Sorry the newline html tags are not being processed correctly<br/> So all of this appears on the <br/> same line."
-  O0 -- has type -->O2["Bug"]
-  click O0 function "Lots of great info about Joe<br>Lots of great info about Joe<br>burt<br>fred";
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Mee
 </div>
-<div class="mermaid" style="width: 50%;">
-classDiagram-v2
-  class Shape
-  link Shape "https://www.github.com" "This is a<br/>tooltip<br>for a link"
-  class Shape2
-  click Shape2 href "https://www.github.com" "This is a tooltip for a link"
+<div class="mermaid2" style="width: 50%;">
+   pie
+      accTitle: My Pie Chart Accessibility Title
+      accDescr: My Pie Chart Accessibility Description
+
+    title Key elements in Product X
+    "Calcium" : 42.96
+    "Potassium" : 50.05
+    "Magnesium" : 10.01
+    "Iron" :  5
 </div>
 <div class="mermaid2" style="width: 50%;">
  gitGraph
@@ -223,7 +217,7 @@ class Class10 {
   size()
 }
       </div>
-      <div class="mermaid2" style="width: 100%;">
+      <div class="mermaid" style="width: 100%;">
 %%{init: {'config': {'wrap': true }}}%%
         sequenceDiagram
         participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
@@ -303,15 +297,47 @@ flowchart TD
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        maxTextSize: 900000,
-        startOnLoad: true,
-        securityLevel: 'loose',
-        logLevel: 0,
+        // theme: 'dark',
+        // theme: 'forest',
+        // arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         flowchart: {
-          curve: 'basis',
-          useMaxWidth: false,
-          htmlLabels: true,
+    nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
+    useMaxWidth: false,
+    // defaultRenderer: 'dagre-d3',
+  },
+  class: {
+    // defaultRenderer: 'dagre-d3',
+    htmlLabels: true,
+  },
+  sequence: {
+    // mirrorActors: false,'
+    wrap: false,
+  },
+        // gantt: { axisFormat: '%m/%d/%Y' },
+  //       sequence: {
+  //   actorFontFamily: 'courier',
+  //   actorMargin: 50,
+  //   showSequenceNumbers: false,
+  //   // hideUnusedParticipants: true,
+  //   // forceMenus: true,
+  // },
+  //       // sequenceDiagram: { actorMargin: 300, forceMenus: false }, // deprecated
+        // fontFamily: '"times", sans-serif',
+        // fontFamily: 'courier',
+        state: {
+          nodeSpacing: 50,
+          rankSpacing: 50,
+          defaultRenderer: 'dagre-d3',
         },
+        logLevel: 0,
+        fontSize: 18,
+        curve: 'cardinal',
+        // securityLevel: 'sandbox',
+        // themeVariables: {relationLabelColor: 'red'}
+        wrap: true,
       });
       function callback() {
   alert('It worked');

src/diagrams/class/classDb.js

@@ -206,9 +206,7 @@ const setTooltip = function (ids, tooltip) {
     }
   });
 };
-export const getTooltip = function (id) {
-  return classes[id].tooltip;
-};
+
 /**
  * Called by parser when a link is found. Adds the URL to the vertex data.
  *
@@ -339,7 +337,6 @@ const setupToolTips = function (element) {
         .text(el.attr('title'))
         .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
         .style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px');
-      tooltipElem.html(tooltipElem.html().replace(/&lt;br\/&gt;/g, '<br/>'));
       el.classed('hover', true);
     })
     .on('mouseout', function () {
@@ -381,7 +378,6 @@ export default {
   setClickEvent,
   setCssClass,
   setLink,
-  getTooltip,
   setTooltip,
   lookUpDomId,
 };

src/diagrams/class/classRenderer-v2.js

@@ -29,10 +29,8 @@ let conf = {
  * >} classes
  *   Object containing the vertices.
  * @param {SVGGElement} g The graph that is to be drawn.
- * @param _id
- * @param diagObj
  */
-export const addClasses = function (classes, g, _id, diagObj) {
+export const addClasses = function (classes, g) {
   // const svg = select(`[id="${svgId}"]`);
   const keys = Object.keys(classes);
   log.info('keys:', keys);
@@ -110,7 +108,6 @@ export const addClasses = function (classes, g, _id, diagObj) {
       style: styles.style,
       id: vertex.id,
       domId: vertex.domId,
-      tooltip: diagObj.db.getTooltip(vertex.id) || '',
       haveCallback: vertex.haveCallback,
       link: vertex.link,
       width: vertex.type === 'group' ? 500 : undefined,
@@ -322,7 +319,7 @@ export const draw = function (text, id, _version, diagObj) {
   const relations = diagObj.db.getRelations();
 
   log.info(relations);
-  addClasses(classes, g, id, diagObj);
+  addClasses(classes, g, id);
   addRelations(relations, g);
 
   // Add custom shapes

src/diagrams/flowchart/flowDb.js

@@ -409,7 +409,6 @@ const setupToolTips = function (element) {
         .text(el.attr('title'))
         .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
         .style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px');
-      tooltipElem.html(tooltipElem.html().replace(/&lt;br\/&gt;/g, '<br/>'));
       el.classed('hover', true);
     })
     .on('mouseout', function () {

src/mermaidAPI.js

@@ -40,13 +40,21 @@ import utils, { directiveSanitizer } from './utils';
 import assignWithDepth from './assignWithDepth';
 import DOMPurify from 'dompurify';
 import mermaid from './mermaid';
+
+let hasLoadedDiagrams = false;
+
 /**
  * @param text
  * @param dia
  * @returns {any}
  */
 function parse(text, dia) {
+  if (!hasLoadedDiagrams) {
+    addDiagrams();
+    hasLoadedDiagrams = true;
+  }
   var parseEncounteredException = false;
+
   try {
     const diag = dia ? dia : new Diagram(text);
     diag.db.clear();
@@ -512,7 +520,10 @@ function initialize(options) {
 
   updateRendererConfigs(config);
   setLogLevel(config.logLevel);
-  addDiagrams();
+  if (!hasLoadedDiagrams) {
+    addDiagrams();
+    hasLoadedDiagrams = true;
+  }
 }
 
 const mermaidAPI = Object.freeze({