Mermaid

How to add mermaid diagrams in statiq
Published on Tuesday, 16 May 2023

Add a file _scripts.cshtml

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQV2ZWNX32"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-CQV2ZWNX32');
    </script>

    <!-- Mermaid -->
    <script src="https://unpkg.com/mermaid@8.9.3/dist/mermaid.min.js" integrity="sha384-nVmn6yKHyUktDHdQfBgpn1YPgEu8gDXTYI5qccfkF1j6oxBHjKEafySIuNs3UhEW" crossorigin="anonymous"></script>
flowchart LR subgraph azureprod [Azure fa:fa-cloud] AppProduction(App Service fa:fa-globe) --> api-production[APIM fa:fa-sitemap<br>api-production] AppProduction --> vnetprd[vnet-prd] end subgraph onpremprod [On-premises fa:fa-home] vnetprd ----> SQLProd[SQL Prod fa:fa-server ] --> DBProd[(DBProd)] end

[Devlead]

Other