Merge branch 'master' into develop

README.md

@@ -1,4 +1,4 @@
-![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)
+[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
 
 # Contributors are welome
 

docs/styles.css

@@ -14,7 +14,7 @@ body {
 	margin: 0;
 }
 
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
 	body {
 		background-color: #3f3f3f;
 		color: #c8c8c8;
@@ -22,7 +22,7 @@ body {
 	a, label {
 		color: #d8d8d8;
 	}
-}
+} */
 .mermaid {
   /* font-family: 'trebuchet ms', verdana, arial; */
 }
@@ -36,4 +36,8 @@ body {
 
 i {
   font-size: 10px !important;
-}
+}
+
+.mermaidTooltip {
+  position: absolute;
+}

package-lock.json

@@ -1318,9 +1318,9 @@
       "dev": true
     },
     "d3": {
-      "version": "5.15.1",
+      "version": "5.16.0",
-      "resolved": "https://registry.npmjs.org/d3/-/d3-5.15.1.tgz",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-5.16.0.tgz",
-      "integrity": "sha512-Xu9gT6Lm0jH3wWJJSRomFwqnGGi3YAfWIfxNFl4++YVgYOjo3F8V2idAG3nJBgpZOkD0/RHPZX6F4k6tzgOvYw==",
+      "integrity": "sha512-4PL5hHaHwX4m7Zr1UapXW23apo6pexCgdetdJ5kTmADpG/7T9Gkxw0M0tf/pjoB63ezCCm0u5UaFYy2aMt0Mcw==",
       "requires": {
         "d3-array": "1",
         "d3-axis": "1",
@@ -1392,9 +1392,9 @@
       "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
     },
     "d3-color": {
-      "version": "1.4.0",
+      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
-      "integrity": "sha512-TzNPeJy2+iEepfiL92LAAB7fvnp/dV2YwANPVHdDWmYMm23qIJBYww3qT8I8C1wXrmrg4UWs7BKc2tKIgyjzHg=="
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
     },
     "d3-contour": {
       "version": "1.3.2",
@@ -1434,9 +1434,9 @@
       "integrity": "sha512-SZ/lVU7LRXafqp7XtIcBdxnWl8yyLpgOmzAk0mWBI9gXNzLDx5ybZgnRbH9dN/yY5tzVBqCQ9avltSnqVwessQ=="
     },
     "d3-fetch": {
-      "version": "1.1.2",
+      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.2.0.tgz",
-      "integrity": "sha512-S2loaQCV/ZeyTyIF2oP8D1K9Z4QizUzW7cWeAOAS4U88qOt3Ucf6GsmgthuYSdyB2HyEm4CeGvkQxWsmInsIVA==",
+      "integrity": "sha512-yC78NBVcd2zFAyR/HnUiBS7Lf6inSCoWcSxFfw8FYL7ydiqe80SazNwoffcqOfs95XaLo7yebsmQqDKSsXUtvA==",
       "requires": {
         "d3-dsv": "1"
       }
@@ -1458,9 +1458,9 @@
       "integrity": "sha512-TWks25e7t8/cqctxCmxpUuzZN11QxIA7YrMbram94zMQ0PXjE4LVIMe/f6a4+xxL8HQ3OsAFULOINQi1pE62Aw=="
     },
     "d3-geo": {
-      "version": "1.11.9",
+      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.11.9.tgz",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.1.tgz",
-      "integrity": "sha512-9edcH6J3s/Aa3KJITWqFJbyB/8q3mMlA9Fi7z6yy+FAYMnRaxmC7jBhUnsINxVWD14GmqX3DK8uk7nV6/Ekt4A==",
+      "integrity": "sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==",
       "requires": {
         "d3-array": "1"
       }
@@ -1521,9 +1521,9 @@
       }
     },
     "d3-selection": {
-      "version": "1.4.1",
+      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
-      "integrity": "sha512-BTIbRjv/m5rcVTfBs4AMBLKs4x8XaaLkwm28KWu9S2vKNqXkXt2AH2Qf0sdPZHjFxcWg/YL53zcqAz+3g4/7PA=="
+      "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
     },
     "d3-shape": {
       "version": "1.3.7",
@@ -1846,9 +1846,9 @@
       "dev": true
     },
     "elliptic": {
-      "version": "6.5.2",
+      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
-      "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==",
+      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
       "dev": true,
       "requires": {
         "bn.js": "^4.4.0",
@@ -3752,9 +3752,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.15",
+      "version": "4.17.19",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
     },
     "loglevel": {
       "version": "1.6.6",
@@ -3862,9 +3862,9 @@
       "dev": true
     },
     "mermaid": {
-      "version": "8.6.0",
+      "version": "8.6.4",
-      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-8.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-8.6.4.tgz",
-      "integrity": "sha512-TN3q75sGcdXHHOV5ySh1MnrMoRxhuhzFD7XneHrBR07r+In7Nq4JoHY9nG/dxwwktZyP9f+0r1gNNjLaTHA6Qw==",
+      "integrity": "sha512-Qewo/SNV6w16i3VishQ2U+yz3KprHwXMr17b/T0980eAEk5kl4ksMgMID3h68EqsT9GLQe/P6j2G8qwJHD929A==",
       "requires": {
         "@braintree/sanitize-url": "^3.1.0",
         "crypto-random-string": "^3.0.1",
@@ -5428,9 +5428,9 @@
       "dev": true
     },
     "slugify": {
-      "version": "1.4.0",
+      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.5.tgz",
-      "integrity": "sha512-FtLNsMGBSRB/0JOE2A0fxlqjI6fJsgHGS13iTuVT28kViI4JjUiNqp/vyis0ZXYcMnpR3fzGNkv+6vRlI2GwdQ=="
+      "integrity": "sha512-WpECLAgYaxHoEAJ8Q1Lo8HOs1ngn7LN7QjXgOLbmmfkcWvosyk4ZTXkTzKyhngK640USTZUlgoQJfED1kz5fnQ=="
     },
     "snapdragon": {
       "version": "0.8.2",
@@ -6054,13 +6054,9 @@
       "dev": true
     },
     "uglify-js": {
-      "version": "3.8.1",
+      "version": "3.10.0",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.8.1.tgz",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.10.0.tgz",
-      "integrity": "sha512-W7KxyzeaQmZvUFbGj4+YFshhVrMBGSg2IbcYAjGWGvx8DHvJMclbTDMpffdxFUGPBHjIytk7KJUR/KUXstUGDw==",
+      "integrity": "sha512-Esj5HG5WAyrLIdYU74Z3JdG2PxdIusvj6IWHMtlyESxc7kcDz7zYlYjpnSokn1UbpV0d/QX9fan7gkCNd/9BQA=="
-      "requires": {
-        "commander": "~2.20.3",
-        "source-map": "~0.6.1"
-      }
     },
     "underscore": {
       "version": "1.6.0",
@@ -6629,9 +6625,9 @@
       }
     },
     "websocket-extensions": {
-      "version": "0.1.3",
+      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
-      "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
     "which": {

src/code-store.js

@@ -8,7 +8,7 @@ export const codeStore = writable(undefined);
 export const fromUrl = data => {
   let code;
   let state;
-  const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches && false
   try {
     let stateStr = Base64.decode(data)
     state = JSON.parse(stateStr);

src/components/Editor.svelte

@@ -13,7 +13,7 @@ import 'monaco-editor/esm/vs/editor/contrib/find/findController.js';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
 
 export let code = '';
-const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
+const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches && false
 export let conf = { theme: isDarkMode?'dark':'default' };
 let edit;
 export let error = false;

src/components/Links.svelte

@@ -16,13 +16,22 @@ export const onDownloadPNG = event => {
 	const box = svg.getBoundingClientRect();
 	canvas.width = box.width;
 	canvas.height = box.height;
+	if(imagemodeselected === "width") {
+		const ratio = box.height/box.width;
+		canvas.width = userimagewidth;
+		canvas.height = userimagewidth * ratio;
+	} else if(imagemodeselected === "height") {
+		const ratio = box.width/box.height;
+		canvas.width = userimageheight * ratio;
+		canvas.height = userimageheight;
+	}
 	const context = canvas.getContext('2d');
 	context.fillStyle = "white";
 	context.fillRect(0, 0, canvas.width, canvas.height);
 
 	var image = new Image();
 	image.onload = function () {
-		context.drawImage(image, 0, 0);
+		context.drawImage(image, 0, 0, canvas.width, canvas.height);
 
 		var a = document.createElement('a')
 		a.download = `mermaid-diagram-${moment().format('YYYYMMDDHHmmss')}.png`;
@@ -59,6 +68,9 @@ let b64Code;
 let iUrl;
 let svgUrl;
 let mdCode;
+let imagemodeselected = "auto";
+let userimagewidth = 1920;
+let userimageheight = 1080;
 
 const unsubscribe = codeStore.subscribe(state => {
   b64Code = Base64.encodeURI(JSON.stringify(state));
@@ -100,8 +112,20 @@ label[for="markdown"] {
 	<a href="{url}" download='' on:click={onDownloadPNG}>
 		Download PNG
 	</a>
+	(markdown is base64 encoded for these urls)
 </div>
 <p>
   <label for="markdown">Copy Markdown</label>
   <input id="markdown" type="text" value="{mdCode}" on:click={onCopyMarkdown} />
 </p>
+<p>
+  <label>PNG size:</label>
+  <input type="radio" value="auto" id="autosize" bind:group={imagemodeselected}>
+  <label for="autosize">auto</label>
+  <input type="radio" value="width" id="width-active" bind:group={imagemodeselected}>
+  <label for="width">width</label>
+  <input id="width" type="number" min="3" max="10000" bind:value={userimagewidth} disabled={imagemodeselected !== "width"}>
+  <input type="radio" value="height" id="height-active" bind:group={imagemodeselected}>
+  <label for="height">height</label>
+  <input id="height" type="number" min="3" max="10000" bind:value={userimageheight} disabled={imagemodeselected !== "height"}><br>
+</p>

src/components/View.svelte

@@ -63,7 +63,7 @@ onMount(async () => {
 });
 
 let insertSvg = function(svgCode, bindFunctions){
-	// element.innerHTML = svgCode;
+	element.innerHTML = svgCode;
 };
 
 	export let code = '';

src/routes/Edit.svelte

@@ -229,15 +229,7 @@ onMount(async () => {
 					</li>
 					<li>
 						<a
-							href='https://github.com/mermaid-js/mermaid/blob/develop/docs/Tutorials.md'
+							href='https://github.com/mermaid-js/mermaid-cli'
-							target='_blank'
-						>
-							Live-Editor Tutorials
-						</a>
-					</li>
-					<li>
-						<a
-							href='https://github.com/mermaid-js/mermaid.cli'
 							target='_blank'
 						>
 							Mermaid CLI

yarn.lock

@@ -503,8 +503,9 @@ bluebird@^3.5.5:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
 
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
-  version "4.11.8"
+  version "4.11.9"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.9.tgz#26d556829458f9d1e81fc48952493d0ba3507828"
+  integrity sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==
 
 body-parser@1.19.0:
   version "1.19.0"
@@ -569,6 +570,7 @@ braces@^2.3.1, braces@^2.3.2:
 brorand@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+  integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
 
 browserify-aes@^1.0.0, browserify-aes@^1.0.4:
   version "1.2.0"
@@ -1433,8 +1435,9 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
 elliptic@^6.0.0:
-  version "6.5.2"
+  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.2.tgz#05c5678d7173c049d8ca433552224a495d0e3762"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.3.tgz#cb59eb2efdaf73a0bd78ccd7015a62ad6e0f93d6"
+  integrity sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==
   dependencies:
     bn.js "^4.4.0"
     brorand "^1.0.1"
@@ -1978,6 +1981,7 @@ hash-base@^3.0.0:
 hash.js@^1.0.0, hash.js@^1.0.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
+  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
   dependencies:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
@@ -1989,6 +1993,7 @@ he@^1.1.1, he@^1.2.0:
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
+  integrity sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=
   dependencies:
     hash.js "^1.0.3"
     minimalistic-assert "^1.0.0"
@@ -2450,8 +2455,9 @@ locate-path@^3.0.0:
     path-exists "^3.0.0"
 
 lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4, lodash@^4.17.5:
-  version "4.17.15"
+  version "4.17.19"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
+  integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
 
 lodash@^4.17.19:
   version "4.17.20"
@@ -2629,10 +2635,12 @@ minify@^4.1.1:
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
+  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
 minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
+  integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
 minimatch@3.0.4, minimatch@^3.0.4:
   version "3.0.4"
@@ -4296,8 +4304,9 @@ websocket-driver@>=0.5.1:
     websocket-extensions ">=0.1.1"
 
 websocket-extensions@>=0.1.1:
-  version "0.1.3"
+  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
+  integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
 
 which-module@^2.0.0:
   version "2.0.0"