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

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

50
docs/syntax/architecture.md
View File

@ -19,9 +19,9 @@ architecture-beta
service disk2(disk)[Storage] in api
service server(server)[Server] in api
db L--R server
disk1 T--B server
disk2 T--B db
db:L -- R:server
disk1:T -- B:server
disk2:T -- B:db
```
```mermaid
@ -33,9 +33,9 @@ architecture-beta
service disk2(disk)[Storage] in api
service server(server)[Server] in api
db L--R server
disk1 T--B server
disk2 T--B db
db:L -- R:server
disk1:T -- B:server
disk2:T -- B:db
```
## Syntax
@ -95,35 +95,35 @@ service database(db)[Database] in private_api
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
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:
```
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`.
```
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`.
#### 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:
```
subnet R--L) gateway
subnet:R --> L:gateway
```
creates an edge with the arrow going into the `gateway` service
@ -138,7 +138,7 @@ For example:
service server[Server] in groupOne
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`.
@ -165,12 +165,12 @@ architecture-beta
junction junctionCenter
junction junctionRight
left_disk R--L junctionCenter
top_disk B--T junctionCenter
bottom_disk T--B junctionCenter
junctionCenter R--L junctionRight
top_gateway B--T junctionRight
bottom_gateway T--B junctionRight
left_disk:R -- L:junctionCenter
top_disk:B -- T:junctionCenter
bottom_disk:T -- B:junctionCenter
junctionCenter:R -- L:junctionRight
top_gateway:B -- T:junctionRight
bottom_gateway:T -- B:junctionRight
```
```mermaid
@ -183,12 +183,12 @@ architecture-beta
junction junctionCenter
junction junctionRight
left_disk R--L junctionCenter
top_disk B--T junctionCenter
bottom_disk T--B junctionCenter
junctionCenter R--L junctionRight
top_gateway B--T junctionRight
bottom_gateway T--B junctionRight
left_disk:R -- L:junctionCenter
top_disk:B -- T:junctionCenter
bottom_disk:T -- B:junctionCenter
junctionCenter:R -- L:junctionRight
top_gateway:B -- T:junctionRight
bottom_gateway:T -- B:junctionRight
```
## Configuration

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

@ -13,9 +13,9 @@ architecture-beta
service disk2(disk)[Storage] in api
service server(server)[Server] in api
db L--R server
disk1 T--B server
disk2 T--B db
db:L -- R:server
disk1:T -- B:server
disk2:T -- B:db
```
## Syntax
@ -75,35 +75,35 @@ service database(db)[Database] in private_api
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
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:
```
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`.
```
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`.
#### 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:
```
subnet R--L) gateway
subnet:R --> L:gateway
```
creates an edge with the arrow going into the `gateway` service
@ -118,7 +118,7 @@ For example:
service server[Server] in groupOne
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`.
@ -145,12 +145,12 @@ architecture-beta
junction junctionCenter
junction junctionRight
left_disk R--L junctionCenter
top_disk B--T junctionCenter
bottom_disk T--B junctionCenter
junctionCenter R--L junctionRight
top_gateway B--T junctionRight
bottom_gateway T--B junctionRight
left_disk:R -- L:junctionCenter
top_disk:B -- T:junctionCenter
bottom_disk:T -- B:junctionCenter
junctionCenter:R -- L:junctionRight
top_gateway:B -- T:junctionRight
bottom_gateway:T -- B:junctionRight
```
## Configuration

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

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