Merge branch 'develop' into fix/1423

cypress/e2e/diagramUpdate.spec.ts

@@ -69,7 +69,7 @@ A & B & C & D & E --> F & G & K & Z & i`);
   });
 
   it('supports commenting code out/in', () => {
-    cy.get('#editor').contains('Car').click();
+    cy.get('#editor').contains('Car').click({ force: true });
     cy.get('#editor').get('textarea').type(`${cmd}/`, { force: true });
     cy.get('#view').contains('Car').should('not.exist');
 

package.json

@@ -24,7 +24,7 @@
   "devDependencies": {
     "@cypress/snapshot": "2.1.7",
     "@sveltejs/adapter-static": "3.0.1",
-    "@sveltejs/kit": "2.5.4",
+    "@sveltejs/kit": "2.5.5",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@testing-library/svelte": "4.1.0",
     "@types/lodash-es": "^4.17.12",
@@ -69,6 +69,7 @@
     "vitest-dom": "^0.1.1"
   },
   "dependencies": {
+    "@mermaid-js/mermaid-zenuml": "^0.2.0",
     "daisyui": "2.52.0",
     "dayjs": "^1.11.7",
     "js-base64": "3.7.7",

src/lib/components/Preset.svelte

@@ -141,6 +141,30 @@
     C --> db
     D --> C
     style m fill:#d6d,stroke:#333,stroke-width:4px
+    `,
+    ZenUML: `zenuml
+    title Order Service
+    @Actor Client #FFEBE6
+    @Boundary OrderController #0747A6
+    @EC2 <<BFF>> OrderService #E3FCEF
+    group BusinessService {
+      @Lambda PurchaseService
+      @AzureFunction InvoiceService
+    }
+
+    @Starter(Client)
+    // \`POST /orders\`
+    OrderController.post(payload) {
+      OrderService.create(payload) {
+        order = new Order(payload)
+        if(order != null) {
+          par {
+            PurchaseService.createPO(order)
+            InvoiceService.createInvoice(order)      
+          }      
+        }
+      }
+    }
     `
   };
 
@@ -154,7 +178,7 @@
   };
 
   // Adding in this array will add an icon to the preset menu
-  const newDiagrams: SampleTypes[] = ['QuadrantChart', 'XYChart', 'Block'];
+  const newDiagrams: SampleTypes[] = ['QuadrantChart', 'XYChart', 'Block', 'ZenUML'];
   const diagramOrder: SampleTypes[] = [
     'Flow',
     'Sequence',
@@ -168,7 +192,8 @@
     'Mindmap',
     'QuadrantChart',
     'XYChart',
-    'Block'
+    'Block',
+    'ZenUML'
   ];
 </script>
 

src/lib/util/fileLoaders/gist.ts

@@ -2,9 +2,9 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { addHistoryEntry } from '$lib/components/History/history';
 import type { State } from '$lib/types';
 import { defaultState } from '$lib/util/state';
-import { addHistoryEntry } from '$lib/components/History/history';
 import { fetchJSON, fetchText } from '$lib/util/util';
 
 const codeFileName = 'code.mmd';
@@ -102,8 +102,12 @@ export const loadGistData = async (gistURL: string): Promise<State> => {
   );
   const gistHistory: GistData[] = [];
   for (const entry of history) {
-    const data: GistData | undefined = await getGistData(entry.url).catch();
-    data && gistHistory.push(data);
+    try {
+      const data: GistData = await getGistData(entry.url);
+      gistHistory.push(data);
+    } catch (error) {
+      console.error(error);
+    }
   }
   if (gistHistory.length === 0) {
     throw new Error('Invalid gist provided');

src/lib/util/mermaid.ts

@@ -1,11 +1,16 @@
 import mermaid from 'mermaid';
 import type { MermaidConfig, RenderResult } from 'mermaid';
+import zenuml from '@mermaid-js/mermaid-zenuml';
+
+const init = mermaid.registerExternalDiagrams([zenuml]);
 
 export const render = async (
   config: MermaidConfig,
   code: string,
   id: string
 ): Promise<RenderResult> => {
+  await init;
+
   // Should be able to call this multiple times without any issues.
   mermaid.initialize(config);
   return await mermaid.render(id, code);