demos/zenuml.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Mermaid Zenuml Test Page</title>
  </head>

  <body>
    <h1>Zenuml demos</h1>
    <pre class="mermaid">
		zenuml
      title Sync Messages (Design Pattern: Adapter)
			@Starter(Client)
      Adapter.interfaceMethod() {
        translateParameter(parameter)

        result = Implementation.implementationMethod()

        translateResult()
        return translatedResult
      }
    </pre>
    <pre class="mermaid">
		zenuml
      title Async Messages (SPA Authentication)
      // ```
      // GET https://${account.namespace}/authorize/?
      // response_type=token
      // &client_id=${account.clientId}
      // &redirect_url=YOUR_CALLBACK_URL
      // &state=VALUE_THAT_SURVIVES_REDIRECTS
      // &scope=openid
      // ```
      Browser->Auth0: 1. initiate the authentication
      Auth0->"Identity Provider": 2. OAuth2 / SAML, etc
      "Identity Provider"->"Identity Provider": 3. user gets authenticated
      Auth0->Browser: 4. redirect to ${YOUR_CALLBACK_URL}/#id_token=e68...
      Browser->Auth0: 5. validate id_token and get user profile
      Browser->"Your API": 6. call API sending JWT in Authorization header
      "Your API"->"Your API": 7. validate token
    </pre>

    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      import zenuml from './mermaid-zenuml.esm.mjs';
      await mermaid.registerExternalDiagrams([zenuml]);
      mermaid.initialize({
        logLevel: 3,
      });
    </script>
  </body>
</html>