| Info |
|---|
The demo shown below was taken from the official Mermaid documentation. |
| Confluence mermaid macro |
|---|
| download | true |
|---|
| searchText | architecture beta group api cloud API service db database Database in api service disk1 disk Storage in api service disk2 disk Storage in api service server server Server in api db server disk1 server disk2 db |
|---|
| download | true |
|---|
| fullscreen | true |
|---|
| panZoom | true |
|---|
| zoom | |
|---|
| theme | default |
|---|
| disableUseMaxWidth | |
|---|
| copy | true |
|---|
| exportWidth | |
|---|
| height | |
|---|
|
[{"body":"block-beta\n columns 3\n Start((\"Start\")) space:2\n down<[\" \"]>(down) space:2\n Decision{{\"Make Decision\"}} right<[\"Yes\"]>(right) Process1[\"Process A\"]\n downAgain<[\"No\"]>(down) space r3<[\"Done\"]>(down)\n Process2[\"Process B\"] r2<[\"Done\"]>(right) End((\"End\"))\n\n style Start fill:#969;\n style End fill:#696;","date":1726151451688},{"body":"---\ntitle: \"TCP Packet\"\n---\npacket-beta\n0-15: \"Source Port\"\n16-31: \"Destination Port\"\n32-63: \"Sequence Number\"\n64-95: \"Acknowledgment Number\"\n96-99: \"Data Offset\"\n100-105: \"Reserved\"\n106: \"URG\"\n107: \"ACK\"\n108: \"PSH\"\n109: \"RST\"\n110: \"SYN\"\n111: \"FIN\"\n112-127: \"Window\"\n128-143: \"Checksum\"\n144-159: \"Urgent Pointer\"\n160-191: \"(Options and Padding)\"\n192-255: \"Data (variable length)\"","date":1726151473930},{"body":"architecture-beta\n group api(cloud)[API]\n\n service db(database)[Database] in api\n service disk1(disk)[Storage] in api\n service disk2(disk)[Storage] in api\n service server(server)[Server] in api\n\n db:L -- R:server\n disk1:T -- B:server\n disk2:T -- B:db","date":1726151583442}] |
...
| Confluence prism macro |
|---|
| lineNumbers | true |
|---|
| showPreviews | true |
|---|
| downloadFilename | QuadrantChartArchitectureDiagram.mmd |
|---|
| showInvisibles | |
|---|
| lineHighlight | |
|---|
| language | Mermaid |
|---|
| lineNumbersStart | |
|---|
| dialogTitle | Architecture diagram |
|---|
| limitHeight | |
|---|
| height | |
|---|
| clickableLinks | |
|---|
|
architecture-beta
group api(cloud)[API]
service db(database)[Database] in api
service disk1(disk)[Storage] in api
service disk2(disk)[Storage] in api
service server(server)[Server] in api
db:L -- R:server
disk1:T -- B:server
disk2:T -- B:db |
...
👉 Check out the official Mermaid documentation here https://mermaid.js.org/syntax/architecture.html.