diff --git a/README.md b/README.md
index ad25caee..11f95a6f 100644
--- a/README.md
+++ b/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
diff --git a/package.json b/package.json
index e8ba77a5..e97f1c27 100644
--- a/package.json
+++ b/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": {
diff --git a/src/lib/components/actions.svelte b/src/lib/components/actions.svelte
index 742a1821..59d2f2b3 100644
--- a/src/lib/components/actions.svelte
+++ b/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
diff --git a/src/lib/util/env.ts b/src/lib/util/env.ts
index 679c80b5..f5e22f30 100644
--- a/src/lib/util/env.ts
+++ b/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';
diff --git a/yarn.lock b/yarn.lock
index 8fd60035..ec636823 100644
--- a/yarn.lock
+++ b/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"