demos/architecture.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Architecture Mermaid Quick Test Page</title>
    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
    <style>
      div.mermaid {
        /* font-family: 'trebuchet ms', verdana, arial; */
        font-family: 'Courier New', Courier, monospace !important;
      }
    </style>
  </head>

  <body>
    <h1>Architecture diagram demo</h1>
    <h2>Simple diagram with groups</h2>
    <pre class="mermaid">
      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
        service gateway(internet)[Gateway] 

        db:L -- R:server
        disk1:T -- B:server
        disk2:T -- B:db
        server:T -- B:gateway
    </pre>
    <hr />

    <h2>Groups within groups</h2>
    <pre class="mermaid">
      architecture-beta
        group api[API]
        group public[Public API] in api
        group private[Private API] in api


        service serv1(server)[Server] in public


        service serv2(server)[Server] in private
        service db(database)[Database] in private

        service gateway(internet)[Gateway] in api

        serv1:B -- T:serv2

        serv2:L -- R:db

        serv1:L -- R:gateway
    </pre>
    <hr />

    <h2>Default icon (?) from unknown icon name</h2>
    <pre class="mermaid">
      architecture-beta
        service unknown(iconnamedoesntexist)[Unknown Icon]
    </pre>
    <hr />

    <h2>Split Direction</h2>
    <pre class="mermaid">
      architecture-beta
        service db(database)[Database]
        service s3(disk)[Storage]
        service serv1(server)[Server 1]
        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
    </pre>
    <hr />

    <h2>Arrow Tests</h2>
    <pre class="mermaid">
      architecture-beta
        service servC(server)[Server 1]
        service servL(server)[Server 2]
        service servR(server)[Server 3]
        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

        servL:T <--> L:servT
        servL:B <--> L:servB
        servR:T <--> R:servT
        servR:B <--> R:servB
    </pre>
    <pre class="mermaid">
      architecture-beta
        service servC(server)[Server 1]
        service servL(server)[Server 2]
        service servR(server)[Server 3]
        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

        servT:L <--> T:servL
        servB:L <--> B:servL
        servT:R <--> T:servR
        servB:R <--> B:servR
    </pre>
    <hr />

    <h2>Group Edges</h2>
    <pre class="mermaid">
      architecture-beta
        group left_group(cloud)[Left]
        group right_group(cloud)[Right]
        group top_group(cloud)[Top]
        group bottom_group(cloud)[Bottom]
        group center_group(cloud)[Center]

        service left_disk(disk)[Disk] in left_group
        service right_disk(disk)[Disk] in right_group
        service top_disk(disk)[Disk] in top_group
        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}
  </pre
    >
    <hr />

    <h2>Edge Label Test</h2>
    <pre class="mermaid">
      architecture-beta
        service servC(server)[Server 1]
        service servL(server)[Server 2]
        service servR(server)[Server 3]
        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

        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
        service servC(server)[Server 1]
        service servL(server)[Server 2]
        service servR(server)[Server 3]
        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

        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 />
    <h2>Junction Demo</h2>
    <pre class="mermaid">
      architecture-beta
        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 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
    </pre>
    <hr />

    <h2>Junction Demo Groups</h2>
    <pre class="mermaid">
      architecture-beta
        group left
        group right
        service left_disk(disk)[Disk] in left
        service top_disk(disk)[Disk] in left
        service bottom_disk(disk)[Disk] in left
        service top_gateway(internet)[Gateway] in right
        service bottom_gateway(internet)[Gateway] in right
        junction juncC in left
        junction juncR in right

        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

        juncC{group}:R --> L:juncR{group}
    </pre>
    <hr />

    <h2>External Icons Demo</h2>
    <pre class="mermaid">
    architecture-beta
      service s3(logos:aws-s3)[Cloud Store]
      service ec2(logos:aws-ec2)[Server]
      service api(logos:aws-api-gateway)[Api Gateway]
      service fa(fa:image)[Font Awesome Icon]
    </pre>

    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      mermaid.registerIconPacks([
        {
          name: 'logos',
          loader: () =>
            fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
        },
        {
          name: 'fa',
          loader: () =>
            fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
              res.json()
            ),
        },
      ]);
    </script>
  </body>
</html>