Merge pull request #584 from skrobul/kroki-support

Kroki support

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

@@ -57,6 +57,7 @@
  "mermaid": "8.13.8",
  "moment": "^2.29.1",
  "monaco-editor": "^0.31.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 { toBase64, btoa as jsbtoa } from 'js-base64';
  import moment from 'moment';
+ import pako from 'pako';
 
  type Exporter = (context: CanvasRenderingContext2D, image: HTMLImageElement) => () => void;
 
@@ -127,6 +128,31 @@
  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 onKrokiClick = () => {
+ const krokiCode = getKrokiCode($codeStore.code);
+ const krokiUrl = `${krokiRendererUrl}/mermaid/svg/${krokiCode}`;
+ return window.open(krokiUrl, '_blank');
+ };
+
+ const getKrokiCode = (source) => {
+ const data = textEncode(source);
+ const compressed = pako.deflate(data, { level: 9, to: 'string' });
+ let result = jsbtoa(compressed).replace(/\+/g, '-').replace(/\//g, '_');
+ return result;
+ };
+
  let iUrl: string;
  let svgUrl: string;
  let mdCode: string;
@@ -168,6 +194,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" on:click={onKrokiClick}>
+ <i class="fas fa-external-link-alt mr-2" /> Kroki
+ </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

@@ -3405,6 +3405,11 @@ p-map@^4.0.0:
  dependencies:
  aggregate-error "^3.0.0"
 
+[email protected]:
+ 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"