#3308 Allowing br tags in tooltips

docs: Remove 404 links

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014 - 2021 Knut Sveidqvist
+Copyright (c) 2014 - 2022 Knut Sveidqvist
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

cypress/platform/knsv.html

@@ -15,6 +15,8 @@
         /* font-size: 18px !important; */
         width: 100%;
         display: flex;
+        flex-direction: column;
+        margin-left: 20px;
         }
       h1 { color: grey;}
       .mermaid2,.mermaid3 {
@@ -31,26 +33,30 @@
 
 
 <div class="mermaid2" style="width: 50%;">
-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="mermaid2" style="width: 50%;">
-   pie
-      accTitle: My Pie Chart Accessibility Title
-      accDescr: My Pie Chart Accessibility Description
+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;;
 
-    title Key elements in Product X
-    "Calcium" : 42.96
-    "Potassium" : 50.05
-    "Magnesium" : 10.01
-    "Iron" :  5
+  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";
+</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>
 <div class="mermaid2" style="width: 50%;">
  gitGraph
@@ -217,7 +223,7 @@ class Class10 {
   size()
 }
       </div>
-      <div class="mermaid" style="width: 100%;">
+      <div class="mermaid2" 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
@@ -297,47 +303,15 @@ flowchart TD
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        // theme: 'dark',
-        // theme: 'forest',
-        // arrowMarkerAbsolute: true,
-        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
-        flowchart: {
-    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',
-        },
+        maxTextSize: 900000,
+        startOnLoad: true,
+        securityLevel: 'loose',
         logLevel: 0,
-        fontSize: 18,
-        curve: 'cardinal',
-        // securityLevel: 'sandbox',
-        // themeVariables: {relationLabelColor: 'red'}
-        wrap: true,
+        flowchart: {
+          curve: 'basis',
+          useMaxWidth: false,
+          htmlLabels: true,
+        },
       });
       function callback() {
   alert('It worked');

cypress/platform/knsv2.html

@@ -41,7 +41,10 @@
   <body>
     <div>Security check</div>
     <div class="flex">
-      <div id="diagram" class="mermaid"></div>
+      <div id="diagram" class="mermaid">
+sequenceDiagram
+  Nothing:Valid;
+      </div>
       <div id="res" class=""></div>
   <script src="./mermaid.js"></script>
     <script>
@@ -49,28 +52,6 @@
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'forest',
-        arrowMarkerAbsolute: true,
-        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
-        logLevel: 0,
-        state: {
-          defaultRenderer: 'dagre-wrapper',
-        },
-        flowchart: {
-          // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10,
-    curve: 'cardinal',
-    htmlLabels: true,
-        },
-        htmlLabels: false,
-        // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
-        // sequenceDiagram: { actorMargin: 300 } // deprecated
-        // fontFamily: '"times", sans-serif',
-        // fontFamily: 'courier',
-        fontSize: 18,
-        curve: 'basis',
-        securityLevel: 'strict',
         startOnLoad: false,
         // themeVariables: {relationLabelColor: 'red'}
       });
@@ -78,19 +59,12 @@
   alert('It worked');
 }
 
-      var diagram = '%%{init: {"flowchart": {"htmlLabels": "false"}} }%%\n';
-diagram += 'flowchart\n';
-diagram += 'A["<ifra';
-diagram += "me srcdoc='<scrip";
-diagram += 't src=http://localhost:9000/exploit.js>';
-diagram += '</scr';
-diagram += 'ipt>\'></iframe>"]';
-
-console.log(diagram);
 // document.querySelector('#diagram').innerHTML = diagram;
-mermaid.render('diagram', diagram, (res) => {
-  document.querySelector('#res').innerHTML = res;
-});
+try {
+  mermaid.initThrowsErrors(undefined, '#diagram');
+} catch (err) {
+  console.log('Caught error:', err);
+}
     </script>
   </body>
 </html>

docs/_sidebar.md

@@ -25,6 +25,7 @@
   - [Mermaid API Configuration](Setup.md)
   - [Directives](directives.md)
   - [Theming](theming.md)
+  - [Accessibility](accessibility.md)
   - [Mermaid CLI](mermaidCLI.md)
   - [Advanced usage](n00b-advanced.md)
 

docs/accessibility.md

@@ -0,0 +1,214 @@
+# Accessibility Options
+
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/accessibility.md)
+
+## Accessibility
+Now with Mermaid library is in much wider use, we have started to work towwards more accessible features, based on the feedback from the community.
+
+TO begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**.
+
+This support for accessibility options is available for all the diagrams/chart types. Also, we have tired to keep the same format for the accessibility options, so that it is easy to understand and maintain.
+
+
+## Defining Accessibility Options
+
+### Single line accessibility values
+The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like:
+-  `accTitle: "Your Accessibility Title"` or
+-  `accDescr: "Your Accessibility Description"`
+
+**When these two options are defined, they will  add a coressponding  `<title>` and `<desc>` tag in the SVG.**
+
+Let us take a look at the following example with a flowchart diagram:
+
+```mermaid-example
+   graph LR
+      accTitle: Big decisions
+      accDescr: Flow chart of the decision making process
+      A[Hard] -->|Text| B(Round)
+      B --> C{Decision}
+      C -->|One| D[Result 1]
+
+```
+See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
+
+![Accessibility options rendered inside SVG](img/accessibility-div-example.png)
+
+
+### Multi-line Accessibility title/description
+You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then mutltile lines, followed by a closing `}`.
+
+`accTitle: My single line title value` (***single line format***)
+
+vs
+
+`accDescr: {
+  My multi-line description
+  of the diagram
+}` (***multi-line format***)
+
+Let us look at it in the following example, with same flowchart:
+```mermaid-example
+   graph LR
+      accTitle: Big decisions
+
+      accDescr {
+        My multi-line description
+        of the diagram
+      }
+
+      A[Hard] -->|Text| B(Round)
+      B --> C{Decision}
+      C -->|One| D[Result 1]
+
+```
+See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
+
+![Accessibility options rendered inside SVG](img/accessibility-div-example-2.png)
+
+### Sample Code Snippet for other diagram types
+
+#### Sequence Diagram
+
+```mermaid-example
+   sequenceDiagram
+      accTitle: My Sequence Diagram
+      accDescr: My Sequence Diagram Description
+
+      Alice->>John: Hello John, how are you?
+      John-->>Alice: Great!
+      Alice-)John: See you later!
+```
+
+#### Class Diagram
+
+```mermaid-example
+   classDiagram
+      accTitle: My Class Diagram
+      accDescr: My Class Diagram Description
+
+      Vehicle <|-- Car
+```
+
+#### State Diagram
+
+```mermaid-example
+   stateDiagram
+      accTitle: My State Diagram
+      accDescr: My State Diagram Description
+
+       s1 --> s2
+
+```
+
+#### Entity Relationship Diagram
+
+```mermaid-example
+   erDiagram
+      accTitle: My Entity Relationship Diagram
+      accDescr: My Entity Relationship Diagram Description
+
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+
+```
+
+#### User Journey Diagram
+
+  ```mermaid-example
+    journey
+        accTitle: My User Journey Diagram
+        accDescr: My User Journey Diagram Description
+
+        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: Me
+
+  ```
+
+#### Gantt Chart
+
+```mermaid-example
+   gantt
+      accTitle: My Gantt Chart Accessibility Title
+      accDescr: My Gantt Chart Accessibility Description
+
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2014-01-12  , 12d
+    another task      : 24d
+
+```
+
+#### Pie Chart
+
+```mermaid-example
+   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
+
+```
+#### Requirement Diagram
+
+  ```mermaid-example
+    requirementDiagram
+        accTitle: My Requirement Diagram
+        accDescr: My Requirement Diagram Description
+
+         requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+    }
+
+    element test_entity {
+    type: simulation
+    }
+
+    test_entity - satisfies -> test_req
+
+  ```
+
+#### Gitgraph
+
+  ```mermaid-example
+    gitGraph
+        accTitle: My Gitgraph Accessibility Title
+        accDescr: My Gitgraph Accessibility Description
+
+       commit
+       commit
+       branch develop
+       checkout develop
+       commit
+       commit
+       checkout main
+       merge develop
+       commit
+       commit
+
+  ```
+
+
+
+
+
+
+

docs/integrations.md

@@ -30,6 +30,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
   - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
   - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
+- [Jetsbrain IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
 
 ## CRM/ERP/Similar
 
@@ -49,7 +50,6 @@ They also serve as proof of concept, for the variety of things that can be built
 
 - [VuePress](https://vuepress.vuejs.org/)
   - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)
-  - [vuepress-plugin-mermaidjs-cli](https://github.com/gwleclerc/vuepress-plugin-mermaidjs-cli)
 - [Grav CMS](https://getgrav.org/)
   - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
   - [Gitlab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
@@ -110,13 +110,13 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
 - [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
 - [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
-- [Vim](https://vim.org)
+- [Vim](https://www.vim.org)
   - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
 - [GNU Emacs](https://www.gnu.org/software/emacs/)
   - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
   - [Org-Mode integration](https://github.com/arnm/ob-mermaid)
 - [Brackets](https://brackets.io/)
-  - [Mermaid Preview](https://s3.amazonaws.com/extend.brackets/alanhohn.mermaid-preview/alanhohn.mermaid-preview-1.0.2.zip)
+  - [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview)
 - [Iodide](https://github.com/iodide-project/iodide)
   - [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
 - [Google docs](https://docs.google.com/)
@@ -149,7 +149,7 @@ They also serve as proof of concept, for the variety of things that can be built
 
 | Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository | 
 | -- | -- | -- | -- | -- | -- |
-| GitHub + Mermaid | [🎡🔗](https://chrome.google.com/webstore/detail/github-%20-mermaid/goiiopgdnkogdbjmncgedmgpoajilohe) | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - |  [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)
+| GitHub + Mermaid | - | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - |  [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)
 | Asciidoctor Live Preview | [🎡🔗](https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | - | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | -|
 | Diagram Tab| -| - | - | - | [🐙🔗](https://github.com/khafast/diagramtab)  |
 | Markdown Diagrams| [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/) | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |

docs/integrations.md~HEAD

@@ -1,169 +0,0 @@
-# Integrations
-
-The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications. 
-
-They also serve as proof of concept, for the variety of things that can be built with mermaid.
-
-
-## Productivity
-
-- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**Native support**)
-- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
-- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
-- [Joplin](https://joplinapp.org) (**Native support**)
-- [Notion](https://notion.so) (**Native support**)
-- [GitHub](https://github.com)
-  - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
-  - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
-- [GitBook](https://gitbook.com)
-  - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
-  - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
-  - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
-- [Atlassian Products](https://www.atlassian.com)
-  - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
-  - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
-  - [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid)
-- [Redmine](https://redmine.org)
-  - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
-  - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
-  - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
-
-## CRM/ERP/Similar
-
-  - [coreBOS](https://blog.corebos.org/blog/december2019)
-
-## Blogs
-
-- [Wordpress](https://wordpress.org)
-  - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
-  - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
-- [Hexo](https://hexo.io)
-  - [hexo-filter-mermaid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams)
-  - [hexo-tag-mermaid](https://github.com/JameChou/hexo-tag-mermaid)
-  - [hexo-mermaid-diagrams](https://github.com/mslxl/hexo-mermaid-diagrams)
-
-## CMS
-
-- [VuePress](https://vuepress.vuejs.org/)
-  - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)
-  - [vuepress-plugin-mermaidjs-cli](https://github.com/gwleclerc/vuepress-plugin-mermaidjs-cli)
-- [Grav CMS](https://getgrav.org/)
-  - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
-  - [Gitlab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
-
-## Communication
-
-- [Discourse](https://discourse.org)
-  - [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid)
-- [Mattermost](https://mattermost.com/)
-  - [Mermaid Plugin](https://github.com/SpikeTings/Mermaid)
-- [phpBB](https://phpbb.com)
-  - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
-- [NodeBB](https://nodebb.org)
-  - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
-
-## Wikis
-
-- [MediaWiki](https://www.mediawiki.org)
-  - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
-  - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
-- [Semantic Media Wiki](https://semantic-mediawiki.org)
-  - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
-- [FosWiki](https://foswiki.org)
-  - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
-- [DokuWiki](https://dokuwiki.org)
-  - [Flowcharts](https://www.dokuwiki.org/plugin:flowcharts?s[]=mermaid)
-  - [ComboStrap](https://combostrap.com/mermaid)
-- [TiddlyWiki](https://tiddlywiki.com/)
-  - [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5)
-  - [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid)
-
-## Editor Plugins
-
-- [Vs Code](https://code.visualstudio.com/)
-  - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
-  - [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)
-  - [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
-  - [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor)
-  - [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export)
-  - [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)
-  - [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode)
-  - [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode)
-- [Markdown-It](https://github.com/markdown-it/markdown-it)
-  - [Textual UML Parser](https://github.com/manastalukdar/markdown-it-textual-uml)
-  - [Mermaid Plugin](https://github.com/tylingsoft/markdown-it-mermaid)
-  - [md-it-mermaid](https://github.com/iamcco/md-it-mermaid)
-  - [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new)
-  - [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
-- [Atom](https://atom.io)
-  - [Markdown Preview Enhanced](https://atom.io/packages/markdown-preview-enhanced)
-  - [Atom Mermaid](https://atom.io/packages/atom-mermaid)
-  - [Language Mermaid Syntax Highlighter](https://atom.io/packages/language-mermaid)
-- [Sublime Text 3](https://sublimetext.com)
-  - [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
-- [Astah](https://astah.net)
-  - [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-)
-- [Light Table](http://lighttable.com/)
-  - [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
-- [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
-- [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
-- [Vim](https://vim.org)
-  - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
-- [GNU Emacs](https://www.gnu.org/software/emacs/)
-  - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
-  - [Org-Mode integration](https://github.com/arnm/ob-mermaid)
-- [Brackets](https://brackets.io/)
-  - [Mermaid Preview](https://s3.amazonaws.com/extend.brackets/alanhohn.mermaid-preview/alanhohn.mermaid-preview-1.0.2.zip)
-- [Iodide](https://github.com/iodide-project/iodide)
-  - [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
-- [Google docs](https://docs.google.com/)
-  - [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856)
-- [Podlite](https://github.com/zag/podlite-desktop)
-  - [Named block =Diagram](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
-- [GNU Nano](https://www.nano-editor.org/)
-  - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
-
-## Document Generation
-
-- [Sphinx](https://www.sphinx-doc.org/en/master/)
-  - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
-- [remark.js](https://remark.js.org/)
-  - [remark-mermaid](https://github.com/temando/remark-mermaid)
-- [jSDoc](https://jsdoc.app/)
-  - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
-- [MkDocs](https://mkdocs.org)
-  - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
-- [Type Doc](https://typedoc.org/)
-  - [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
-- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (Native support in theme)
-- [Codedoc](https://codedoc.cc/)
-  - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
-
-## Browser Extensions
-
-| Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository | 
-| -- | -- | -- | -- | -- | -- |
-| GitHub + Mermaid | [🎡🔗](https://chrome.google.com/webstore/detail/github-%20-mermaid/goiiopgdnkogdbjmncgedmgpoajilohe) | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - |  [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)
-| Asciidoctor Live Preview | [🎡🔗](https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | - | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | -|
-| Diagram Tab| -| - | - | - | [🐙🔗](https://github.com/khafast/diagramtab)  |
-| Markdown Diagrams| [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/) | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
-| Markdown Viewer| - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | - | - | [🐙🔗](https://github.com/simov/markdown-viewer)|
-| Extensions for Mermaid| - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/)| - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) |
-| Chrome Diagrammer| [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - |- | - | - |
-| Mermaid Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil) | - | - | - | - |
-|Mermaid Markdown | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-markdown/mboeoikjijmjcjgpccghbcoegikliijg) | - | - | - | - |
-| Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - |
-| Mermaid Previewer | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - |
-
-
-## Other
-- [Jekyll](https://jekyllrb.com/)
-  - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
-  - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
-- [Reveal.js](https://github.com/hakimel/reveal.js)
-  - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
-- [Bisheng](https://www.npmjs.com/package/bisheng)
-  - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
-- [Reveal CK](https://github.com/jedcn/reveal-ck)
-  - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
-- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)

docs/sequenceDiagram.md~HEAD

@@ -1,504 +0,0 @@
-# Sequence diagrams
-
-**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/sequenceDiagram.md)
-> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
-
-Mermaid can render sequence diagrams.
-
-```mermaid-example
-sequenceDiagram
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!
-    Alice-)John: See you later!
-```
-
-```note
-A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.
-
-If unavoidable, one must use parentheses(), quotation marks "", or brackets {},[], to enclose the word "end". i.e : (end), [end], {end}.
-```
-
-## Syntax
-
-### Participants
-
-The participants can be defined implicitly as in the first example on this page. The participants or actors are
-rendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a
-different order than how they appear in the first message. It is possible to specify the actor's order of
-appearance by doing the following:
-
-```mermaid-example
-sequenceDiagram
-    participant Alice
-    participant Bob
-    Alice->>Bob: Hi Bob
-    Bob->>Alice: Hi Alice
-```
-
-### Actors
-
-If you specifically want to use the actor symbol instead of a rectangle with text you can do so by using actor statements as per below.
-```mermaid-example
-sequenceDiagram
-    actor Alice
-    actor Bob
-    Alice->>Bob: Hi Bob
-    Bob->>Alice: Hi Alice
-```
-
-### Aliases
-
-The actor can have a convenient identifier and a descriptive label.
-
-```mermaid-example
-sequenceDiagram
-    participant A as Alice
-    participant J as John
-    A->>J: Hello John, how are you?
-    J->>A: Great!
-```
-
-## Messages
-
-Messages can be of two displayed either solid or with a dotted line.
-
-```
-[Actor][Arrow][Actor]:Message text
-```
-
-There are six types of arrows currently supported:
-
-| Type | Description                                 |
-| ---- | ------------------------------------------- |
-| ->   | Solid line without arrow                    |
-| -->  | Dotted line without arrow                   |
-| ->>  | Solid line with arrowhead                   |
-| -->> | Dotted line with arrowhead                  |
-| -x   | Solid line with a cross at the end          |
-| --x  | Dotted line with a cross at the end.        |
-| -)   | Solid line with an open arrow at the end (async)  |
-| --)  | Dotted line with a open arrow at the end (async) |
-
-## Activations
-
-It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
-
-```mermaid-example
-sequenceDiagram
-    Alice->>John: Hello John, how are you?
-    activate John
-    John-->>Alice: Great!
-    deactivate John
-```
-
-There is also a shortcut notation by appending `+`/`-` suffix to the message arrow:
-
-```mermaid-example
-sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    John-->>-Alice: Great!
-```
-
-Activations can be stacked for same actor:
-
-```mermaid-example
-sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    Alice->>+John: John, can you hear me?
-    John-->>-Alice: Hi Alice, I can hear you!
-    John-->>-Alice: I feel great!
-```
-
-## Notes
-
-It is possible to add notes to a sequence diagram. This is done by the notation
-Note [ right of | left of | over ] [Actor]: Text in note content
-
-See the example below:
-
-```mermaid-example
-sequenceDiagram
-    participant John
-    Note right of John: Text in note
-```
-
-It is also possible to create notes spanning two participants:
-
-```mermaid-example
-sequenceDiagram
-    Alice->John: Hello John, how are you?
-    Note over Alice,John: A typical interaction
-```
-
-## Loops
-
-It is possible to express loops in a sequence diagram. This is done by the notation
-
-```
-loop Loop text
-... statements ...
-end
-```
-
-See the example below:
-
-```mermaid-example
-sequenceDiagram
-    Alice->John: Hello John, how are you?
-    loop Every minute
-        John-->Alice: Great!
-    end
-```
-
-## Alt
-
-It is possible to express alternative paths in a sequence diagram. This is done by the notation
-
-```
-alt Describing text
-... statements ...
-else
-... statements ...
-end
-```
-
-or if there is sequence that is optional (if without else).
-
-```
-opt Describing text
-... statements ...
-end
-```
-
-See the example below:
-
-```mermaid-example
-sequenceDiagram
-    Alice->>Bob: Hello Bob, how are you?
-    alt is sick
-        Bob->>Alice: Not so good :(
-    else is well
-        Bob->>Alice: Feeling fresh like a daisy
-    end
-    opt Extra response
-        Bob->>Alice: Thanks for asking
-    end
-```
-
-## Parallel
-
-It is possible to show actions that are happening in parallel.
-
-This is done by the notation
-
-```
-par [Action 1]
-... statements ...
-and [Action 2]
-... statements ...
-and [Action N]
-... statements ...
-end
-```
-
-See the example below:
-
-```mermaid-example
-sequenceDiagram
-    par Alice to Bob
-        Alice->>Bob: Hello guys!
-    and Alice to John
-        Alice->>John: Hello guys!
-    end
-    Bob-->>Alice: Hi Alice!
-    John-->>Alice: Hi Alice!
-```
-
-It is also possible to nest parallel blocks.
-
-```mermaid-example
-sequenceDiagram
-    par Alice to Bob
-        Alice->>Bob: Go help John
-    and Alice to John
-        Alice->>John: I want this done today
-        par John to Charlie
-            John->>Charlie: Can we do this today?
-        and John to Diana
-            John->>Diana: Can you help us today?
-        end
-    end
-```
-
-## Background Highlighting
-
-It is possible to highlight flows by providing colored background rects. This is done by the notation
-
-The colors are defined using rgb and rgba syntax.
-
-```
-rect rgb(0, 255, 0)
-... content ...
-end
-```
-
-```
-rect rgba(0, 0, 255, .1)
-... content ...
-end
-```
-
-See the examples below:
-
-```mermaid-example
-sequenceDiagram
-    participant Alice
-    participant John
-
-    rect rgb(191, 223, 255)
-    note right of Alice: Alice calls John.
-    Alice->>+John: Hello John, how are you?
-    rect rgb(200, 150, 255)
-    Alice->>+John: John, can you hear me?
-    John-->>-Alice: Hi Alice, I can hear you!
-    end
-    John-->>-Alice: I feel great!
-    end
-    Alice ->>+ John: Did you want to go to the game tonight?
-    John -->>- Alice: Yeah! See you there.
-
-```
-
-## Comments
-
-Comments can be entered within a sequence diagram, which will be ignored by the parser.  Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
-
-```mmd
-sequenceDiagram
-    Alice->>John: Hello John, how are you?
-    %% this is a comment
-    John-->>Alice: Great!
-```
-
-## Entity codes to escape characters
-
-It is possible to escape characters using the syntax exemplified here.
-
-```mermaid-example
-sequenceDiagram
-    A->>B: I #9829; you!
-    B->>A: I #9829; you #infin; times more!
-```
-
-Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.
-
-Because semicolons can be used instead of line breaks to define the markup, you need to use `#59;` to include a semicolon in message text.
-
-## sequenceNumbers
-
-It is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:
-
-```html
-    <script>
-      mermaid.initialize({
-        sequence: { showSequenceNumbers: true },
-      });
-    </script>
-```
-
-It can also be be turned on via the diagram code as in the diagram:
-
-```mermaid-example
-sequenceDiagram
-    autonumber
-    Alice->>John: Hello John, how are you?
-    loop Healthcheck
-        John->>John: Fight against hypochondria
-    end
-    Note right of John: Rational thoughts!
-    John-->>Alice: Great!
-    John->>Bob: How about you?
-    Bob-->>John: Jolly good!
-```
-
-## Actor Menus
-
-Actors can have popup-menus containing individualized links to external pages.  For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.
-
-This can be configured by adding one or more link lines with the format:
-```
-link <actor>: <link-label> @ <link-url>
-```
-```mmd
-sequenceDiagram
-    participant Alice
-    participant John
-    link Alice: Dashboard @ https://dashboard.contoso.com/alice
-    link Alice: Wiki @ https://wiki.contoso.com/alice
-    link John: Dashboard @ https://dashboard.contoso.com/john
-    link John: Wiki @ https://wiki.contoso.com/john
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!
-    Alice-)John: See you later!
-```
-
-#### Advanced Menu Syntax
-There is an advanced syntax that relies on JSON formatting. If you are comfortable with JSON format, then this exists as well.
-
-This can be configured by adding the links lines with the format:
-
-```
-links <actor>: <json-formatted link-name link-url pairs>
-```
-
-An example is below:
-
-```mmd
-sequenceDiagram
-    participant Alice
-    participant John
-    links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
-    links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!
-    Alice-)John: See you later!
-```
-
-## Styling
-
-Styling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss
-
-### Classes used
-
-| Class        | Description                                                 |
-| ------------ | ----------------------------------------------------------- |
-| actor        | Style for the actor box at the top of the diagram.          |
-| text.actor   | Styles for text in the actor box at the top of the diagram. |
-| actor-line   | The vertical line for an actor.                             |
-| messageLine0 | Styles for the solid message line.                          |
-| messageLine1 | Styles for the dotted message line.                         |
-| messageText  | Defines styles for the text on the message arrows.          |
-| labelBox     | Defines styles label to left in a loop.                     |
-| labelText    | Styles for the text in label for loops.                     |
-| loopText     | Styles for the text in the loop box.                        |
-| loopLine     | Defines styles for the lines in the loop box.               |
-| note         | Styles for the note box.                                    |
-| noteText     | Styles for the text on in the note boxes.                   |
-
-### Sample stylesheet
-
-```css
-body {
-    background: white;
-}
-
-.actor {
-    stroke: #ccccff;
-    fill: #ececff;
-}
-text.actor {
-    fill: black;
-    stroke: none;
-    font-family: Helvetica;
-}
-
-.actor-line {
-    stroke: grey;
-}
-
-.messageLine0 {
-    stroke-width: 1.5;
-    stroke-dasharray: '2 2';
-    marker-end: 'url(#arrowhead)';
-    stroke: black;
-}
-
-.messageLine1 {
-    stroke-width: 1.5;
-    stroke-dasharray: '2 2';
-    stroke: black;
-}
-
-#arrowhead {
-    fill: black;
-}
-
-.messageText {
-    fill: black;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
-    font-size: 14px;
-}
-
-.labelBox {
-    stroke: #ccccff;
-    fill: #ececff;
-}
-
-.labelText {
-    fill: black;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
-}
-
-.loopText {
-    fill: black;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
-}
-
-.loopLine {
-    stroke-width: 2;
-    stroke-dasharray: '2 2';
-    marker-end: 'url(#arrowhead)';
-    stroke: #ccccff;
-}
-
-.note {
-    stroke: #decc93;
-    fill: #fff5ad;
-}
-
-.noteText {
-    fill: black;
-    stroke: none;
-    font-family: 'trebuchet ms', verdana, arial;
-    font-size: 14px;
-}
-```
-
-## Configuration
-
-Is it possible to adjust the margins for rendering the sequence diagram.
-
-This is done by defining `mermaid.sequenceConfig` or by the CLI to use a json file with the configuration.
-How to use the CLI is described in the [mermaidCLI](mermaidCLI) page.
-`mermaid.sequenceConfig` can be set to a JSON string with config parameters or the corresponding object.
-
-```javascript
-mermaid.sequenceConfig = {
-    diagramMarginX: 50,
-    diagramMarginY: 10,
-    boxTextMargin: 5,
-    noteMargin: 10,
-    messageMargin: 35,
-    mirrorActors: true
-};
-```
-
-### Possible configuration parameters:
-
-| Parameter         | Description                                                                                                                                | Default value                  |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ |
-| mirrorActors      | Turns on/off the rendering of actors below the diagram as well as above it                                                                 | false                          |
-| bottomMarginAdj   | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1                              |
-| actorFontSize     | Sets the font size for the actor's description                                                                                             | 14                             |
-| actorFontFamily   | Sets the font family for the actor's description                                                                                           | "Open-Sans", "sans-serif"      |
-| actorFontWeight   | Sets the font weight for the actor's description                                                                                           | "Open-Sans", "sans-serif"      |
-| noteFontSize      | Sets the font size for actor-attached notes                                                                                                | 14                             |
-| noteFontFamily    | Sets the font family for actor-attached notes                                                                                              | "trebuchet ms", verdana, arial |
-| noteFontWeight    | Sets the font weight for actor-attached notes                                                                                              | "trebuchet ms", verdana, arial |
-| noteAlign         | Sets the text alignment for text in actor-attached notes                                                                                   | center                         |
-| messageFontSize   | Sets the font size for actor<->actor messages                                                                                              | 16                             |
-| messageFontFamily | Sets the font family for actor<->actor messages                                                                                            | "trebuchet ms", verdana, arial |
-| messageFontWeight | Sets the font weight for actor<->actor messages                                                                                            | "trebuchet ms", verdana, arial |

docs/usage.md

@@ -23,7 +23,7 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai
 **Using the npm package**
 
 ```
-1.You will need to install node v16, which would have npm.
+1. You will need to install node v16, which would have npm.
 
 2. download yarn using npm.
 

src/Diagram.js

@@ -18,6 +18,8 @@ class Diagram {
     // console.log('this.type', this.type, diagrams[this.type]);
     // Setup diagram
     this.db = diagrams[this.type].db;
+    this.db.clear?.();
+
     this.renderer = diagrams[this.type].renderer;
     this.parser = diagrams[this.type].parser;
     this.parser.parser.yy = this.db;

src/diagrams/class/classDb.js

@@ -206,7 +206,9 @@ 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.
  *
@@ -337,6 +339,7 @@ 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 () {
@@ -378,6 +381,7 @@ export default {
   setClickEvent,
   setCssClass,
   setLink,
+  getTooltip,
   setTooltip,
   lookUpDomId,
 };

src/diagrams/class/classRenderer-v2.js

@@ -29,8 +29,10 @@ 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) {
+export const addClasses = function (classes, g, _id, diagObj) {
   // const svg = select(`[id="${svgId}"]`);
   const keys = Object.keys(classes);
   log.info('keys:', keys);
@@ -108,6 +110,7 @@ export const addClasses = function (classes, g) {
       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,
@@ -319,7 +322,7 @@ export const draw = function (text, id, _version, diagObj) {
   const relations = diagObj.db.getRelations();
 
   log.info(relations);
-  addClasses(classes, g, id);
+  addClasses(classes, g, id, diagObj);
   addRelations(relations, g);
 
   // Add custom shapes

src/diagrams/flowchart/flowDb.js

@@ -409,6 +409,7 @@ 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/diagrams/sequence/sequenceDiagram.spec.js

@@ -22,6 +22,81 @@ function addConf(conf, key, value) {
 // const parser = sequence.parser;
 let diagram;
 
+describe('more than one sequence diagram', () => {
+  it('should not have duplicated messages', () => {
+    const diagram1 = new Diagram(`
+        sequenceDiagram
+        Alice->Bob:Hello Bob, how are you?
+        Bob-->Alice: I am good thanks!`);
+    expect(diagram1.db.getMessages()).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "from": "Alice",
+          "message": "Hello Bob, how are you?",
+          "to": "Bob",
+          "type": 5,
+          "wrap": false,
+        },
+        Object {
+          "from": "Bob",
+          "message": "I am good thanks!",
+          "to": "Alice",
+          "type": 6,
+          "wrap": false,
+        },
+      ]
+    `);
+    const diagram2 = new Diagram(`
+        sequenceDiagram
+        Alice->Bob:Hello Bob, how are you?
+        Bob-->Alice: I am good thanks!`);
+
+    expect(diagram2.db.getMessages()).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "from": "Alice",
+          "message": "Hello Bob, how are you?",
+          "to": "Bob",
+          "type": 5,
+          "wrap": false,
+        },
+        Object {
+          "from": "Bob",
+          "message": "I am good thanks!",
+          "to": "Alice",
+          "type": 6,
+          "wrap": false,
+        },
+      ]
+    `);
+
+    // Add John actor
+    const diagram3 = new Diagram(`
+        sequenceDiagram
+        Alice->John:Hello John, how are you?
+        John-->Alice: I am good thanks!`);
+
+    expect(diagram3.db.getMessages()).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "from": "Alice",
+          "message": "Hello John, how are you?",
+          "to": "John",
+          "type": 5,
+          "wrap": false,
+        },
+        Object {
+          "from": "John",
+          "message": "I am good thanks!",
+          "to": "Alice",
+          "type": 6,
+          "wrap": false,
+        },
+      ]
+    `);
+  });
+});
+
 describe('when parsing a sequenceDiagram', function () {
   beforeEach(function () {
     // diagram.db = sequenceDb;

src/mermaid.js

@@ -34,7 +34,7 @@ const init = function () {
     initThrowsErrors(...arguments);
   } catch (e) {
     log.warn('Syntax Error rendering');
-    log.warn(e);
+    log.warn(e.str);
     if (this.parseError) {
       this.parseError(e);
     }
@@ -120,19 +120,23 @@ const initThrowsErrors = function () {
     if (init) {
       log.debug('Detected early reinit: ', init);
     }
-
-    mermaidAPI.render(
-      id,
-      txt,
-      (svgCode, bindFunctions) => {
-        element.innerHTML = svgCode;
-        if (typeof callback !== 'undefined') {
-          callback(id);
-        }
-        if (bindFunctions) bindFunctions(element);
-      },
-      element
-    );
+    try {
+      mermaidAPI.render(
+        id,
+        txt,
+        (svgCode, bindFunctions) => {
+          element.innerHTML = svgCode;
+          if (typeof callback !== 'undefined') {
+            callback(id);
+          }
+          if (bindFunctions) bindFunctions(element);
+        },
+        element
+      );
+    } catch (error) {
+      log.warn('Catching Error (bootstrap)');
+      throw { error, message: error.str };
+    }
   }
 };
 

src/mermaidAPI.js

@@ -250,7 +250,7 @@ const render = function (id, _txt, cb, container) {
 
   txt = encodeEntities(txt);
 
-  // Imortant that we do not create the diagram until after the directives have been included
+  // Important that we do not create the diagram until after the directives have been included
   const diag = new Diagram(txt);
   // Get the tmp element containing the the svg
   const element = root.select('#d' + id).node();
@@ -491,23 +491,20 @@ function updateRendererConfigs(conf) {
 /** @param {any} options */
 function initialize(options) {
   // Handle legacy location of font-family configuration
-  if (options && options.fontFamily) {
-    if (!options.themeVariables) {
+  if (options?.fontFamily) {
+    if (!options.themeVariables?.fontFamily) {
       options.themeVariables = { fontFamily: options.fontFamily };
-    } else {
-      if (!options.themeVariables.fontFamily) {
-        options.themeVariables = { fontFamily: options.fontFamily };
-      }
     }
   }
+
   // Set default options
   configApi.saveConfigFromInitialize(options);
 
-  if (options && options.theme && theme[options.theme]) {
+  if (options?.theme && theme[options.theme]) {
     // Todo merge with user options
     options.themeVariables = theme[options.theme].getThemeVariables(options.themeVariables);
-  } else {
-    if (options) options.themeVariables = theme.default.getThemeVariables(options.themeVariables);
+  } else if (options) {
+    options.themeVariables = theme.default.getThemeVariables(options.themeVariables);
   }
 
   const config =

yarn.lock

@@ -2035,18 +2035,10 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
-"@jridgewell/trace-mapping@^0.3.0", "@jridgewell/trace-mapping@^0.3.7":
-  version "0.3.13"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz#dcfe3e95f224c8fe97a87a5235defec999aa92ea"
-  integrity sha512-o1xbKhp9qnIAoHJSWd6KlCZfqslL4valSF81H8ImioOAxluWYWOpWkpyktY2vnt4tbrX9XYaxovq6cgowaJp2w==
-  dependencies:
-    "@jridgewell/resolve-uri" "^3.0.3"
-    "@jridgewell/sourcemap-codec" "^1.4.10"
-
-"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.13", "@jridgewell/trace-mapping@^0.3.9":
-  version "0.3.14"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz#b231a081d8f66796e475ad588a1ef473112701ed"
-  integrity sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==
+"@jridgewell/trace-mapping@^0.3.0", "@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.13", "@jridgewell/trace-mapping@^0.3.14", "@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz#aba35c48a38d3fd84b37e66c9c0423f9744f9774"
+  integrity sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==
   dependencies:
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
@@ -3514,9 +3506,9 @@ camelcase@^6.2.0:
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
 caniuse-lite@^1.0.30001359:
-  version "1.0.30001373"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001373.tgz"
-  integrity sha512-pJYArGHrPp3TUqQzFYRmP/lwJlj8RCbVe3Gd3eJQkAV8SAC6b19XS9BjMvRdvaS8RMkaTN8ZhoHP6S1y8zzwEQ==
+  version "1.0.30001376"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001376.tgz"
+  integrity sha512-I27WhtOQ3X3v3it9gNs/oTpoE5KpwmqKR5oKPA8M0G7uMXh9Ty81Q904HpKUrM30ei7zfcL5jE7AXefgbOfMig==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -4284,7 +4276,7 @@ cypress-image-snapshot@^4.0.1:
 
 cypress@9.7.0:
   version "9.7.0"
-  resolved "http://registry.yarnpkg.com/cypress/-/cypress-9.7.0.tgz#bf55b2afd481f7a113ef5604aa8b693564b5e744"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-9.7.0.tgz#bf55b2afd481f7a113ef5604aa8b693564b5e744"
   integrity sha512-+1EE1nuuuwIt/N1KXRR2iWHU+OiIt7H28jJDyyI4tiUftId/DrXYEwoDa5+kH2pki1zxnA0r6HrUGHV5eLbF5Q==
   dependencies:
     "@cypress/request" "^2.88.10"
@@ -4694,7 +4686,7 @@ decode-named-character-reference@^1.0.0:
 decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
-  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
+  integrity sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==
 
 decompress-response@^6.0.0:
   version "6.0.0"
@@ -5230,16 +5222,16 @@ eslint-plugin-html@^7.1.0:
     htmlparser2 "^8.0.1"
 
 eslint-plugin-jest@^26.0.0:
-  version "26.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-26.7.0.tgz#41d405ac9143e1284a3401282db47ed459436778"
-  integrity sha512-/YNitdfG3o3cC6juZziAdkk6nfJt01jXVfj4AgaYVLs7bupHzRDL5K+eipdzhDXtQsiqaX1TzfwSuRlEgeln1A==
+  version "26.8.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-26.8.2.tgz#42a1248a5ade2bc589eb0f9c4e0608dd89b18cf3"
+  integrity sha512-67oh0FKaku9y48OpLzL3uK9ckrgLb83Sp5gxxTbtOGDw9lq6D8jw/Psj/9CipkbK406I2M7mvx1q+pv/MdbvxA==
   dependencies:
     "@typescript-eslint/utils" "^5.10.0"
 
 eslint-plugin-jsdoc@^39.1.0:
-  version "39.3.4"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-39.3.4.tgz#6d18c5a071ada5babce9636b02a6c8355e9de2e8"
-  integrity sha512-dYWXhMMHJaq++bY2hyByhgiRzt5qQ7XdfQGiHrU9f3APSSVZ/HuOnXuvUUX7W0jO55Udsu4/7iRlpF/yLFQdSA==
+  version "39.3.6"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-39.3.6.tgz#6ba29f32368d72a51335a3dc9ccd22ad0437665d"
+  integrity sha512-R6dZ4t83qPdMhIOGr7g2QII2pwCjYyKP+z0tPOfO1bbAbQyKC20Y2Rd6z1te86Lq3T7uM8bNo+VD9YFpE8HU/g==
   dependencies:
     "@es-joy/jsdoccomment" "~0.31.0"
     comment-parser "1.3.1"
@@ -5305,9 +5297,9 @@ eslint-visitor-keys@^3.0.0, eslint-visitor-keys@^3.3.0:
   integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
 
 eslint@^8.4.1:
-  version "8.21.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.21.0.tgz#1940a68d7e0573cef6f50037addee295ff9be9ef"
-  integrity sha512-/XJ1+Qurf1T9G2M5IHrsjp+xrGT73RZf23xA1z5wB1ZzzEAWSZKvRwhWxTFp1rvkvCfwcvAUNAP31bhKTTGfDA==
+  version "8.22.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.22.0.tgz#78fcb044196dfa7eef30a9d65944f6f980402c48"
+  integrity sha512-ci4t0sz6vSRKdmkOGmprBo6fmI4PrphDFMy5JEq/fNS0gQkJM3rLmrqcp8ipMcdobH3KtUP40KniAE9W19S4wA==
   dependencies:
     "@eslint/eslintrc" "^1.3.0"
     "@humanwhocodes/config-array" "^0.10.4"
@@ -5740,7 +5732,7 @@ fill-range@^7.0.1:
 filter-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b"
-  integrity sha1-mzERErxsYSehbgFsbF1/GeCAXFs=
+  integrity sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==
 
 finalhandler@~1.1.2:
   version "1.1.2"
@@ -5975,13 +5967,13 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
 get-intrinsic@^1.0.2:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
-  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.2.tgz#336975123e05ad0b7ba41f152ee4aadbea6cf598"
+  integrity sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==
   dependencies:
     function-bind "^1.1.1"
     has "^1.0.3"
-    has-symbols "^1.0.1"
+    has-symbols "^1.0.3"
 
 get-package-type@^0.1.0:
   version "0.1.0"
@@ -6323,6 +6315,11 @@ has-symbols@^1.0.1:
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
   integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
 
+has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
 has-value@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
@@ -6948,11 +6945,11 @@ is-relative@^1.0.0:
     is-unc-path "^1.0.0"
 
 is-ssh@^1.3.0:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/is-ssh/-/is-ssh-1.3.3.tgz#7f133285ccd7f2c2c7fc897b771b53d95a2b2c7e"
-  integrity sha512-NKzJmQzJfEEma3w5cJNcUMxoXfDjz0Zj0eyCalHn2E6VOwlzjZo0yuO2fcBSf8zhFuVCL/82/r5gRcoi6aEPVQ==
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/is-ssh/-/is-ssh-1.4.0.tgz#4f8220601d2839d8fa624b3106f8e8884f01b8b2"
+  integrity sha512-x7+VxdxOdlV3CYpjvRLBv5Lo9OJerlYanjwFrPR9fuGPjCiNiCzFgAWpiLAohSbsnH4ZAys3SBh+hq5rJosxUQ==
   dependencies:
-    protocols "^1.1.0"
+    protocols "^2.0.1"
 
 is-stream@^1.1.0:
   version "1.1.0"
@@ -8602,9 +8599,9 @@ module-deps-sortable@^5.0.3:
     xtend "^4.0.0"
 
 moment-mini@^2.24.0:
-  version "2.24.0"
-  resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.24.0.tgz#fa68d98f7fe93ae65bf1262f6abb5fb6983d8d18"
-  integrity sha512-9ARkWHBs+6YJIvrIp0Ik5tyTTtP9PoV0Ssu2Ocq5y9v8+NOOpWiRshAp8c4rZVWTOe+157on/5G+zj5pwIQFEQ==
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.29.4.tgz#cbbcdc58ce1b267506f28ea6668dbe060a32758f"
+  integrity sha512-uhXpYwHFeiTbY9KSgPPRoo1nt8OxNVdMVoTBYHfSEKeRkIkwGpO+gERmhuhBtzfaeOyTkykSrm2+noJBgqt3Hg==
 
 moment@^2.23.0:
   version "2.29.4"
@@ -9107,9 +9104,9 @@ parse-json@^5.0.0, parse-json@^5.2.0:
     lines-and-columns "^1.1.6"
 
 parse-path@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/parse-path/-/parse-path-4.0.3.tgz#82d81ec3e071dcc4ab49aa9f2c9c0b8966bb22bf"
-  integrity sha512-9Cepbp2asKnWTJ9x2kpw6Fe8y9JDbqwahGCTvklzd/cEq5C5JC59x2Xb0Kx+x0QZ8bvNquGO8/BWP0cwBHzSAA==
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/parse-path/-/parse-path-4.0.4.tgz#4bf424e6b743fb080831f03b536af9fc43f0ffea"
+  integrity sha512-Z2lWUis7jlmXC1jeOG9giRO2+FsuyNipeQ43HAjqAZjwSe3SEf+q/84FGPHoso3kyntbxa4c4i77t3m6fGf8cw==
   dependencies:
     is-ssh "^1.3.0"
     protocols "^1.4.0"
@@ -9117,9 +9114,9 @@ parse-path@^4.0.0:
     query-string "^6.13.8"
 
 parse-url@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/parse-url/-/parse-url-6.0.0.tgz#f5dd262a7de9ec00914939220410b66cff09107d"
-  integrity sha512-cYyojeX7yIIwuJzledIHeLUBVJ6COVLeT4eF+2P6aKVzwvgKQPndCBv3+yQ7pcWjqToYwaligxzSYNNmGoMAvw==
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/parse-url/-/parse-url-6.0.5.tgz#4acab8982cef1846a0f8675fa686cef24b2f6f9b"
+  integrity sha512-e35AeLTSIlkw/5GFq70IN7po8fmDUjpDPY1rIK+VubRfsUvBonjQ+PBZG+vWMACnQSmNlvl524IucoDmcioMxA==
   dependencies:
     is-ssh "^1.3.0"
     normalize-url "^6.1.0"
@@ -9397,11 +9394,16 @@ property-information@^4.0.0:
   dependencies:
     xtend "^4.0.1"
 
-protocols@^1.1.0, protocols@^1.4.0:
+protocols@^1.4.0:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/protocols/-/protocols-1.4.8.tgz#48eea2d8f58d9644a4a32caae5d5db290a075ce8"
   integrity sha512-IgjKyaUSjsROSO8/D49Ab7hP8mJgTYcqApOqdPhLoPxAplXmkp+zRvsrSQjFn5by0rhm4VH0GAUELIPpx7B1yg==
 
+protocols@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/protocols/-/protocols-2.0.1.tgz#8f155da3fc0f32644e83c5782c8e8212ccf70a86"
+  integrity sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==
+
 proxy-addr@~2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -9486,13 +9488,20 @@ qs@6.9.7:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.7.tgz#4610846871485e1e048f44ae3b94033f0e675afe"
   integrity sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==
 
-qs@^6.4.0, qs@^6.9.4:
+qs@^6.4.0:
   version "6.10.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.2.tgz#c1431bea37fc5b24c5bdbafa20f16bdf2a4b9ffe"
   integrity sha512-mSIdjzqznWgfd4pMii7sHtaYF8rx8861hBO80SraY5GT0XQibWZWJSid0avzHGkDIZLImux2S5mXO0Hfct2QCw==
   dependencies:
     side-channel "^1.0.4"
 
+qs@^6.9.4:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
+  integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
+  dependencies:
+    side-channel "^1.0.4"
+
 qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
@@ -10647,7 +10656,7 @@ stream-shift@^1.0.0:
 strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
-  integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
+  integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==
 
 string-argv@^0.3.1:
   version "0.3.1"
@@ -10867,17 +10876,17 @@ terminal-link@^2.0.0:
     supports-hyperlinks "^2.0.0"
 
 terser-webpack-plugin@^5.1.3, terser-webpack-plugin@^5.2.4:
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.3.tgz#8033db876dd5875487213e87c627bca323e5ed90"
-  integrity sha512-Fx60G5HNYknNTNQnzQ1VePRuu89ZVYWfjRAeT5rITuCY/1b08s49e5kSQwHDirKZWuoKOBRFS98EUUoZ9kLEwQ==
+  version "5.3.4"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.4.tgz#f4d31e265883d20fda3ca9c0fc6a53f173ae62e3"
+  integrity sha512-SmnkUhBxLDcBfTIeaq+ZqJXLVEyXxSaNcCeSezECdKjfkMrTTnPvapBILylYwyEvHFZAn2cJ8dtiXel5XnfOfQ==
   dependencies:
-    "@jridgewell/trace-mapping" "^0.3.7"
+    "@jridgewell/trace-mapping" "^0.3.14"
     jest-worker "^27.4.5"
     schema-utils "^3.1.1"
     serialize-javascript "^6.0.0"
-    terser "^5.7.2"
+    terser "^5.14.1"
 
-terser@^5.7.2:
+terser@^5.14.1:
   version "5.14.2"
   resolved "https://registry.yarnpkg.com/terser/-/terser-5.14.2.tgz#9ac9f22b06994d736174f4091aa368db896f1c10"
   integrity sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==
@@ -11740,9 +11749,9 @@ webpack-dev-middleware@^5.3.1:
     schema-utils "^4.0.0"
 
 webpack-dev-server@^4.3.0:
-  version "4.9.3"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.9.3.tgz#2360a5d6d532acb5410a668417ad549ee3b8a3c9"
-  integrity sha512-3qp/eoboZG5/6QgiZ3llN8TUzkSpYg1Ko9khWX1h40MIEUNS2mDoIa8aXsPfskER+GbTvs/IJZ1QTBBhhuetSw==
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.10.0.tgz#de270d0009eba050546912be90116e7fd740a9ca"
+  integrity sha512-7dezwAs+k6yXVFZ+MaL8VnE+APobiO3zvpp3rBHe/HmWQ+avwh0Q3d0xxacOiBybZZ3syTZw9HXzpa3YNbAZDQ==
   dependencies:
     "@types/bonjour" "^3.5.9"
     "@types/connect-history-api-fallback" "^1.3.5"