Zenuml support

.eslintignore

@@ -3,4 +3,6 @@ dist/**
 docs/Setup.md
 cypress.config.js
 cypress/plugins/index.js
-coverage
+coverage
+# temporarily ignore this folder.
+packages/mermaid-zenuml/zenuml/core/**

.gitignore

@@ -36,3 +36,6 @@ tsconfig.tsbuildinfo
 knsv*.html
 local*.html
 stats/
+
+packages/mermaid-zenuml/zenuml/core/reports
+packages/mermaid-zenuml/zenuml/core/src/generated-parser

.vite/build.ts

@@ -1,10 +1,15 @@
 import { build, InlineConfig, type PluginOption } from 'vite';
+import { createVuePlugin as vue } from 'vite-plugin-vue2';
+
 import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
 import { readFileSync } from 'fs';
 import { visualizer } from 'rollup-plugin-visualizer';
 import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js';
+import autoprefixer from 'autoprefixer';
+import tailwindcss from 'tailwindcss';
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
 
 const visualize = process.argv.includes('--visualize');
 const watch = process.argv.includes('--watch');
@@ -41,11 +46,16 @@ const packageOptions = {
     packageName: 'mermaid-mindmap',
     file: 'detector.ts',
   },
-  // 'mermaid-example-diagram-detector': {
-  //   name: 'mermaid-example-diagram-detector',
-  //   packageName: 'mermaid-example-diagram',
-  //   file: 'detector.ts',
-  // },
+  'mermaid-zenuml/zenuml/core': {
+    name: 'zenuml',
+    packageName: 'mermaid-zenuml/zenuml/core',
+    file: 'core.ts',
+  },
+  'mermaid-zenuml': {
+    name: 'mermaid-zenuml',
+    packageName: 'mermaid-zenuml',
+    file: 'detector.ts',
+  },
 };
 
 interface BuildOptions {
@@ -120,13 +130,108 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
   if (watch && config.build) {
     config.build.watch = {
       include: [
+        'packages/mermaid-zenuml/zenuml/core/src/**',
+        'packages/mermaid-zenuml/src/**',
         'packages/mermaid-mindmap/src/**',
         'packages/mermaid/src/**',
         // 'packages/mermaid-example-diagram/src/**',
       ],
     };
   }
 
+  if (entryName === 'mermaid-zenuml/zenuml/core') {
+    config.plugins.push(vue());
+    config.plugins.push(cssInjectedByJsPlugin());
+    config.css = {
+      postcss: {
+        plugins: [
+          tailwindcss({
+            important: '.zenuml',
+            content: [
+              './packages/mermaid-zenuml/zenuml/core/**/*.html',
+              './packages/mermaid-zenuml/zenuml/core/src/**/*.vue',
+            ],
+            theme: {
+              extend: {
+                textColor: {
+                  skin: {
+                    title:
+                      'var(--color-text-title, var(--color-text-message, var(--color-text-base, #000)))',
+                    participant:
+                      'var(--color-text-participant, var(--color-text-message, var(--color-text-base, #000)))',
+                    message: 'var(--color-text-message, var(--color-text-base, #000))',
+                    'message-arrow':
+                      'var(--color-message-arrow, var(--color-border-frame, var(--color-border-base, #000)))', // message arrow head
+                    'message-hover': 'var(--color-text-message-hover, var(--color-bg-base, #fff))',
+                    comment:
+                      'var(--color-text-comment, var(--color-text-secondary, var(--color-text-base, #000)))',
+                    'fragment-header':
+                      'var(--color-text-fragment-header, var(--color-text-message, #000))',
+                    fragment: 'var(--color-text-fragment, var(--color-text-message, #000))',
+                    base: 'var(--color-text-base)',
+                    header: 'var(--color-text-header)',
+                    secondary: 'var(--color-text-secondary)',
+                    control:
+                      'var(--color-text-control, var(--color-text-secondary, var(--color-text-base, #000)))',
+                    muted: 'var(--color-text-muted)',
+                    hover: 'var(--color-text-hover)',
+                    link: `var(--color-text-link, var(--color-text-secondary, var(--color-text-base, #000)))`,
+                    fill: `var(--color-text-fill)`,
+                  },
+                },
+                backgroundColor: {
+                  skin: {
+                    canvas: 'var(--color-bg-canvas, var(--color-bg-base, #fff))',
+                    frame:
+                      'var(--color-bg-frame, var(--color-bg-canvas, var(--color-bg-base, #fff)))',
+                    title:
+                      'var(--color-bg-title, var(--color-bg-frame, var(--color-bg-canvas, var(--color-bg-base, #fff))))',
+                    participant:
+                      'var(--color-bg-participant, var(--color-bg-frame, var(--color-bg-canvas, var(--color-bg-base, #fff))))',
+                    lifeline:
+                      'var(--color-border-participant, var(--color-border-participant, var(--color-border-frame, var(--color-border-base, #000))))',
+                    divider:
+                      'var(--color-border-participant, var(--color-border-frame, var(--color-border-base, #000)))',
+                    'message-hover': 'var(--color-bg-message-hover, var(--color-text-base, #000))',
+                    'fragment-header': 'var(--color-bg-fragment-header, transparent)',
+                    occurrence:
+                      'var(--color-bg-occurrence, var(--color-bg-participant, var(--color-bg-frame, var(--color-bg-canvas, var(--color-bg-base, #fff)))))',
+                    base: 'var(--color-bg-base)',
+                    secondary: 'var(--color-bg-secondary)',
+                    hover: 'var(--color-bg-hover)',
+                    fill: 'var(--color-bg-fill)',
+                  },
+                },
+                borderColor: {
+                  skin: {
+                    frame: 'var(--color-border-frame, var(--color-border-base, #000))',
+                    participant:
+                      'var(--color-border-participant, var(--color-border-frame, var(--color-border-base, #000)))',
+                    'message-arrow':
+                      'var(--color-message-arrow, var(--color-border-frame,  var(--color-border-base, #000)))', // message arrow line
+                    fragment:
+                      'var(--color-border-fragment, var(--color-border-frame,  var(--color-border-base, #000)))',
+                    occurrence:
+                      'var(--color-border-occurrence, var(--color-border-frame,  var(--color-border-base, #000)))',
+                    base: 'var(--color-border-base)',
+                    secondary: 'var(--color-border-secondary)',
+                  },
+                },
+                gradientColorStops: {
+                  skin: {
+                    base: 'var(--color-bg-base)',
+                    secondary: 'var(--color-bg-secondary)',
+                  },
+                },
+              },
+            },
+            plugins: [],
+          }),
+          autoprefixer,
+        ],
+      },
+    };
+  }
   return config;
 };
 
@@ -149,6 +254,8 @@ if (watch) {
   build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
   if (!mermaidOnly) {
     build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-zenuml' }));
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-zenuml/zenuml/core' }));
     // build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
   }
 } else if (visualize) {

.vite/server.ts

@@ -24,6 +24,7 @@ async function createServer() {
   app.use(express.static('./packages/mermaid/dist'));
   app.use(express.static('./packages/mermaid-example-diagram/dist'));
   app.use(express.static('./packages/mermaid-mindmap/dist'));
+  app.use(express.static('./packages/mermaid-zenuml/dist'));
   app.use(vite.middlewares);
   app.use(express.static('demos'));
   app.use(express.static('cypress/platform'));

cSpell.json

@@ -6,6 +6,7 @@
     "adamiecki",
     "alois",
     "antiscript",
+    "antlr4",
     "applitools",
     "asciidoctor",
     "ashish",
@@ -97,7 +98,8 @@
     "visio",
     "vitepress",
     "xlink",
-    "yash"
+    "yash",
+    "zenuml"
   ],
   "patterns": [
     { "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" },

custom-word-list.txt

@@ -0,0 +1 @@
+Antlr4

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 }
+          }
+        }
+      }
+    `,
+      {}
+    );
+  });
+});

cypress/platform/viewer.js

@@ -1,5 +1,6 @@
 import mermaid2 from '../../packages/mermaid/src/mermaid';
 import mindmap from '../../packages/mermaid-mindmap/src/detector';
+import zenUml from '../../packages/mermaid-zenuml/src/detector';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));
@@ -37,7 +38,7 @@ const contentLoaded = async function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
-    await mermaid2.registerExternalDiagrams([mindmap]);
+    await mermaid2.registerExternalDiagrams([mindmap, zenUml]);
     mermaid2.initialize(graphObj.mermaid);
     mermaid2.init();
   }

demos/index.html

@@ -63,6 +63,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>

demos/zenuml.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <!-- <link rel="stylesheet" href="https://unpkg.com/vue-sequence/dist/vue-sequence.css" /> -->
+    <style>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>Zen UML 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 zenUml from '../../packages/mermaid-zenuml/src/detector';
+      import mermaid from '../../packages/mermaid/src/mermaid';
+      await mermaid.registerExternalDiagrams([zenUml]);
+      await mermaid.initialize({ logLevel: 0 });
+    </script>
+  </body>
+</html>