Kroki support

This commit adds support for generating links to be rendered with
[Kroki](https://kroki.io) compatible renderer. Apart from supporting many other
diagram formats, it directly benefits Mermaid editor because it generates much
shorter URLs (due to the compression).

Custom Kroki URL can be configured through environment variable if you want to
use self-hosted instance of Kroki.

README.md

@@ -32,6 +32,11 @@ docker run --publish 8000:80 ghcr.io/mermaid-js/mermaid-live-editor
 When building, Set the Environment variable MERMAID_RENDERER_URL to the rendering service.
 Default is `https://mermaid.ink`
 
+### To configure Kroki Instance URL
+
+When building, Set the Environment variable MERMAID_KROKI_RENDERER_URL to your Kroki instance.
+Default is `https://kroki.io`
+
 ### Development
 
 ```bash

package.json

@@ -58,6 +58,7 @@
 		"moment": "^2.29.1",
 		"monaco-editor": "^0.31.1",
 		"monaco-mermaid": "^1.0.1",
+		"pako": "1.0.10",
 		"random-word-slugs": "^0.1.6"
 	},
 	"lint-staged": {

src/lib/components/actions.svelte

@@ -2,10 +2,11 @@
 	import { browser } from '$app/env';
 
 	import Card from '$lib/components/card/card.svelte';
-	import { rendererUrl } from '$lib/util/env';
+	import { rendererUrl, krokiRendererUrl } from '$lib/util/env';
 	import { base64State, codeStore } from '$lib/util/state';
 	import { toBase64 } from 'js-base64';
 	import moment from 'moment';
+	import pako from 'pako';
 
 	type Exporter = (context: CanvasRenderingContext2D, image: HTMLImageElement) => () => void;
 
@@ -127,8 +128,28 @@
 		window.location.href = `${window.location.pathname}?gist=${gistURL}`;
 	};
 
+	const textEncode = (str) => {
+		if (window.TextEncoder) {
+			return new TextEncoder('utf-8').encode(str);
+		}
+		let utf8 = unescape(encodeURIComponent(str));
+		let result = new Uint8Array(utf8.length);
+		for (let i = 0; i < utf8.length; i++) {
+			result[i] = utf8.charCodeAt(i);
+		}
+		return result;
+	};
+
+	const getKrokiCode = (source) => {
+		const data = textEncode(source);
+		const compressed = pako.deflate(data, { level: 9, to: 'string' });
+		let result = btoa(compressed).replace(/\+/g, '-').replace(/\//g, '_');
+		return result;
+	};
+
 	let iUrl: string;
 	let svgUrl: string;
+	let krokiUrl: string;
 	let mdCode: string;
 	let imagemodeselected = 'auto';
 	let userimagesize = 1080;
@@ -143,8 +164,10 @@
 			stateCopy.mermaid = JSON.parse(stateCopy.mermaid);
 		}
 		const b64Code = toBase64(JSON.stringify(stateCopy), true);
+		const krokiCode = getKrokiCode(stateCopy.code);
 		iUrl = `${rendererUrl}/img/${b64Code}`;
 		svgUrl = `${rendererUrl}/svg/${b64Code}`;
+		krokiUrl = `${krokiRendererUrl}/mermaid/svg/${krokiCode}`;
 		mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#${encodedState})`;
 	});
 </script>
@@ -168,6 +191,9 @@
 		<button class="action-btn flex-auto">
 			<a target="_blank" href={svgUrl}><i class="fas fa-external-link-alt mr-2" /> SVG</a>
 		</button>
+		<button class="action-btn flex-auto">
+			<a target="_blank" href={krokiUrl}><i class="fas fa-external-link-alt mr-2" /> Kroki</a>
+		</button>
 
 		<div class="flex gap-2 items-center">
 			PNG size

src/lib/util/env.ts

@@ -1 +1,2 @@
 export const rendererUrl = import.meta.env.MERMAID_RENDERER_URL ?? 'https://mermaid.ink';
+export const krokiRendererUrl = import.meta.env.MERMAID_KROKI_RENDERER_URL ?? 'https://kroki.io';

yarn.lock

@@ -3424,6 +3424,11 @@ p-map@^4.0.0:
   dependencies:
     aggregate-error "^3.0.0"
 
+pako@1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
+  integrity sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"