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
        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
        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 uknown icon name</h2>
  <pre class="mermaid">
      architecture
        service unknown(iconnamedoesntexist)[Uknown Icon]
    </pre>
  <hr />

  <h2>Split Direction</h2>
  <pre class="mermaid">
      architecture
        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
        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
        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
        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
        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
        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
        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
        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>AWS Icon Demo</h2>
  <pre class="mermaid">
    architecture
      service s3(s3)[Cloud Store]
      service ec2(ec2)[Server]
      service wave(wavelength)[Wave]

      s3 L--R ec2
      s3 T--B wave
  </pre>

  <script type="module">
    import mermaid from './mermaid.esm.mjs';

    const ALLOWED_TAGS = [
      'a',
      'b',
      'blockquote',
      'br',
      'dd',
      'div',
      'dl',
      'dt',
      'em',
      'foreignObject',
      'h1',
      'h2',
      'h3',
      'h4',
      'h5',
      'h6',
      'h7',
      'h8',
      'hr',
      'i',
      'li',
      'ul',
      'ol',
      'p',
      'pre',
      'span',
      'strike',
      'strong',
      'table',
      'tbody',
      'td',
      'tfoot',
      'th',
      'thead',
      'tr',
    ];
    mermaid.parseError = function (err, hash) {
      // console.error('Mermaid error: ', err);
    };
    mermaid.initialize({
      theme: 'base',
      startOnLoad: true,
      logLevel: 0,
      flowchart: {
        useMaxWidth: false,
        htmlLabels: true,
      },
      gantt: {
        useMaxWidth: false,
      },
      architecture: {
        iconSize: 80,
      },
      useMaxWidth: false,
      iconLibraries: ['aws:full']
    });
    function callback() {
      alert('It worked');
    }
    mermaid.parseError = function (err, hash) {
      console.error('In parse error:');
      console.error(err);
    };
  </script>
</body>

</html>