GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Address mermaid-zenuml PR comments

Browse Source
This commit is contained in:
Dong Cai 2023-05-16 20:29:56 +10:00
parent a01343bf1b
commit cce5505662
5 changed files with 152 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
docs/syntax/zenuml.md
View File

@ -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) {
...statements...
}
```
See the example below:
@ -281,6 +323,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) {
@ -288,6 +331,7 @@ It is possible to express alternative paths in a sequence diagram. This is done
} 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
```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
```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>
```

1
packages/mermaid-zenuml/README.md Symbolic link
View File

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

26
packages/mermaid-zenuml/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@mermaid-js/mermaid-zenuml",
"version": "0.0.1",
"description": "Zenuml integration for MermaidJS.",
"version": "0.1.0",
"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",
"license": "MIT",
"standard": {
"ignore": [
"dist/**/*.js"
"contributors": [
"Peng Xiao",
"Sidharth Vinod <github@sidharth.dev> (https://sidharth.dev)",
"Dong Cai"
],
"globals": [
"page"
]
},
"license": "MIT",
"dependencies": {
"@zenuml/core": "^3.0.0"
},
"devDependencies": {
"mermaid": "workspace:*"
"mermaid": "workspace:^"
},
"peerDependencies": {
"mermaid": "workspace:^"
},
"files": [
"dist"

10
packages/mermaid-zenuml/src/parser.ts
View File

@ -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
// This is a dummy parser that satisfies the mermaid API logic.
/**
* 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.
*/
export default {
parser: { yy: {} },
parse: () => {

35
packages/mermaid/src/docs/syntax/zenuml.md
View File

@ -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,7 +97,8 @@ zenuml
We use `new` keyword to create an object.
```
```mermaid-example
zenuml
new A1
new A2(with, parameters)
```
@ -106,7 +107,8 @@ new A2(with, parameters)
There are three ways to express a reply message:
```
```mermaid-example
zenuml
// 1. assign a variable from a sync message.
a = A.SyncMessage()
@ -161,8 +163,9 @@ 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.
@ -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>
```