mermaid-js · knsv · Jun 2, 2023 · Apr 22, 2023 · Apr 25, 2023 · Apr 25, 2023
diff --git a/.eslintignore b/.eslintignore
@@ -4,4 +4,5 @@ docs/Setup.md
 cypress.config.js
 cypress/plugins/index.js
 coverage
-*.json
+*.json
+node_modules
diff --git a/.vite/build.ts b/.vite/build.ts
@@ -44,6 +44,11 @@ const packageOptions = {
     packageName: 'mermaid-example-diagram',
     file: 'detector.ts',
   },
+  'mermaid-zenuml': {
+    name: 'mermaid-zenuml',
+    packageName: 'mermaid-zenuml',
+    file: 'detector.ts',
+  },
 };
 
 interface BuildOptions {
@@ -146,6 +151,7 @@ if (watch) {
   build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
   if (!mermaidOnly) {
     build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-zenuml' }));
   }
 } else if (visualize) {
   await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));

diff --git a/.vite/server.ts b/.vite/server.ts
@@ -15,6 +15,7 @@ async function createServer() {
 
   app.use(cors());
   app.use(express.static('./packages/mermaid/dist'));
+  app.use(express.static('./packages/mermaid-zenuml/dist'));
   app.use(express.static('./packages/mermaid-example-diagram/dist'));
   app.use(vite.middlewares);
   app.use(express.static('demos'));

diff --git a/cSpell.json b/cSpell.json
@@ -7,6 +7,7 @@
     "alois",
     "aloisklink",
     "antiscript",
+    "antlr",
     "appli",
     "applitools",
     "asciidoctor",
@@ -134,7 +135,8 @@
     "vitepress",
     "vueuse",
     "xlink",
-    "yash"
+    "yash",
+    "zenuml"
   ],
   "patterns": [
     { "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" },

diff --git a/cypress/integration/rendering/zenuml.spec.js b/cypress/integration/rendering/zenuml.spec.js
@@ -0,0 +1,19 @@
+import { imgSnapshotTest } from '../../helpers/util.js';
+
+describe('Zen UML', () => {
+  it('Basic Zen UML diagram', () => {
+    imgSnapshotTest(
+      `
+    zenuml
+			A.method() {
+        if(x) {
+          B.method() {
+            selfCall() { return X }
+          }
+        }
+      }
+    `,
+      {}
+    );
+  });
+});
diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
@@ -1,5 +1,6 @@
 import mermaid2 from './mermaid.esm.mjs';
 import externalExample from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
+import zenUml from '../../packages/mermaid-zenuml/dist/mermaid-zenuml.core.mjs';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));
@@ -44,7 +45,7 @@ const contentLoaded = async function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
-    await mermaid2.registerExternalDiagrams([externalExample]);
+    await mermaid2.registerExternalDiagrams([externalExample, zenUml]);
     mermaid2.initialize(graphObj.mermaid);
     await mermaid2.run();
   }

diff --git a/demos/index.html b/demos/index.html
@@ -66,6 +66,9 @@ <h2><a href="./sequence.html">Sequence</a></h2>
       <li>
         <h2><a href="./state.html">State</a></h2>
       </li>
+      <li>
+        <h2><a href="./zenuml.html">ZenUML</a></h2>
+      </li>
     </ul>
   </body>
 </html>
diff --git a/demos/zenuml.html b/demos/zenuml.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mermaid Zenuml Test Page</title>
+  </head>
+
+  <body>
+    <h1>Zenuml demos</h1>
+    <pre class="mermaid">
+		zenuml
+      title Sync Messages (Design Pattern: Adapter)
+			@Starter(Client)
+      Adapter.interfaceMethod() {
+        translateParameter(parameter)
+
+        result = Implementation.implementationMethod()
+
+        translateResult()
+        return translatedResult
+      }
+    </pre>
+    <pre class="mermaid">
+		zenuml
+      title Async Messages (SPA Authentication)
+      // ```
+      // GET https://${account.namespace}/authorize/?
+      // response_type=token
+      // &client_id=${account.clientId}
+      // &redirect_url=YOUR_CALLBACK_URL
+      // &state=VALUE_THAT_SURVIVES_REDIRECTS
+      // &scope=openid
+      // ```
+      Browser->Auth0: 1. initiate the authentication
+      Auth0->"Identity Provider": 2. OAuth2 / SAML, etc
+      "Identity Provider"->"Identity Provider": 3. user gets authenticated
+      Auth0->Browser: 4. redirect to ${YOUR_CALLBACK_URL}/#id_token=e68...
+      Browser->Auth0: 5. validate id_token and get user profile
+      Browser->"Your API": 6. call API sending JWT in Authorization header
+      "Your API"->"Your API": 7. validate token
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      import zenuml from './mermaid-zenuml.esm.mjs';
+      await mermaid.registerExternalDiagrams([zenuml]);
+      mermaid.initialize({
+        logLevel: 3,
+      });
+    </script>
+  </body>
+</html>
diff --git a/docs/syntax/img/zenuml-participant-annotators.png b/docs/syntax/img/zenuml-participant-annotators.png