Client-side Mermaid (#10394)

* client mermaid

* lil loader

* make it work

contents/docs/how-posthog-works/index.mdx

@@ -109,7 +109,7 @@ flowchart TD
             Events(Events Service)
             App(Web Service)
 
-            na %% Invisible helper node
+            na
         end
 
 

gatsby-browser.tsx

@@ -8,7 +8,7 @@ import { Provider as ToastProvider } from './src/context/toast'
 import { RouteUpdateArgs } from 'gatsby'
 import { UserProvider } from './src/hooks/useUser'
 import { ChatProvider } from './src/hooks/useChat'
-import Chat from './src/components/Chat'
+
 initKea(false)
 
 export const wrapRootElement = ({ element }) => (

gatsby-config.js

@@ -98,9 +98,6 @@ module.exports = {
                 extensions: ['.mdx', '.md'],
                 gatsbyRemarkPlugins: [
                     { resolve: 'gatsby-remark-autolink-headers', options: { icon: false } },
-                    {
-                        resolve: require.resolve(`./plugins/gatsby-remark-mermaid`),
-                    },
                     {
                         resolve: require.resolve('./plugins/gatsby-remark-video'),
                     },

package.json

@@ -94,7 +94,7 @@
         "markdown-link-extractor": "^4.0.1",
         "markdown-to-jsx": "^7.4.0",
         "md5": "^2.3.0",
-        "mermaid": "^9.1.5",
+        "mermaid": "^11.4.1",
         "mobx": "^6.3.13",
         "multiparty": "^4.2.3",
         "node-fetch": "^2.6.1",

src/components/CodeBlock/index.tsx

@@ -10,6 +10,7 @@ import languageMap from './languages'
 import { useValues } from 'kea'
 import { layoutLogic } from 'logic/layoutLogic'
 import Tooltip from 'components/Tooltip'
+import Mermaid from 'components/Mermaid'
 
 type LanguageOption = {
     label?: string
@@ -74,6 +75,9 @@ type MdxCodeBlockChildren = {
 }
 
 export const MdxCodeBlock = ({ children, ...props }: MdxCodeBlock) => {
+    if (children?.props?.className?.includes('language-mermaid')) {
+        return <Mermaid>{children.props.children}</Mermaid>
+    }
     const childArray = Array.isArray(children) ? children : [children]
 
     const languages = childArray

src/components/Mermaid/index.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useRef, useState } from 'react'
+import mermaid from 'mermaid'
+
+export default function Mermaid({ children }: { children: string }): JSX.Element {
+    const [loading, setLoading] = useState(true)
+    const mermaidRef = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+        mermaid.initialize({ startOnLoad: false })
+        if (mermaidRef.current && !mermaidRef.current.hasAttribute('data-rendered')) {
+            mermaid.run({
+                nodes: [mermaidRef.current],
+                postRenderCallback: () => {
+                    setLoading(false)
+                    mermaidRef.current?.setAttribute('data-rendered', 'true')
+                },
+            })
+        }
+    }, [])
+    return (
+        <div className="relative">
+            {loading && (
+                <div className="bg-accent dark:bg-accent-dark flex items-center justify-center size-full rounded-md animate-pulse absolute inset-0" />
+            )}
+            <div ref={mermaidRef} className={loading ? 'invisible' : ''}>
+                {children}
+            </div>
+        </div>
+    )
+}