diff --git a/docs/syntax/zenuml.md b/docs/syntax/zenuml.md index a9c7c0f4b3..9e9b112554 100644 --- a/docs/syntax/zenuml.md +++ b/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 + +``` diff --git a/packages/mermaid-zenuml/README.md b/packages/mermaid-zenuml/README.md new file mode 120000 index 0000000000..e807400636 --- /dev/null +++ b/packages/mermaid-zenuml/README.md @@ -0,0 +1 @@ +../mermaid/src/docs/syntax/zenuml.md \ No newline at end of file diff --git a/packages/mermaid-zenuml/package.json b/packages/mermaid-zenuml/package.json index 67e6a6e38b..3e26e0dcf6 100644 --- a/packages/mermaid-zenuml/package.json +++ b/packages/mermaid-zenuml/package.json @@ -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", + "contributors": [ + "Peng Xiao", + "Sidharth Vinod (https://sidharth.dev)", + "Dong Cai" + ], "license": "MIT", - "standard": { - "ignore": [ - "dist/**/*.js" - ], - "globals": [ - "page" - ] - }, "dependencies": { "@zenuml/core": "^3.0.0" }, "devDependencies": { - "mermaid": "workspace:*" + "mermaid": "workspace:^" + }, + "peerDependencies": { + "mermaid": "workspace:>=10.0.0" }, "files": [ "dist" diff --git a/packages/mermaid-zenuml/src/parser.ts b/packages/mermaid-zenuml/src/parser.ts index 6a97991c68..8c0ca55d52 100644 --- a/packages/mermaid-zenuml/src/parser.ts +++ b/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 - -// 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: () => { diff --git a/packages/mermaid/src/docs/syntax/zenuml.md b/packages/mermaid/src/docs/syntax/zenuml.md index 03081f2b9b..292c0f1c19 100644 --- a/packages/mermaid/src/docs/syntax/zenuml.md +++ b/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. -``` -new A1 -new A2(with, parameters) +```mermaid-example +zenuml + new A1 + new A2(with, parameters) ``` ### Reply message There are three ways to express a reply message: -``` -// 1. assign a variable from a sync message. -a = A.SyncMessage() +```mermaid-example +zenuml + // 1. assign a variable from a sync message. + a = A.SyncMessage() -// 1.1. optionally give the variable a type -SomeType a = A.SyncMessage() + // 1.1. optionally give the variable a type + SomeType a = A.SyncMessage() -// 2. use return keyword -A.SyncMessage() { - return result -} + // 2. use return keyword + A.SyncMessage() { + return result + } -// 3. use @return or @reply annotator on an async message -@return -A->B: 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. @@ -161,12 +163,13 @@ are ignored. Markdown is supported. See the example below: -``` -// a comment on a participent will not be rendered -BookService -// a comment on a message. -// **Markdown** is supported. -BookService.getBook() +```mermaid-example +zenuml + // a comment on a participant will not be rendered + BookService + // a comment on a message. + // **Markdown** is supported. + BookService.getBook() ``` ## Loops @@ -179,9 +182,9 @@ following notations: 3. forEach, foreach 4. loop -``` +```zenuml while(condition) { - ...statements... + ...statements... } ``` @@ -199,13 +202,13 @@ zenuml It is possible to express alternative paths in a sequence diagram. This is done by the notation -``` +```zenuml if(condition1) { - ...statements... + ...statements... } else if(condition2) { - ...statements... + ...statements... } else { - ...statements... + ...statements... } ``` @@ -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 + +``` diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c86e69b553..3441625da7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -380,7 +380,7 @@ importers: version: 3.0.0(ts-node@10.9.1) devDependencies: mermaid: - specifier: workspace:* + specifier: workspace:^ version: link:../mermaid tests/webpack: