mermaid-js · sidharthv96 · May 23, 2024 · May 23, 2024 · May 23, 2024 · May 23, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -19,6 +19,7 @@
     "pako",
     "panzoom",
     "pzoom",
+    "roughjs",
     "Serde",
     "serdes",
     "tailwindcss",

diff --git a/package.json b/package.json
@@ -80,6 +80,7 @@
     "plausible-tracker": "^0.3.8",
     "random-word-slugs": "0.1.7",
     "svg-pan-zoom": "3.6.1",
+    "svg2roughjs": "^3.2.0",
     "uuid": "9.0.1"
   },
   "lint-staged": {

diff --git a/src/lib/components/View.svelte b/src/lib/components/View.svelte
@@ -1,17 +1,19 @@
 <script lang="ts">
-  import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state';
-  import { onMount } from 'svelte';
-  import panzoom from 'svg-pan-zoom';
   import type { State, ValidatedState } from '$lib/types';
+  import { recordRenderTime, shouldRefreshView } from '$lib/util/autoSync';
+  import { render as renderDiagram } from '$lib/util/mermaid';
+  import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state';
   import { logEvent, saveStatistics } from '$lib/util/stats';
   import { cmdKey } from '$lib/util/util';
-  import { render as renderDiagram } from '$lib/util/mermaid';
   import type { MermaidConfig } from 'mermaid';
-  import { recordRenderTime, shouldRefreshView } from '$lib/util/autoSync';
+  import { onMount } from 'svelte';
+  import panzoom from 'svg-pan-zoom';
+  import { Svg2Roughjs } from 'svg2roughjs';
 
   let code = '';
   let config = '';
   let container: HTMLDivElement;
+  let rough: boolean;
   let view: HTMLDivElement;
   let error = false;
   let errorLines: string[] = [];
@@ -75,7 +77,12 @@
         outOfSync = false;
         manualUpdate = true;
         // Do not render if there is no change in Code/Config/PanZoom
-        if (code === state.code && config === state.mermaid && panZoomEnabled === state.panZoom) {
+        if (
+          code === state.code &&
+          config === state.mermaid &&
+          panZoomEnabled === state.panZoom &&
+          rough === state.rough
+        ) {
           return;
         }
 
@@ -87,6 +94,7 @@
         code = state.code;
         config = state.mermaid;
         panZoomEnabled = state.panZoom;
+        rough = state.rough;
         const scroll = view.parentElement?.scrollTop;
         delete container.dataset.processed;
         const { svg, bindFunctions } = await renderDiagram(
@@ -98,15 +106,31 @@
         if (svg.length > 0) {
           handlePanZoom(state);
           container.innerHTML = svg;
-          console.log({ svg });
-          const graphDiv = document.querySelector<HTMLElement>('#graph-div');
+          const graphDiv = document.querySelector<SVGSVGElement>('#graph-div');
           if (!graphDiv) {
             throw new Error('graph-div not found');
           }
-          graphDiv.setAttribute('height', '100%');
-          graphDiv.style.maxWidth = '100%';
-          if (bindFunctions) {
-            bindFunctions(graphDiv);
+          if (state.rough) {
+            const svg2roughjs = new Svg2Roughjs('#container');
+            svg2roughjs.svg = graphDiv;
+            await svg2roughjs.sketch();
+            graphDiv.remove();
+            const sketch = document.querySelector<HTMLElement>('#container > svg');
+            if (!sketch) {
+              throw new Error('sketch not found');
+            }
+            const height = sketch.getAttribute('height');
+            const width = sketch.getAttribute('width');
+            sketch.setAttribute('height', '100%');
+            sketch.setAttribute('width', '100%');
+            sketch.setAttribute('viewBox', `0 0 ${width} ${height}`);
+            sketch.style.maxWidth = '100%';
+          } else {
+            graphDiv.setAttribute('height', '100%');
+            graphDiv.style.maxWidth = '100%';
+            if (bindFunctions) {
+              bindFunctions(graphDiv);
+            }
           }
         }
         if (view.parentElement && scroll) {
@@ -122,9 +146,9 @@
       console.error('view fail', error_);
       error = true;
     }
-    const timeTaken = Date.now() - startTime;
-    saveStatistics(code, timeTaken);
-    recordRenderTime(timeTaken, () => {
+    const renderTime = Date.now() - startTime;
+    saveStatistics({ code, renderTime, isRough: state.rough });
+    recordRenderTime(renderTime, () => {
       $inputStateStore.updateDiagram = true;
     });
   };

diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts
@@ -23,6 +23,7 @@ export interface State {
   mermaid: string;
   updateDiagram: boolean;
   autoSync: boolean;
+  rough: boolean;
   editorMode?: EditorMode;
   panZoom?: boolean;
   pan?: { x: number; y: number };

diff --git a/src/lib/util/serde.test.ts b/src/lib/util/serde.test.ts
@@ -13,19 +13,19 @@ const verifySerde = (state: State, serde?: SerdeType): string => {
 describe('Serde tests', () => {
   it('should serialize and deserialize with default serde', () => {
     expect(verifySerde(defaultState)).toMatchInlineSnapshot(
-      '"pako:eNpVjk2Lg0AMhv9KyGkL9Q94WGh1t5fCFurN6SFo7AztfDBGpKj_fcd62c0pvM_zhkzY-JYxx-7px0ZTFKhK5SDNoS50NL1Y6m-QZZ_ziQWsd_ya4fhx8tBrH4Jx993mH1cJium8agyijXssGyre_R_HM5T1mYL4cPtLqtHP8FWbi07n_xMdObW-647yjrKGIhQU3wru0XK0ZNr0_rQmCkWzZYV5WlvuaHiKQuWWpNIg_vpyDeYSB97jEFoSLg3dI9ktXH4B_cJWqw"'
+      `"pako:eNpVjs1qw0AMhF9F6NRC_AI-FBq7zSXQQnPz5iBs2bvE-8NaSwi2373r-NLqJM18M2jG1neMJfajv7eaosClVg7yvDeVjmYSS9MViuJtObGA9Y4fCxxfTh4m7UMwbnjd-eMGQTWfN4xBtHG3dbeqZ_7L8QJ1c6YgPlz_Ope7X-CjMd861_93dOSc-mx6KnsqWopQUXwieEDL0ZLp8vvzpigUzZYVlnntuKc0ikLl1oxSEv_zcC2WEhMfMPo0aMyd45SvFDoSrg0NkeyOrL_WfFuF"`
     );
   });
 
   it('should serialize and deserialize with base64 serde', () => {
     expect(verifySerde(defaultState, 'base64')).toMatchInlineSnapshot(
-      '"base64:eyJjb2RlIjoiZmxvd2NoYXJ0IFREXG4gICAgQVtDaHJpc3RtYXNdIC0tPnxHZXQgbW9uZXl8IEIoR28gc2hvcHBpbmcpXG4gICAgQiAtLT4gQ3tMZXQgbWUgdGhpbmt9XG4gICAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgICBDIC0tPnxUd298IEVbaVBob25lXVxuICAgIEMgLS0-fFRocmVlfCBGW2ZhOmZhLWNhciBDYXJdXG4gICIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6dHJ1ZX0"'
+      `"base64:eyJjb2RlIjoiZmxvd2NoYXJ0IFREXG4gICAgQVtDaHJpc3RtYXNdIC0tPnxHZXQgbW9uZXl8IEIoR28gc2hvcHBpbmcpXG4gICAgQiAtLT4gQ3tMZXQgbWUgdGhpbmt9XG4gICAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgICBDIC0tPnxUd298IEVbaVBob25lXVxuICAgIEMgLS0-fFRocmVlfCBGW2ZhOmZhLWNhciBDYXJdXG4gICIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJhdXRvU3luYyI6dHJ1ZSwicm91Z2giOmZhbHNlLCJ1cGRhdGVEaWFncmFtIjp0cnVlfQ"`
     );
   });
 
   it('should serialize and deserialize with pako serde', () => {
     expect(verifySerde(defaultState, 'pako')).toMatchInlineSnapshot(
-      '"pako:eNpVjk2Lg0AMhv9KyGkL9Q94WGh1t5fCFurN6SFo7AztfDBGpKj_fcd62c0pvM_zhkzY-JYxx-7px0ZTFKhK5SDNoS50NL1Y6m-QZZ_ziQWsd_ya4fhx8tBrH4Jx993mH1cJium8agyijXssGyre_R_HM5T1mYL4cPtLqtHP8FWbi07n_xMdObW-647yjrKGIhQU3wru0XK0ZNr0_rQmCkWzZYV5WlvuaHiKQuWWpNIg_vpyDeYSB97jEFoSLg3dI9ktXH4B_cJWqw"'
+      `"pako:eNpVjs1qw0AMhF9F6NRC_AI-FBq7zSXQQnPz5iBs2bvE-8NaSwi2373r-NLqJM18M2jG1neMJfajv7eaosClVg7yvDeVjmYSS9MViuJtObGA9Y4fCxxfTh4m7UMwbnjd-eMGQTWfN4xBtHG3dbeqZ_7L8QJ1c6YgPlz_Ope7X-CjMd861_93dOSc-mx6KnsqWopQUXwieEDL0ZLp8vvzpigUzZYVlnntuKc0ikLl1oxSEv_zcC2WEhMfMPo0aMyd45SvFDoSrg0NkeyOrL_WfFuF"`
     );
   });
 

diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts
@@ -19,6 +19,7 @@ export const defaultState: State = {
     theme: 'default'
   }),
   autoSync: true,
+  rough: false,
   updateDiagram: true
 };
 

diff --git a/src/lib/util/stats.ts b/src/lib/util/stats.ts
@@ -1,6 +1,6 @@
 import { browser } from '$app/environment';
-import { env } from './env';
 import type PlausibleInstance from 'plausible-tracker';
+import { env } from './env';
 export let plausible: ReturnType<typeof PlausibleInstance> | undefined;
 
 export const initAnalytics = async (): Promise<void> => {
@@ -47,15 +47,23 @@ export const countLines = (code: string): number => {
   return (code.match(/\n/g)?.length ?? 0) + 1;
 };
 
-export const saveStatistics = (graph: string, renderTime: number): void => {
-  const graphType = detectType(graph);
+export const saveStatistics = ({
+  code,
+  renderTime,
+  isRough
+}: {
+  code: string;
+  renderTime: number;
+  isRough: boolean;
+}): void => {
+  const graphType = detectType(code);
   if (!graphType) {
     return;
   }
-  const length = countLines(graph);
+  const length = countLines(code);
   const lengthBucket = getBucket(length);
   const renderTimeMsBucket = getBucket(renderTime);
-  logEvent('render', { graphType, length, lengthBucket, renderTimeMsBucket });
+  logEvent('render', { graphType, length, lengthBucket, renderTimeMsBucket, isRough });
 };
 
 const getBucket = (length: number): string => {

diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
+  import { dev } from '$app/environment';
+  import { base } from '$app/paths';
+  import Actions from '$lib/components/Actions.svelte';
+  import Card from '$lib/components/Card/Card.svelte';
   import Editor from '$lib/components/Editor.svelte';
+  import History from '$lib/components/History/History.svelte';
   import Navbar from '$lib/components/Navbar.svelte';
   import Preset from '$lib/components/Preset.svelte';
-  import Actions from '$lib/components/Actions.svelte';
   import View from '$lib/components/View.svelte';
-  import Card from '$lib/components/Card/Card.svelte';
-  import History from '$lib/components/History/History.svelte';
+  import type { DocumentationConfig, EditorMode, Tab, ValidatedState } from '$lib/types';
   import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state';
   import { cmdKey, initHandler, syncDiagram } from '$lib/util/util';
   import { onMount } from 'svelte';
-  import { base } from '$app/paths';
-  import { dev } from '$app/environment';
-  import type { Tab, DocumentationConfig, EditorMode, ValidatedState } from '$lib/types';
 
   const MCBaseURL = dev ? 'http://localhost:5174' : 'https://mermaidchart.com';
   const docURLBase = 'https://mermaid.js.org';
@@ -187,12 +187,27 @@
     <div class="flex flex-1 flex-col overflow-hidden">
       <Card title="Diagram" isCloseable={false}>
         <div slot="actions" class="flex flex-row items-center gap-2">
-          <label class="label cursor-pointer py-0" for="panZoom">
+          <label
+            class="label flex cursor-pointer gap-1 py-0"
+            title="Rough mode is in beta. Features like clickable nodes, Pan & Zoom, will be disabled."
+            for="rough">
+            <span>Rough</span>
+            <input
+              type="checkbox"
+              class="toggle {$stateStore.rough ? 'btn-secondary' : 'toggle-primary'}"
+              id="rough"
+              bind:checked={$inputStateStore.rough} />
+          </label>
+          <label
+            class="label flex cursor-pointer gap-1 py-0"
+            title={$stateStore.rough ? 'Pan & Zoom is disabled in rough mode.' : ''}
+            for="panZoom">
             <span>Pan & Zoom</span>
             <input
               type="checkbox"
               class="toggle {$stateStore.panZoom ? 'btn-secondary' : 'toggle-primary'}"
               id="panZoom"
+              disabled={$stateStore.rough}
               bind:checked={$inputStateStore.panZoom} />
           </label>
           <a

diff --git a/yarn.lock b/yarn.lock
@@ -3448,6 +3448,11 @@ graphemer@^1.4.0:
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
+hachure-fill@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/hachure-fill/-/hachure-fill-0.5.2.tgz#d19bc4cc8750a5962b47fb1300557a85fcf934cc"
+  integrity sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==
+
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -5014,6 +5019,11 @@ parse5@^7.1.2:
   dependencies:
     entities "^4.4.0"
 
+path-data-parser@0.1.0, path-data-parser@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/path-data-parser/-/path-data-parser-0.1.0.tgz#8f5ba5cc70fc7becb3dcefaea08e2659aba60b8c"
+  integrity sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -5155,6 +5165,19 @@ pluralize@^8.0.0:
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-8.0.0.tgz#1a6fa16a38d12a1901e0320fa017051c539ce3b1"
   integrity sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==
 
+points-on-curve@0.2.0, points-on-curve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/points-on-curve/-/points-on-curve-0.2.0.tgz#7dbb98c43791859434284761330fa893cb81b4d1"
+  integrity sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==
+
+points-on-path@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/points-on-path/-/points-on-path-0.2.1.tgz#553202b5424c53bed37135b318858eacff85dd52"
+  integrity sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==
+  dependencies:
+    path-data-parser "0.1.0"
+    points-on-curve "0.2.0"
+
 possible-typed-array-names@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
@@ -5820,6 +5843,16 @@ rollup@^4.13.0:
     "@rollup/rollup-win32-x64-msvc" "4.17.2"
     fsevents "~2.3.2"
 
+roughjs@^4.6.5:
+  version "4.6.6"
+  resolved "https://registry.yarnpkg.com/roughjs/-/roughjs-4.6.6.tgz#1059f49a5e0c80dee541a005b20cc322b222158b"
+  integrity sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==
+  dependencies:
+    hachure-fill "^0.5.2"
+    path-data-parser "^0.1.0"
+    points-on-curve "^0.2.0"
+    points-on-path "^0.2.1"
+
 rrweb-cssom@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz#ed298055b97cbddcdeb278f904857629dec5e0e1"
@@ -6355,6 +6388,20 @@ svg-pan-zoom@3.6.1:
   resolved "https://registry.yarnpkg.com/svg-pan-zoom/-/svg-pan-zoom-3.6.1.tgz#f880a1bb32d18e9c625d7715350bebc269b450cf"
   integrity sha512-JaKkGHHfGvRrcMPdJWkssLBeWqM+Isg/a09H7kgNNajT1cX5AztDTNs+C8UzpCxjCTRrG34WbquwaovZbmSk9g==
 
+svg-pathdata@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/svg-pathdata/-/svg-pathdata-6.0.3.tgz#80b0e0283b652ccbafb69ad4f8f73e8d3fbf2cac"
+  integrity sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==
+
+svg2roughjs@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/svg2roughjs/-/svg2roughjs-3.2.0.tgz#d46e713b51a3cdaef285e38f1a8b44a4710be936"
+  integrity sha512-w3/KM8H+0bkGtsq7292+xs6JTQ3RyPk98qu1voxs58Tw2oiqXCTDfuh1o9EN3mLpL/QOPi6e6kRu3diveNnvrg==
+  dependencies:
+    roughjs "^4.6.5"
+    svg-pathdata "^6.0.3"
+    tinycolor2 "^1.6.0"
+
 svgo@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-3.2.0.tgz#7a5dff2938d8c6096e00295c2390e8e652fa805d"
@@ -6487,6 +6534,11 @@ tinybench@^2.5.1:
   resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.8.0.tgz#30e19ae3a27508ee18273ffed9ac7018949acd7b"
   integrity sha512-1/eK7zUnIklz4JUUlL+658n58XO2hHLQfSk1Zf2LKieUjxidN16eKFEoDEfjHc3ohofSSqK3X5yO6VGb6iW8Lw==
 
+tinycolor2@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
+  integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
+
 tinypool@^0.8.3:
   version "0.8.4"
   resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-0.8.4.tgz#e217fe1270d941b39e98c625dcecebb1408c9aa8"