collab/mermaid/demos/architecture.htmlblame
View source
6dd74de1<!doctype html>
6dd74de2<html lang="en">
6dd74de3 <head>
6dd74de4 <meta charset="utf-8" />
6dd74de5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6dd74de6 <title>Architecture Mermaid Quick Test Page</title>
6dd74de7 <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
6dd74de8 <style>
6dd74de9 div.mermaid {
6dd74de10 /* font-family: 'trebuchet ms', verdana, arial; */
6dd74de11 font-family: 'Courier New', Courier, monospace !important;
6dd74de12 }
6dd74de13 </style>
6dd74de14 </head>
6dd74de15
6dd74de16 <body>
6dd74de17 <h1>Architecture diagram demo</h1>
6dd74de18 <h2>Simple diagram with groups</h2>
6dd74de19 <pre class="mermaid">
6dd74de20 architecture-beta
6dd74de21 group api(cloud)[API]
6dd74de22
6dd74de23 service db(database)[Database] in api
6dd74de24 service disk1(disk)[Storage] in api
6dd74de25 service disk2(disk)[Storage] in api
6dd74de26 service server(server)[Server] in api
6dd74de27 service gateway(internet)[Gateway]
6dd74de28
6dd74de29 db:L -- R:server
6dd74de30 disk1:T -- B:server
6dd74de31 disk2:T -- B:db
6dd74de32 server:T -- B:gateway
6dd74de33 </pre>
6dd74de34 <hr />
6dd74de35
6dd74de36 <h2>Groups within groups</h2>
6dd74de37 <pre class="mermaid">
6dd74de38 architecture-beta
6dd74de39 group api[API]
6dd74de40 group public[Public API] in api
6dd74de41 group private[Private API] in api
6dd74de42
6dd74de43
6dd74de44 service serv1(server)[Server] in public
6dd74de45
6dd74de46
6dd74de47 service serv2(server)[Server] in private
6dd74de48 service db(database)[Database] in private
6dd74de49
6dd74de50 service gateway(internet)[Gateway] in api
6dd74de51
6dd74de52 serv1:B -- T:serv2
6dd74de53
6dd74de54 serv2:L -- R:db
6dd74de55
6dd74de56 serv1:L -- R:gateway
6dd74de57 </pre>
6dd74de58 <hr />
6dd74de59
6dd74de60 <h2>Default icon (?) from unknown icon name</h2>
6dd74de61 <pre class="mermaid">
6dd74de62 architecture-beta
6dd74de63 service unknown(iconnamedoesntexist)[Unknown Icon]
6dd74de64 </pre>
6dd74de65 <hr />
6dd74de66
6dd74de67 <h2>Split Direction</h2>
6dd74de68 <pre class="mermaid">
6dd74de69 architecture-beta
6dd74de70 service db(database)[Database]
6dd74de71 service s3(disk)[Storage]
6dd74de72 service serv1(server)[Server 1]
6dd74de73 service serv2(server)[Server 2]
6dd74de74 service disk(disk)[Disk]
6dd74de75
6dd74de76 db:L -- R:s3
6dd74de77 serv1:L -- T:s3
6dd74de78 serv2:L -- B:s3
6dd74de79 serv1:T -- B:disk
6dd74de80 </pre>
6dd74de81 <hr />
6dd74de82
6dd74de83 <h2>Arrow Tests</h2>
6dd74de84 <pre class="mermaid">
6dd74de85 architecture-beta
6dd74de86 service servC(server)[Server 1]
6dd74de87 service servL(server)[Server 2]
6dd74de88 service servR(server)[Server 3]
6dd74de89 service servT(server)[Server 4]
6dd74de90 service servB(server)[Server 5]
6dd74de91
6dd74de92 servC:L <--> R:servL
6dd74de93 servC:R <--> L:servR
6dd74de94 servC:T <--> B:servT
6dd74de95 servC:B <--> T:servB
6dd74de96
6dd74de97 servL:T <--> L:servT
6dd74de98 servL:B <--> L:servB
6dd74de99 servR:T <--> R:servT
6dd74de100 servR:B <--> R:servB
6dd74de101 </pre>
6dd74de102 <pre class="mermaid">
6dd74de103 architecture-beta
6dd74de104 service servC(server)[Server 1]
6dd74de105 service servL(server)[Server 2]
6dd74de106 service servR(server)[Server 3]
6dd74de107 service servT(server)[Server 4]
6dd74de108 service servB(server)[Server 5]
6dd74de109
6dd74de110 servC:L <--> R:servL
6dd74de111 servC:R <--> L:servR
6dd74de112 servC:T <--> B:servT
6dd74de113 servC:B <--> T:servB
6dd74de114
6dd74de115 servT:L <--> T:servL
6dd74de116 servB:L <--> B:servL
6dd74de117 servT:R <--> T:servR
6dd74de118 servB:R <--> B:servR
6dd74de119 </pre>
6dd74de120 <hr />
6dd74de121
6dd74de122 <h2>Group Edges</h2>
6dd74de123 <pre class="mermaid">
6dd74de124 architecture-beta
6dd74de125 group left_group(cloud)[Left]
6dd74de126 group right_group(cloud)[Right]
6dd74de127 group top_group(cloud)[Top]
6dd74de128 group bottom_group(cloud)[Bottom]
6dd74de129 group center_group(cloud)[Center]
6dd74de130
6dd74de131 service left_disk(disk)[Disk] in left_group
6dd74de132 service right_disk(disk)[Disk] in right_group
6dd74de133 service top_disk(disk)[Disk] in top_group
6dd74de134 service bottom_disk(disk)[Disk] in bottom_group
6dd74de135 service center_disk(disk)[Disk] in center_group
6dd74de136
6dd74de137 left_disk{group}:R <--> L:center_disk{group}
6dd74de138 right_disk{group}:L <--> R:center_disk{group}
6dd74de139 top_disk{group}:B <--> T:center_disk{group}
6dd74de140 bottom_disk{group}:T <--> B:center_disk{group}
6dd74de141 </pre
6dd74de142 >
6dd74de143 <hr />
6dd74de144
6dd74de145 <h2>Edge Label Test</h2>
6dd74de146 <pre class="mermaid">
6dd74de147 architecture-beta
6dd74de148 service servC(server)[Server 1]
6dd74de149 service servL(server)[Server 2]
6dd74de150 service servR(server)[Server 3]
6dd74de151 service servT(server)[Server 4]
6dd74de152 service servB(server)[Server 5]
6dd74de153
6dd74de154 servC:L -[Label]- R:servL
6dd74de155 servC:R -[Label]- L:servR
6dd74de156 servC:T -[Label]- B:servT
6dd74de157 servC:B -[Label]- T:servB
6dd74de158
6dd74de159 servL:T -[Label]- L:servT
6dd74de160 servL:B -[Label]- L:servB
6dd74de161 servR:T -[Label]- R:servT
6dd74de162 servR:B -[Label]- R:servB
6dd74de163 </pre>
6dd74de164 <pre class="mermaid">
6dd74de165 architecture-beta
6dd74de166 service servC(server)[Server 1]
6dd74de167 service servL(server)[Server 2]
6dd74de168 service servR(server)[Server 3]
6dd74de169 service servT(server)[Server 4]
6dd74de170 service servB(server)[Server 5]
6dd74de171
6dd74de172 servC:L -[Label that is Long]- R:servL
6dd74de173 servC:R -[Label that is Long]- L:servR
6dd74de174 servC:T -[Label that is Long]- B:servT
6dd74de175 servC:B -[Label that is Long]- T:servB
6dd74de176
6dd74de177 servL:T -[Label that is Long]- L:servT
6dd74de178 servL:B -[Label that is Long]- L:servB
6dd74de179 servR:T -[Label that is Long]- R:servT
6dd74de180 servR:B -[Label that is Long]- R:servB
6dd74de181 </pre>
6dd74de182
6dd74de183 <hr />
6dd74de184 <h2>Junction Demo</h2>
6dd74de185 <pre class="mermaid">
6dd74de186 architecture-beta
6dd74de187 service left_disk(disk)[Disk]
6dd74de188 service top_disk(disk)[Disk]
6dd74de189 service bottom_disk(disk)[Disk]
6dd74de190 service top_gateway(internet)[Gateway]
6dd74de191 service bottom_gateway(internet)[Gateway]
6dd74de192 junction juncC
6dd74de193 junction juncR
6dd74de194
6dd74de195 left_disk:R -- L:juncC
6dd74de196 top_disk:B -- T:juncC
6dd74de197 bottom_disk:T -- B:juncC
6dd74de198 juncC:R -- L:juncR
6dd74de199 top_gateway:B -- T:juncR
6dd74de200 bottom_gateway:T -- B:juncR
6dd74de201 </pre>
6dd74de202 <hr />
6dd74de203
6dd74de204 <h2>Junction Demo Groups</h2>
6dd74de205 <pre class="mermaid">
6dd74de206 architecture-beta
6dd74de207 group left
6dd74de208 group right
6dd74de209 service left_disk(disk)[Disk] in left
6dd74de210 service top_disk(disk)[Disk] in left
6dd74de211 service bottom_disk(disk)[Disk] in left
6dd74de212 service top_gateway(internet)[Gateway] in right
6dd74de213 service bottom_gateway(internet)[Gateway] in right
6dd74de214 junction juncC in left
6dd74de215 junction juncR in right
6dd74de216
6dd74de217 left_disk:R -- L:juncC
6dd74de218 top_disk:B -- T:juncC
6dd74de219 bottom_disk:T -- B:juncC
6dd74de220
6dd74de221
6dd74de222 top_gateway:B <-- T:juncR
6dd74de223 bottom_gateway:T <-- B:juncR
6dd74de224
6dd74de225 juncC{group}:R --> L:juncR{group}
6dd74de226 </pre>
6dd74de227 <hr />
6dd74de228
6dd74de229 <h2>External Icons Demo</h2>
6dd74de230 <pre class="mermaid">
6dd74de231 architecture-beta
6dd74de232 service s3(logos:aws-s3)[Cloud Store]
6dd74de233 service ec2(logos:aws-ec2)[Server]
6dd74de234 service api(logos:aws-api-gateway)[Api Gateway]
6dd74de235 service fa(fa:image)[Font Awesome Icon]
6dd74de236 </pre>
6dd74de237
6dd74de238 <script type="module">
6dd74de239 import mermaid from './mermaid.esm.mjs';
6dd74de240 mermaid.registerIconPacks([
6dd74de241 {
6dd74de242 name: 'logos',
6dd74de243 loader: () =>
6dd74de244 fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
6dd74de245 },
6dd74de246 {
6dd74de247 name: 'fa',
6dd74de248 loader: () =>
6dd74de249 fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
6dd74de250 res.json()
6dd74de251 ),
6dd74de252 },
6dd74de253 ]);
6dd74de254 </script>
6dd74de255 </body>
6dd74de256</html>