marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-02 11:54:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(arch): updated syntax & demos/docs to reflect changes

Browse Source
This commit is contained in:
NicolasNewman
2024-07-23 15:31:11 -05:00
parent 2ae2686e34
commit 880c4d4ed6
4 changed files with 112 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
demos/architecture.html
View File

@@ -26,10 +26,10 @@
service server(server)[Server] in api service server(server)[Server] in api
service gateway(internet)[Gateway] service gateway(internet)[Gateway]
db L--R server db:L -- R:server
disk1 T--B server disk1:T -- B:server
disk2 T--B db disk2:T -- B:db
server T--B gateway server:T -- B:gateway
</pre> </pre>
<hr /> <hr />
@@ -49,11 +49,11 @@
service gateway(internet)[Gateway] in api service gateway(internet)[Gateway] in api
serv1 B--T serv2 serv1:B -- T:serv2
serv2 L--R db serv2:L -- R:db
serv1 L--R gateway serv1:L -- R:gateway
</pre> </pre>
<hr /> <hr />
@@ -73,10 +73,10 @@
service serv2(server)[Server 2] service serv2(server)[Server 2]
service disk(disk)[Disk] service disk(disk)[Disk]
db L--R s3 db:L -- R:s3
serv1 L--T s3 serv1:L -- T:s3
serv2 L--B s3 serv2:L -- B:s3
serv1 T--B disk serv1:T -- B:disk
</pre> </pre>
<hr /> <hr />
@@ -89,15 +89,15 @@
service servT(server)[Server 4] service servT(server)[Server 4]
service servB(server)[Server 5] service servB(server)[Server 5]
servC (L--R) servL servC:L <--> R:servL
servC (R--L) servR servC:R <--> L:servR
servC (T--B) servT servC:T <--> B:servT
servC (B--T) servB servC:B <--> T:servB
servL (T--L) servT servL:T <--> L:servT
servL (B--L) servB servL:B <--> L:servB
servR (T--R) servT servR:T <--> R:servT
servR (B--R) servB servR:B <--> R:servB
</pre> </pre>
<pre class="mermaid"> <pre class="mermaid">
architecture-beta architecture-beta
@@ -107,15 +107,15 @@
service servT(server)[Server 4] service servT(server)[Server 4]
service servB(server)[Server 5] service servB(server)[Server 5]
servC (L--R) servL servC:L <--> R:servL
servC (R--L) servR servC:R <--> L:servR
servC (T--B) servT servC:T <--> B:servT
servC (B--T) servB servC:B <--> T:servB
servT (L--T) servL servT:L <--> T:servL
servB (L--B) servL servB:L <--> B:servL
servT (R--T) servR servT:R <--> T:servR
servB (R--B) servR servB:R <--> B:servR
</pre> </pre>
<hr /> <hr />
@@ -134,10 +134,10 @@
service bottom_disk(disk)[Disk] in bottom_group service bottom_disk(disk)[Disk] in bottom_group
service center_disk(disk)[Disk] in center_group service center_disk(disk)[Disk] in center_group
left_disk{group} (R--L) center_disk{group} left_disk{group}:R <--> L:center_disk{group}
right_disk{group} (L--R) center_disk{group} right_disk{group}:L <--> R:center_disk{group}
top_disk{group} (B--T) center_disk{group} top_disk{group}:B <--> T:center_disk{group}
bottom_disk{group} (T--B) center_disk{group} bottom_disk{group}:T <--> B:center_disk{group}
</pre </pre
> >
<hr /> <hr />
@@ -151,15 +151,15 @@
service servT(server)[Server 4] service servT(server)[Server 4]
service servB(server)[Server 5] service servB(server)[Server 5]
servC L-[Label]-R servL servC:L -[Label]- R:servL
servC R-[Label]-L servR servC:R -[Label]- L:servR
servC T-[Label]-B servT servC:T -[Label]- B:servT
servC B-[Label]-T servB servC:B -[Label]- T:servB
servL T-[Label]-L servT servL:T -[Label]- L:servT
servL B-[Label]-L servB servL:B -[Label]- L:servB
servR T-[Label]-R servT servR:T -[Label]- R:servT
servR B-[Label]-R servB servR:B -[Label]- R:servB
</pre> </pre>
<pre class="mermaid"> <pre class="mermaid">
architecture-beta architecture-beta
@@ -169,15 +169,15 @@
service servT(server)[Server 4] service servT(server)[Server 4]
service servB(server)[Server 5] service servB(server)[Server 5]
servC L-[Label that is Long]-R servL servC:L -[Label that is Long]- R:servL
servC R-[Label that is Long]-L servR servC:R -[Label that is Long]- L:servR
servC T-[Label that is Long]-B servT servC:T -[Label that is Long]- B:servT
servC B-[Label that is Long]-T servB servC:B -[Label that is Long]- T:servB
servL T-[Label that is Long]-L servT servL:T -[Label that is Long]- L:servT
servL B-[Label that is Long]-L servB servL:B -[Label that is Long]- L:servB
servR T-[Label that is Long]-R servT servR:T -[Label that is Long]- R:servT
servR B-[Label that is Long]-R servB servR:B -[Label that is Long]- R:servB
</pre> </pre>
<hr /> <hr />
@@ -192,12 +192,12 @@
junction juncC junction juncC
junction juncR junction juncR
left_disk R--L juncC left_disk:R -- L:juncC
top_disk B--T juncC top_disk:B -- T:juncC
bottom_disk T--B juncC bottom_disk:T -- B:juncC
juncC R--L juncR juncC:R -- L:juncR
top_gateway B--T juncR top_gateway:B -- T:juncR
bottom_gateway T--B juncR bottom_gateway:T -- B:juncR
</pre> </pre>
<hr /> <hr />
@@ -214,15 +214,15 @@
junction juncC in left junction juncC in left
junction juncR in right junction juncR in right
left_disk R--L juncC left_disk:R -- L:juncC
top_disk B--T juncC top_disk:B -- T:juncC
bottom_disk T--B juncC bottom_disk:T -- B:juncC
top_gateway (B--T juncR top_gateway:B <-- T:juncR
bottom_gateway (T--B juncR bottom_gateway:T <-- B:juncR
juncC{group} R--L) juncR{group} juncC{group}:R --> L:juncR{group}
</pre> </pre>
<hr /> <hr />
@@ -233,8 +233,8 @@
service ec2(aws:ec2)[Server] service ec2(aws:ec2)[Server]
service wave(aws:wavelength)[Wave] service wave(aws:wavelength)[Wave]
s3 L--R ec2 s3:L -- R:ec2
s3 T--B wave s3:T -- B:wave
</pre </pre
> >

50
docs/syntax/architecture.md
View File

@@ -19,9 +19,9 @@ architecture-beta
service disk2(disk)[Storage] in api service disk2(disk)[Storage] in api
service server(server)[Server] in api service server(server)[Server] in api
db L--R server db:L -- R:server
disk1 T--B server disk1:T -- B:server
disk2 T--B db disk2:T -- B:db
``` ```
```mermaid ```mermaid
@@ -33,9 +33,9 @@ architecture-beta
service disk2(disk)[Storage] in api service disk2(disk)[Storage] in api
service server(server)[Server] in api service server(server)[Server] in api
db L--R server db:L -- R:server
disk1 T--B server disk1:T -- B:server
disk2 T--B db disk2:T -- B:db
``` ```
## Syntax ## Syntax
@@ -95,35 +95,35 @@ service database(db)[Database] in private_api
The syntax for declaring an edge is: The syntax for declaring an edge is:
``` ```
{serviceId}{{group}}? {(}?{T|B|L|R}--{T|B|L|R}{)}? {serviceId}{{group}}? {serviceId}{{group}}?:{T|B|L|R} {<}?--{>}? {T|B|L|R}:{serviceId}{{group}}?
``` ```
#### Edge Direction #### Edge Direction
The side of the service the edge comes out of is specified by adding `L|R|T|B` to each end of `--`. The side of the service the edge comes out of is specified by adding a colon (`:`) to the side of the service connecting to the arrow and adding `L|R|T|B`
For example: For example:
``` ```
db R--L server db:R -- L:server
``` ```
creates an edge between the services `db` and `server`, with the edge coming out of the right of `db` and the left of `server`. creates an edge between the services `db` and `server`, with the edge coming out of the right of `db` and the left of `server`.
``` ```
db T--L server db:T -- L:server
``` ```
creates a 90 degree edge between the services `db` and `server`, with the edge coming out of the top of `db` and the left of `server`. creates a 90 degree edge between the services `db` and `server`, with the edge coming out of the top of `db` and the left of `server`.
#### Arrows #### Arrows
Arrows can be added to each side of an edge by adding `(` before the direction on the left, and/or `)` after the direction on the right. Arrows can be added to each side of an edge by adding `<` before the direction on the left, and/or `>` after the direction on the right.
For example: For example:
``` ```
subnet R--L) gateway subnet:R --> L:gateway
``` ```
creates an edge with the arrow going into the `gateway` service creates an edge with the arrow going into the `gateway` service
@@ -138,7 +138,7 @@ For example:
service server[Server] in groupOne service server[Server] in groupOne
service subnet[Subnet] in groupTwo service subnet[Subnet] in groupTwo
server{group} B--T) subnet{group} server{group}:B --> T:subnet{group}
``` ```
creates an edge going out of `groupOne`, adjacent to `server`, and into `groupTwo`, adjacent to `subnet`. creates an edge going out of `groupOne`, adjacent to `server`, and into `groupTwo`, adjacent to `subnet`.
@@ -165,12 +165,12 @@ architecture-beta
junction junctionCenter junction junctionCenter
junction junctionRight junction junctionRight
left_disk R--L junctionCenter left_disk:R -- L:junctionCenter
top_disk B--T junctionCenter top_disk:B -- T:junctionCenter
bottom_disk T--B junctionCenter bottom_disk:T -- B:junctionCenter
junctionCenter R--L junctionRight junctionCenter:R -- L:junctionRight
top_gateway B--T junctionRight top_gateway:B -- T:junctionRight
bottom_gateway T--B junctionRight bottom_gateway:T -- B:junctionRight
``` ```
```mermaid ```mermaid
@@ -183,12 +183,12 @@ architecture-beta
junction junctionCenter junction junctionCenter
junction junctionRight junction junctionRight
left_disk R--L junctionCenter left_disk:R -- L:junctionCenter
top_disk B--T junctionCenter top_disk:B -- T:junctionCenter
bottom_disk T--B junctionCenter bottom_disk:T -- B:junctionCenter
junctionCenter R--L junctionRight junctionCenter:R -- L:junctionRight
top_gateway B--T junctionRight top_gateway:B -- T:junctionRight
bottom_gateway T--B junctionRight bottom_gateway:T -- B:junctionRight
``` ```
## Configuration ## Configuration

32
packages/mermaid/src/docs/syntax/architecture.md
View File

@@ -13,9 +13,9 @@ architecture-beta
service disk2(disk)[Storage] in api service disk2(disk)[Storage] in api
service server(server)[Server] in api service server(server)[Server] in api
db L--R server db:L -- R:server
disk1 T--B server disk1:T -- B:server
disk2 T--B db disk2:T -- B:db
``` ```
## Syntax ## Syntax
@@ -75,35 +75,35 @@ service database(db)[Database] in private_api
The syntax for declaring an edge is: The syntax for declaring an edge is:
``` ```
{serviceId}{{group}}? {(}?{T|B|L|R}--{T|B|L|R}{)}? {serviceId}{{group}}? {serviceId}{{group}}?:{T|B|L|R} {<}?--{>}? {T|B|L|R}:{serviceId}{{group}}?
``` ```
#### Edge Direction #### Edge Direction
The side of the service the edge comes out of is specified by adding `L|R|T|B` to each end of `--`. The side of the service the edge comes out of is specified by adding a colon (`:`) to the side of the service connecting to the arrow and adding `L|R|T|B`
For example: For example:
``` ```
db R--L server db:R -- L:server
``` ```
creates an edge between the services `db` and `server`, with the edge coming out of the right of `db` and the left of `server`. creates an edge between the services `db` and `server`, with the edge coming out of the right of `db` and the left of `server`.
``` ```
db T--L server db:T -- L:server
``` ```
creates a 90 degree edge between the services `db` and `server`, with the edge coming out of the top of `db` and the left of `server`. creates a 90 degree edge between the services `db` and `server`, with the edge coming out of the top of `db` and the left of `server`.
#### Arrows #### Arrows
Arrows can be added to each side of an edge by adding `(` before the direction on the left, and/or `)` after the direction on the right. Arrows can be added to each side of an edge by adding `<` before the direction on the left, and/or `>` after the direction on the right.
For example: For example:
``` ```
subnet R--L) gateway subnet:R --> L:gateway
``` ```
creates an edge with the arrow going into the `gateway` service creates an edge with the arrow going into the `gateway` service
@@ -118,7 +118,7 @@ For example:
service server[Server] in groupOne service server[Server] in groupOne
service subnet[Subnet] in groupTwo service subnet[Subnet] in groupTwo
server{group} B--T) subnet{group} server{group}:B --> T:subnet{group}
``` ```
creates an edge going out of `groupOne`, adjacent to `server`, and into `groupTwo`, adjacent to `subnet`. creates an edge going out of `groupOne`, adjacent to `server`, and into `groupTwo`, adjacent to `subnet`.
@@ -145,12 +145,12 @@ architecture-beta
junction junctionCenter junction junctionCenter
junction junctionRight junction junctionRight
left_disk R--L junctionCenter left_disk:R -- L:junctionCenter
top_disk B--T junctionCenter top_disk:B -- T:junctionCenter
bottom_disk T--B junctionCenter bottom_disk:T -- B:junctionCenter
junctionCenter R--L junctionRight junctionCenter:R -- L:junctionRight
top_gateway B--T junctionRight top_gateway:B -- T:junctionRight
bottom_gateway T--B junctionRight bottom_gateway:T -- B:junctionRight
``` ```
## Configuration ## Configuration

12
packages/parser/src/language/architecture/architecture.langium
View File

@@ -18,8 +18,16 @@ fragment Statement:
| edges+=Edge | edges+=Edge
; ;
fragment LeftPort:
':'lhsDir=ARROW_DIRECTION
;
fragment RightPort:
rhsDir=ARROW_DIRECTION':'
;
fragment Arrow: fragment Arrow:
lhsInto?=ARROW_INTO? lhsDir=ARROW_DIRECTION ('--' | '-' title=ARCH_TITLE '-') rhsDir=ARROW_DIRECTION rhsInto?=ARROW_INTO? LeftPort lhsInto?=ARROW_INTO? ('--' | '-' title=ARCH_TITLE '-') rhsInto?=ARROW_INTO? RightPort
; ;
Group: Group:
@@ -44,4 +52,4 @@ terminal ARCH_TEXT_ICON: /\("[^"]+"\)/;
terminal ARCH_ICON: /\([\w:]+\)/; terminal ARCH_ICON: /\([\w:]+\)/;
terminal ARCH_TITLE: /\[[\w ]+\]/; terminal ARCH_TITLE: /\[[\w ]+\]/;
terminal ARROW_GROUP: /\{group\}/; terminal ARROW_GROUP: /\{group\}/;
terminal ARROW_INTO: /\(|\)/; terminal ARROW_INTO: /<|>/;