Address mermaid-zenuml PR comments

docs/syntax/zenuml.md

@@ -8,7 +8,7 @@
 
 > A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
 
-Mermaid can render sequence diagrams with ZenUML. Note that ZenUML uses a different
+Mermaid can render sequence diagrams with [ZenUML](https://zenuml.com). Note that ZenUML uses a different
 syntax than the original Sequence Diagram in mermaid.
 
 ```mermaid-example
@@ -153,13 +153,24 @@ zenuml
 
 We use `new` keyword to create an object.
 
+```mermaid-example
+zenuml
     new A1
     new A2(with, parameters)
+```
+
+```mermaid
+zenuml
+    new A1
+    new A2(with, parameters)
+```
 
 ### Reply message
 
 There are three ways to express a reply message:
 
+```mermaid-example
+zenuml
     // 1. assign a variable from a sync message.
     a = A.SyncMessage()
 
@@ -174,6 +185,25 @@ There are three ways to express a reply message:
     // 3. use @return or @reply annotator on an async message
     @return
     A->B: result
+```
+
+```mermaid
+zenuml
+    // 1. assign a variable from a sync message.
+    a = A.SyncMessage()
+
+    // 1.1. optionally give the variable a type
+    SomeType a = A.SyncMessage()
+
+    // 2. use return keyword
+    A.SyncMessage() {
+    return result
+    }
+
+    // 3. use @return or @reply annotator on an async message
+    @return
+    A->B: result
+```
 
 The third way `@return` is rarely used, but it is useful when you want to return to one level up.
 
@@ -237,11 +267,23 @@ are ignored. Markdown is supported.
 
 See the example below:
 
-    // a comment on a participent will not be rendered
+```mermaid-example
+zenuml
+    // a comment on a participant will not be rendered
     BookService
     // a comment on a message.
     // **Markdown** is supported.
     BookService.getBook()
+```
+
+```mermaid
+zenuml
+    // a comment on a participant will not be rendered
+    BookService
+    // a comment on a message.
+    // **Markdown** is supported.
+    BookService.getBook()
+```
 
 ## Loops
 
@@ -253,11 +295,11 @@ following notations:
 3.  forEach, foreach
 4.  loop
 
-<!---->
+```zenuml
-
+while(condition) {
-    while(condition) {
     ...statements...
-    }
+}
+```
 
 See the example below:
 
@@ -281,13 +323,15 @@ zenuml
 
 It is possible to express alternative paths in a sequence diagram. This is done by the notation
 
-    if(condition1) {
+```zenuml
+if(condition1) {
     ...statements...
-    } else if(condition2) {
+} else if(condition2) {
     ...statements...
-    } else {
+} else {
     ...statements...
-    }
+}
+```
 
 See the example below:
 
@@ -315,9 +359,11 @@ zenuml
 
 It is possible to render an `opt` fragment. This is done by the notation
 
-    opt {
+```zenuml
+opt {
   ...statements...
-    }
+}
+```
 
 See the example below:
 
@@ -345,11 +391,13 @@ It is possible to show actions that are happening in parallel.
 
 This is done by the notation
 
-    par {
+```zenuml
+par {
   statement1
   statement2
   statement3
-    }
+}
+```
 
 See the example below:
 
@@ -408,3 +456,17 @@ zenuml
       API->BookingService: rollback status
     }
 ```
+
+## Integrating with your library/website.
+
+Zenuml uses the experimental lazy loading & async rendering features which could change in the future.
+
+You can use this method to add mermaid including the zenuml diagram to a web page:
+
+```html
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+  import zenuml from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml@00.1.0/dist/mermaid-zenuml.esm.min.mjs';
+  await mermaid.registerExternalDiagrams([zenuml]);
+</script>
+```

packages/mermaid-zenuml/README.md

@@ -0,0 +1 @@
+../mermaid/src/docs/syntax/zenuml.md

packages/mermaid-zenuml/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mermaid-js/mermaid-zenuml",
-  "version": "0.0.1",
+  "version": "0.1.0",
-  "description": "Zenuml integration for MermaidJS.",
+  "description": "MermaidJS plugin for ZenUML integration",
   "module": "dist/mermaid-zenuml.core.mjs",
   "types": "dist/detector.d.ts",
   "type": "module",
@@ -23,23 +23,23 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/mermaid-js/mermaid"
+    "url": "https://github.com/mermaid-js/mermaid",
+    "directory": "packages/mermaid-zenuml"
   },
-  "author": "Peng Xiao",
+  "contributors": [
-  "license": "MIT",
+    "Peng Xiao",
-  "standard": {
+    "Sidharth Vinod <github@sidharth.dev> (https://sidharth.dev)",
-    "ignore": [
+    "Dong Cai"
-      "dist/**/*.js"
   ],
-    "globals": [
+  "license": "MIT",
-      "page"
-    ]
-  },
   "dependencies": {
     "@zenuml/core": "^3.0.0"
   },
   "devDependencies": {
-    "mermaid": "workspace:*"
+    "mermaid": "workspace:^"
+  },
+  "peerDependencies": {
+    "mermaid": "workspace:^"
   },
   "files": [
     "dist"

packages/mermaid-zenuml/src/parser.ts

@@ -1,7 +1,9 @@
-// ZenUML manage parsing internally. It uses Antlr4 to parse the DSL.
+/**
-// The parser is defined in https://github.com/ZenUml/vue-sequence/blob/main/src/parser/index.js
+ * ZenUML manage parsing internally. It uses Antlr4 to parse the DSL.
-
+ * The parser is defined in https://github.com/ZenUml/vue-sequence/blob/main/src/parser/index.js
-// This is a dummy parser that satisfies the mermaid API logic.
+ *
+ * This is a dummy parser that satisfies the mermaid API logic.
+ */
 export default {
   parser: { yy: {} },
   parse: () => {

packages/mermaid/src/docs/syntax/zenuml.md

@@ -2,7 +2,7 @@
 
 > A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
 
-Mermaid can render sequence diagrams with ZenUML. Note that ZenUML uses a different
+Mermaid can render sequence diagrams with [ZenUML](https://zenuml.com). Note that ZenUML uses a different
 syntax than the original Sequence Diagram in mermaid.
 
 ```mermaid-example
@@ -97,30 +97,32 @@ zenuml
 
 We use `new` keyword to create an object.
 
-```
+```mermaid-example
-new A1
+zenuml
-new A2(with, parameters)
+    new A1
+    new A2(with, parameters)
 ```
 
 ### Reply message
 
 There are three ways to express a reply message:
 
-```
+```mermaid-example
-// 1. assign a variable from a sync message.
+zenuml
-a = A.SyncMessage()
+    // 1. assign a variable from a sync message.
+    a = A.SyncMessage()
 
-// 1.1. optionally give the variable a type
+    // 1.1. optionally give the variable a type
-SomeType a = A.SyncMessage()
+    SomeType a = A.SyncMessage()
 
-// 2. use return keyword
+    // 2. use return keyword
-A.SyncMessage() {
+    A.SyncMessage() {
     return result
-}
+    }
 
-// 3. use @return or @reply annotator on an async message
+    // 3. use @return or @reply annotator on an async message
-@return
+    @return
-A->B: result
+    A->B: result
 ```
 
 The third way `@return` is rarely used, but it is useful when you want to return to one level up.
@@ -161,12 +163,13 @@ are ignored. Markdown is supported.
 
 See the example below:
 
-```
+```mermaid-example
-// a comment on a participent will not be rendered
+zenuml
-BookService
+    // a comment on a participant will not be rendered
-// a comment on a message.
+    BookService
-// **Markdown** is supported.
+    // a comment on a message.
-BookService.getBook()
+    // **Markdown** is supported.
+    BookService.getBook()
 ```
 
 ## Loops
@@ -179,7 +182,7 @@ following notations:
 3. forEach, foreach
 4. loop
 
-```
+```zenuml
 while(condition) {
     ...statements...
 }
@@ -199,7 +202,7 @@ zenuml
 
 It is possible to express alternative paths in a sequence diagram. This is done by the notation
 
-```
+```zenuml
 if(condition1) {
     ...statements...
 } else if(condition2) {
@@ -225,7 +228,7 @@ zenuml
 
 It is possible to render an `opt` fragment. This is done by the notation
 
-```
+```zenuml
 opt {
   ...statements...
 }
@@ -248,7 +251,7 @@ It is possible to show actions that are happening in parallel.
 
 This is done by the notation
 
-```
+```zenuml
 par {
   statement1
   statement2
@@ -295,3 +298,17 @@ zenuml
       API->BookingService: rollback status
     }
 ```
+
+## Integrating with your library/website.
+
+Zenuml uses the experimental lazy loading & async rendering features which could change in the future.
+
+You can use this method to add mermaid including the zenuml diagram to a web page:
+
+```html
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+  import zenuml from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml@00.1.0/dist/mermaid-zenuml.esm.min.mjs';
+  await mermaid.registerExternalDiagrams([zenuml]);
+</script>
+```