added mermaid diagram

pkgs/ui/src/app/layout.tsx

@@ -51,6 +51,16 @@ export default function RootLayout({
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="description" content="Service Aware Networks" />
         <link rel="icon" href="tub-favicon.ico" sizes="any" />
+        <script type="module">
+          import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+        </script>
+        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+        <script
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: `mermaid.initialize({startOnLoad: true});`,
+          }}
+        />
       </head>
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={userPrefersDarkmode ? darkTheme : lightTheme}>
@@ -72,9 +82,8 @@ export default function RootLayout({
                           onClose={() => setShowSidebar(false)}
                         />
                         <div
-                          className={tw`${
-                            !showSidebarDerived && translate
-                          } flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
+                          className={tw`${!showSidebarDerived && translate
+                            } flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
                         >
                           <div className="static top-0 mb-2 py-2">
                             <div className="grid grid-cols-3">