From a0e54ff7bdf0de4f3462cef6c0a6392db818e35c Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 12 Apr 2025 17:27:24 +0530 Subject: [PATCH 1/4] chore: Use mermaid examples package to populate samples --- package.json | 1 + pnpm-lock.yaml | 41 ++++--- src/lib/components/Preset.svelte | 193 +++---------------------------- src/lib/util/mermaid.ts | 21 ++++ 4 files changed, 65 insertions(+), 191 deletions(-) diff --git a/package.json b/package.json index 33348ae0..0bbfb469 100644 --- a/package.json +++ b/package.json @@ -82,6 +82,7 @@ }, "dependencies": { "@fontsource-variable/recursive": "^5.2.5", + "@mermaid-js/examples": "https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc", "@mermaid-js/layout-elk": "^0.1.7", "@mermaid-js/mermaid-zenuml": "^0.2.0", "dayjs": "^1.11.13", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f9b9dbe2..43e87d59 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,12 +11,15 @@ importers: '@fontsource-variable/recursive': specifier: ^5.2.5 version: 5.2.5 + '@mermaid-js/examples': + specifier: https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc + version: https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc '@mermaid-js/layout-elk': specifier: ^0.1.7 - version: 0.1.7(mermaid@11.6.0) + version: 0.1.7(mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453) '@mermaid-js/mermaid-zenuml': specifier: ^0.2.0 - version: 0.2.0(mermaid@11.6.0)(typescript@5.8.2) + version: 0.2.0(mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453)(typescript@5.8.2) dayjs: specifier: ^1.11.13 version: 1.11.13 @@ -28,7 +31,7 @@ importers: version: 4.17.21 mermaid: specifier: ^11.6.0 - version: 11.6.0 + version: https://pkg.pr.new/mermaid-js/mermaid@6453 mode-watcher: specifier: ^0.5.1 version: 0.5.1(svelte@5.25.6) @@ -559,18 +562,25 @@ packages: '@jridgewell/trace-mapping@0.3.25': resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} + '@mermaid-js/examples@https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc': + resolution: {tarball: https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc} + version: 0.0.1 + '@mermaid-js/layout-elk@0.1.7': resolution: {integrity: sha512-G3AJ2jMaCAqky2CT3z/sf3pK5UuS3tne98GsXDl3PkKByCmPmOYmJPf+6oX5PUlV3HNWWHuSgtZ9NU/CZDSuHQ==} + version: 0.1.7 peerDependencies: mermaid: ^11.0.0 '@mermaid-js/mermaid-zenuml@0.2.0': resolution: {integrity: sha512-Lv7xNlFT5y2TIlts+yYl1HfeEgjoqw5cfSZsWYejoJvt9K0QfdPBoj5D9Tft1aN0pj1mxjuTZbZQ1Anmem/RMg==} + version: 0.2.0 peerDependencies: mermaid: '>=10.0.0' - '@mermaid-js/parser@0.4.0': - resolution: {integrity: sha512-wla8XOWvQAwuqy+gxiZqY+c7FokraOTHRWMsbB4AgRx9Sy7zKslNyejy7E+a77qHfey5GXw/ik3IXv/NHMJgaA==} + '@mermaid-js/parser@https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@34e6112fea01f771d9da8d310147855b9650d66c': + resolution: {tarball: https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@34e6112fea01f771d9da8d310147855b9650d66c} + version: 0.4.0 '@nodelib/fs.scandir@2.1.5': resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} @@ -2377,8 +2387,9 @@ packages: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} engines: {node: '>= 8'} - mermaid@11.6.0: - resolution: {integrity: sha512-PE8hGUy1LDlWIHWBP05SFdqUHGmRcCcK4IzpOKPE35eOw+G9zZgcnMpyunJVUEOgb//KBORPjysKndw8bFLuRg==} + mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453: + resolution: {tarball: https://pkg.pr.new/mermaid-js/mermaid@6453} + version: 11.6.0 micromatch@4.0.8: resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==} @@ -4067,22 +4078,24 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.0 - '@mermaid-js/layout-elk@0.1.7(mermaid@11.6.0)': + '@mermaid-js/examples@https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc': {} + + '@mermaid-js/layout-elk@0.1.7(mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453)': dependencies: d3: 7.9.0 elkjs: 0.9.3 - mermaid: 11.6.0 + mermaid: https://pkg.pr.new/mermaid-js/mermaid@6453 - '@mermaid-js/mermaid-zenuml@0.2.0(mermaid@11.6.0)(typescript@5.8.2)': + '@mermaid-js/mermaid-zenuml@0.2.0(mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453)(typescript@5.8.2)': dependencies: '@zenuml/core': 3.27.12(typescript@5.8.2) - mermaid: 11.6.0 + mermaid: https://pkg.pr.new/mermaid-js/mermaid@6453 transitivePeerDependencies: - '@vue/composition-api' - ts-node - typescript - '@mermaid-js/parser@0.4.0': + '@mermaid-js/parser@https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@34e6112fea01f771d9da8d310147855b9650d66c': dependencies: langium: 3.3.1 @@ -6080,11 +6093,11 @@ snapshots: merge2@1.4.1: {} - mermaid@11.6.0: + mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453: dependencies: '@braintree/sanitize-url': 7.1.1 '@iconify/utils': 2.3.0 - '@mermaid-js/parser': 0.4.0 + '@mermaid-js/parser': https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@34e6112fea01f771d9da8d310147855b9650d66c '@types/d3': 7.4.3 cytoscape: 3.31.1 cytoscape-cose-bilkent: 4.1.0(cytoscape@3.31.1) diff --git a/src/lib/components/Preset.svelte b/src/lib/components/Preset.svelte index 43447ea6..ac77b72f 100644 --- a/src/lib/components/Preset.svelte +++ b/src/lib/components/Preset.svelte @@ -1,171 +1,12 @@ diff --git a/src/lib/util/mermaid.ts b/src/lib/util/mermaid.ts index 12693c10..82f9f73e 100644 --- a/src/lib/util/mermaid.ts +++ b/src/lib/util/mermaid.ts @@ -1,3 +1,4 @@ +import { diagramData } from '@mermaid-js/examples'; import elkLayouts from '@mermaid-js/layout-elk'; import zenuml from '@mermaid-js/mermaid-zenuml'; import type { MermaidConfig, RenderResult } from 'mermaid'; @@ -39,3 +40,23 @@ export const standardizeDiagramType = (diagramType: string) => { } } }; + +type DiagramDefinition = (typeof diagramData)[number]; + +const isValidDiagram = (diagram: DiagramDefinition): diagram is Required => { + return Boolean(diagram.name && diagram.examples && diagram.examples.length > 0); +}; + +export const getSampleDiagrams = () => { + const diagrams = diagramData + .filter((d) => isValidDiagram(d)) + .map(({ examples, ...rest }) => ({ + ...rest, + example: examples?.filter(({ isDefault }) => isDefault)[0] + })); + const examples: Record = {}; + for (const diagram of diagrams) { + examples[diagram.name.replace(/ (Diagram|Chart|Graph)/, '')] = diagram.example.code; + } + return examples; +}; From 70ea4f59a023073dad47a1e385883f68ac71e759 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 20 Apr 2025 13:41:17 +0530 Subject: [PATCH 2/4] chore: Update @mermaid-js/examples version --- package.json | 2 +- pnpm-lock.yaml | 11 +++++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 0bbfb469..e84e0f6a 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,7 @@ }, "dependencies": { "@fontsource-variable/recursive": "^5.2.5", - "@mermaid-js/examples": "https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc", + "@mermaid-js/examples": "0.0.1-beta.1", "@mermaid-js/layout-elk": "^0.1.7", "@mermaid-js/mermaid-zenuml": "^0.2.0", "dayjs": "^1.11.13", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 43e87d59..86a167da 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12,8 +12,8 @@ importers: specifier: ^5.2.5 version: 5.2.5 '@mermaid-js/examples': - specifier: https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc - version: https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc + specifier: 0.0.1-beta.1 + version: 0.0.1-beta.1 '@mermaid-js/layout-elk': specifier: ^0.1.7 version: 0.1.7(mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453) @@ -562,9 +562,8 @@ packages: '@jridgewell/trace-mapping@0.3.25': resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} - '@mermaid-js/examples@https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc': - resolution: {tarball: https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc} - version: 0.0.1 + '@mermaid-js/examples@0.0.1-beta.1': + resolution: {integrity: sha512-dJ8yhCOf9Xh7T6VJzAATtxfhjT+8ywxFWYVuEE8ffu3P5v6iuoP+T27LLJN5aAIgmsLo/wFshlRqZFz3s8OolA==} '@mermaid-js/layout-elk@0.1.7': resolution: {integrity: sha512-G3AJ2jMaCAqky2CT3z/sf3pK5UuS3tne98GsXDl3PkKByCmPmOYmJPf+6oX5PUlV3HNWWHuSgtZ9NU/CZDSuHQ==} @@ -4078,7 +4077,7 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.0 - '@mermaid-js/examples@https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc': {} + '@mermaid-js/examples@0.0.1-beta.1': {} '@mermaid-js/layout-elk@0.1.7(mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453)': dependencies: From 1a2d752ca4da0962c99ef48f9b18a69eee59ee42 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 2 Aug 2025 19:29:46 +0530 Subject: [PATCH 3/4] test: Update diagram names --- tests/actions.spec.ts | 2 +- tests/docMap.spec.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/actions.spec.ts b/tests/actions.spec.ts index 95335481..bfa6adeb 100644 --- a/tests/actions.spec.ts +++ b/tests/actions.spec.ts @@ -26,7 +26,7 @@ test.describe('Check actions', () => { // Verify downloaded file is different for different diagrams await editPage.toggleSampleDiagrams(); - await editPage.loadSampleDiagram('ER'); + await editPage.loadSampleDiagram('Entity Relationship'); const secondPngSize = await editPage.checkAndDownloadPNG(81_000); const secondSvgSize = await editPage.downloadSVG(11_000); diff --git a/tests/docMap.spec.ts b/tests/docMap.spec.ts index 649ac56a..e579a668 100644 --- a/tests/docMap.spec.ts +++ b/tests/docMap.spec.ts @@ -12,7 +12,7 @@ test.describe('Editor docs tests', () => { test('Test to see if the correct URL loads when changing from one diagram to other', async ({ editPage }) => { - await editPage.loadSampleDiagram('Flow'); + await editPage.loadSampleDiagram('Flowchart'); await editPage.checkDocURL(/syntax\/flowchart\.html/); await editPage.setEditorMode('Config'); await editPage.checkDocURL(/syntax\/flowchart\.html#configuration/); From cc308b81c97adb8934a5e36d47f5ffc7c342c87c Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 4 Aug 2025 12:45:26 +0530 Subject: [PATCH 4/4] test: Update size to match new diagram --- tests/actions.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/actions.spec.ts b/tests/actions.spec.ts index bfa6adeb..2618be5b 100644 --- a/tests/actions.spec.ts +++ b/tests/actions.spec.ts @@ -29,7 +29,7 @@ test.describe('Check actions', () => { await editPage.loadSampleDiagram('Entity Relationship'); const secondPngSize = await editPage.checkAndDownloadPNG(81_000); - const secondSvgSize = await editPage.downloadSVG(11_000); + const secondSvgSize = await editPage.downloadSVG(40_000); // Verify files are actually different expect(firstPngSize).not.toBe(secondPngSize);