diff --git a/README.md b/README.md
index da4a6bab..4ffc8856 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,18 @@ Setup is simple.
 ```
 yarn install
 ```
+or in develop branch to use the beta version of mermaid use
+```
+yarn install --update-checksums
+```
+
+This together with a .npmrc file:
+```
+registry=https://registry.npmjs.com/
+@mermaid-js:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken="XXXXXXXXX"
+
+```
 
 
 ## Development
diff --git a/package.json b/package.json
index 8b11e23f..8f801367 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "js-base64": "^2.5.1",
     "json-lint": "^0.1.0",
     "jsonlint": "^1.6.3",
-    "mermaid": "8.4.3",
+    "@mermaid-js/mermaid": "*",
     "moment": "^2.24.0",
     "monaco-editor": "0.18.1",
     "svelte-routing": "^1.4.0",
diff --git a/src/App.svelte b/src/App.svelte
index 0241bc54..b131b222 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,8 +1,6 @@
 <script>
  	import Router from 'svelte-spa-router'
   // Used for SSR. A falsy value is ignored by the Router.
-  export let url = "";
-	export let name;
 	import Edit from './routes/Edit.svelte'
 	import View from './routes/View.svelte'
 
diff --git a/src/components/Config.svelte b/src/components/Config.svelte
index 0a619d7a..57572d5b 100644
--- a/src/components/Config.svelte
+++ b/src/components/Config.svelte
@@ -13,7 +13,6 @@ import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js';
 import 'monaco-editor/esm/vs/editor/contrib/find/findController.js';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
 
-export let data;
 export let conf = '';
 export let code = '';
 export let error = false;
@@ -93,9 +92,6 @@ onMount(async () => {
 	}
 });
 
-	export let name;
-	export let params = {};
-	export let errorText = ''
 </script>
 
 <style>
diff --git a/src/components/Editor.svelte b/src/components/Editor.svelte
index dbf43bdc..56af40bb 100644
--- a/src/components/Editor.svelte
+++ b/src/components/Editor.svelte
@@ -12,7 +12,6 @@ import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js';
 import 'monaco-editor/esm/vs/editor/contrib/find/findController.js';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
 
-export let data;
 export let code = '';
 export let conf = { theme: 'default' };
 let edit;
@@ -96,8 +95,8 @@ onMount(async () => {
 	}
 });
 
-	export let name;
-	export let params = {};
+	// export let name;
+	// export let params = {};
 </script>
 
 <style>
diff --git a/src/components/Error.svelte b/src/components/Error.svelte
index aba92400..f4257841 100644
--- a/src/components/Error.svelte
+++ b/src/components/Error.svelte
@@ -5,14 +5,14 @@ import { onMount } from 'svelte';
 onMount(async () => {
 });
 
-	export let code = '';
+	// export let code = '';
 	export let classes = '';
 
-	export let error = {};
-	export let token = '';
-	export let expected = '';
+	// export let error = {};
+	// export let token = '';
+	// export let expected = '';
 
-	export let params = {}
+	// export let params = {}
 	export let errorText = '';
 
 
diff --git a/src/components/Tag.svelte b/src/components/Tag.svelte
index d769a7c0..bf4813fb 100644
--- a/src/components/Tag.svelte
+++ b/src/components/Tag.svelte
@@ -1,5 +1,4 @@
 <script>
-	export let title = '';
 	export let noPadding = false;
 	let contentClass = 'padding';
 	if (noPadding) {
diff --git a/src/components/View.svelte b/src/components/View.svelte
index 256c942d..efc6e094 100644
--- a/src/components/View.svelte
+++ b/src/components/View.svelte
@@ -70,7 +70,15 @@ let insertSvg = function(svgCode, bindFunctions){
 		try {
 			if(container && state) {
 				code = state.code;
-				container.innerHTML = code;
+
+      // mermaid.parse(code)
+      // Replacing special characters '<' and '>' with encoded '&lt;' and '&gt;'
+      let _code = code
+      _code = _code.replace(/</g, '&lt;')
+      _code = _code.replace(/>/g, '&gt;')
+
+
+				container.innerHTML = _code;
 				saveStatistcs(detectType(code));
 				delete container.dataset.processed
 				mermaid.initialize(state.mermaid)
diff --git a/src/routes/Edit.svelte b/src/routes/Edit.svelte
index 1b4503f3..0e84bbdb 100644
--- a/src/routes/Edit.svelte
+++ b/src/routes/Edit.svelte
@@ -8,7 +8,7 @@ import Tag from '../components/Tag.svelte';
 import Links from '../components/Links.svelte';
 import { fromUrl } from '../code-store.js';
 // import pkg from '@mermaid-js/mermaid/package.json'
-import pkg from 'mermaid/package.json'
+import pkg from '@mermaid/package.json'
 
 export let mermaidVersion = pkg.version
 
@@ -18,12 +18,12 @@ onMount(async () => {
 	fromUrl(params.data);
 });
 
-	export let code = '';
-	export let classes = '';
+	// export let code = '';
+	// export let classes = '';
 
-	export let error = {};
-	export let token = '';
-	export let expected = '';
+	// export let error = {};
+	// export let token = '';
+	// export let expected = '';
 	export let params = {};
 
 </script>
diff --git a/src/routes/View.svelte b/src/routes/View.svelte
index 7340d6c5..f3cad466 100644
--- a/src/routes/View.svelte
+++ b/src/routes/View.svelte
@@ -9,12 +9,12 @@ onMount(async () => {
 	ga('send', 'pageview');
 });
 
-	export let code = '';
-	export let classes = '';
+	// export let code = '';
+	// export let classes = '';
 
-	export let error = {};
-	export let token = '';
-	export let expected = '';
+	// export let error = {};
+	// export let token = '';
+	// export let expected = '';
 	export let params = {};
 </script>
 
diff --git a/webpack.config.js b/webpack.config.js
index 02e07531..debd575f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -11,7 +11,8 @@ module.exports = {
 	resolve: {
 		alias: {
 			svelte: path.resolve('node_modules', 'svelte'),
-			"@mermaid": 'mermaid'
+			// "@mermaid": 'mermaid'
+			"@mermaid": '@mermaid-js/mermaid'
 		},
 		extensions: ['.mjs', '.js', '.svelte'],
 		mainFields: ['svelte', 'browser', 'module', 'main']
diff --git a/yarn.lock b/yarn.lock
index 4ba90b81..443ee2b0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,6 +7,23 @@
   resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-3.1.0.tgz#8ff71d51053cd5ee4981e5a501d80a536244f7fd"
   integrity sha512-GcIY79elgB+azP74j8vqkiXz8xLFfIzbQJdlwOPisgbKT00tviJQuEghOXSMVxJ00HoYJbGswr4kcllUc4xCcg==
 
+"@mermaid-js/mermaid@*":
+  version "8.4.3-preview.797"
+  resolved "https://npm.pkg.github.com/download/@mermaid-js/mermaid/8.4.3-preview.797/f5a0a8719adfd7e034b54c1adc7095bb359887c5761a4d1ccf105a7534a8e79a#"
+  integrity sha512-8SOhm+ZR+tzjjD0cKybe5GqY40w+Uv0gmu9poyiWJtxvBnaL+Ws19eunpa+p+zeblq5DH4lqI3UWa/aanz8tiQ==
+  dependencies:
+    "@braintree/sanitize-url" "^3.1.0"
+    crypto-random-string "^3.0.1"
+    d3 "^5.7.0"
+    dagre "^0.8.4"
+    dagre-d3-unofficial "0.6.4"
+    graphlib "^2.1.7"
+    he "^1.2.0"
+    lodash "^4.17.11"
+    minify "^4.1.1"
+    moment-mini "^2.22.1"
+    scope-css "^1.2.1"
+
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -2767,23 +2784,6 @@ merge-descriptors@1.0.1:
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
   integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
 
-mermaid@8.4.3:
-  version "8.4.3"
-  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-8.4.3.tgz#d846edd97758cbf7925281a57c05f6a8d56c958e"
-  integrity sha512-qgjIINkm9hqzMt1n7cZ9of1ZXhwqSOPrvuwcBMz3RBq/D+c4T/vN3RAjpW+ZINGbbhD+fMESl/xFvqI9svxt/w==
-  dependencies:
-    "@braintree/sanitize-url" "^3.1.0"
-    crypto-random-string "^3.0.1"
-    d3 "^5.7.0"
-    dagre "^0.8.4"
-    dagre-d3-unofficial "0.6.4"
-    graphlib "^2.1.7"
-    he "^1.2.0"
-    lodash "^4.17.11"
-    minify "^4.1.1"
-    moment-mini "^2.22.1"
-    scope-css "^1.2.1"
-
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"