Merge pull request #1383 from dontry/feature/zenuml

Add @mermaid-js/mermaid-zenuml dependency and ZenUML sample diagram

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

@@ -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/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);