mirror of
				https://github.com/mermaid-js/mermaid.git
				synced 2025-10-25 00:44:10 +02:00 
			
		
		
		
	
		
			
				
	
	
		
			54 lines
		
	
	
		
			1.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			54 lines
		
	
	
		
			1.6 KiB
		
	
	
	
		
			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>
 | 
