mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-21 17:26:45 +02:00
docs(arch): included junction nodes in docs
This commit is contained in:
@@ -40,11 +40,11 @@ architecture
|
||||
|
||||
## Syntax
|
||||
|
||||
The building blocks of an architecture are `groups`, `services`, and `edges`.
|
||||
The building blocks of an architecture are `groups`, `services`, `edges`, and `junctions`.
|
||||
|
||||
For supporting components, icons are declared by surrounding the icon name with `()`, while labels are declared by surrounding the text with `[]`.
|
||||
|
||||
To begin an architecture diagram, use the keyword `architecture`, followed by your groups, services, and edges. While each of the 3 building blocks can be declared in any order, care must be taken to ensure the identifier was previously declared by another component.
|
||||
To begin an architecture diagram, use the keyword `architecture`, followed by your groups, services, edges, and junctions. While each of the 3 building blocks can be declared in any order, care must be taken to ensure the identifier was previously declared by another component.
|
||||
|
||||
### Groups
|
||||
|
||||
@@ -70,7 +70,7 @@ group private_api(cloud)[Private API] in public_api
|
||||
|
||||
### Services
|
||||
|
||||
The syntax for declaring a group is:
|
||||
The syntax for declaring a service is:
|
||||
|
||||
```
|
||||
service {service id}({icon name})[{title}] (in {parent id})?
|
||||
@@ -92,6 +92,103 @@ service database(db)[Database] in private_api
|
||||
|
||||
### Edges
|
||||
|
||||
TODO
|
||||
The syntax for declaring an edge is:
|
||||
|
||||
```
|
||||
{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 `--`.
|
||||
|
||||
For example:
|
||||
|
||||
```
|
||||
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
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
For example:
|
||||
|
||||
```
|
||||
subnet R--L) gateway
|
||||
```
|
||||
|
||||
creates an edge with the arrow going into the `gateway` service
|
||||
|
||||
#### Edges out of Groups
|
||||
|
||||
To have an edge go from a group to another group or service within another group, the `{group}` modifier can be added after the `serviceId`.
|
||||
|
||||
For example:
|
||||
|
||||
```
|
||||
service server[Server] in groupOne
|
||||
service subnet[Subnet] in groupTwo
|
||||
|
||||
server{group} B--T) subnet{group}
|
||||
```
|
||||
|
||||
creates an edge going out of `groupOne`, adjacent to `server`, and into `groupTwo`, adjacent to `subnet`.
|
||||
|
||||
It's important to note that `groupId`s cannot be used for specifying edges and the `{group}` modifier can only be used for services within a group.
|
||||
|
||||
### Junctions
|
||||
|
||||
Junctions are a special type of node which acts as a potential 4-way split between edges.
|
||||
|
||||
The syntax for declaring a junction is:
|
||||
|
||||
```
|
||||
junction {junction id} (in {parent id})?
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
architecture
|
||||
service left_disk(disk)[Disk]
|
||||
service top_disk(disk)[Disk]
|
||||
service bottom_disk(disk)[Disk]
|
||||
service top_gateway(internet)[Gateway]
|
||||
service bottom_gateway(internet)[Gateway]
|
||||
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
|
||||
```
|
||||
|
||||
```mermaid
|
||||
architecture
|
||||
service left_disk(disk)[Disk]
|
||||
service top_disk(disk)[Disk]
|
||||
service bottom_disk(disk)[Disk]
|
||||
service top_gateway(internet)[Gateway]
|
||||
service bottom_gateway(internet)[Gateway]
|
||||
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
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
Reference in New Issue
Block a user