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()
 
@@ -168,12 +179,31 @@ There are three ways to express a reply message:
 
     // 2. use return keyword
     A.SyncMessage() {
-      return result
+    return result
     }
 
     // 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
 
-<!---->
-
-    while(condition) {
-      ...statements...
-    }
+```zenuml
+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) {
-      ...statements...
-    } else if(condition2) {
-      ...statements...
-    } else {
-      ...statements...
-    }
+```zenuml
+if(condition1) {
+    ...statements...
+} else if(condition2) {
+    ...statements...
+} 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 {
-      ...statements...
-    }
+```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 {
-      statement1
-      statement2
-      statement3
-    }
+```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>
+```