add zoom and panning to mermaid svgs

Author: davemooreuws

package.json

@@ -72,6 +72,7 @@
     "react-dom": "^18.3.1",
     "react-highlight-words": "^0.20.0",
     "react-icons": "^5.3.0",
+    "react-zoom-pan-pinch": "^3.7.0",
     "rehype-autolink-headings": "^7.1.0",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",

src/components/GitHubStarCount.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { getStarGazers } from '@/lib/stargazers'
 import clsx from 'clsx'
 import React, { FC, useEffect, useState } from 'react'
 

src/components/MermaidZoom.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import React from 'react'
+
+import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'
+import { Button } from './ui/button'
+import {
+  ArrowPathIcon,
+  MagnifyingGlassMinusIcon,
+  MagnifyingGlassPlusIcon,
+} from '@heroicons/react/24/outline'
+
+interface MermaidZoomProps extends React.ComponentPropsWithoutRef<'svg'> {}
+
+const MermaidZoom: React.FC<MermaidZoomProps> = (props) => (
+  <div className="relative flex items-center justify-center">
+    <TransformWrapper centerOnInit initialScale={0.9} minScale={0.75}>
+      {({ zoomIn, zoomOut, resetTransform, instance }) => (
+        <React.Fragment>
+          <div className="absolute right-2 top-2 z-10 space-x-1">
+            <Button variant="outline" size="icon" onClick={() => zoomIn()}>
+              <MagnifyingGlassPlusIcon className="size-5" />
+            </Button>
+            <Button variant="outline" size="icon" onClick={() => zoomOut()}>
+              <MagnifyingGlassMinusIcon className="size-5" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => resetTransform()}
+            >
+              <ArrowPathIcon className="size-5" />
+            </Button>
+          </div>
+          <TransformComponent
+            wrapperClass="bg-white rounded-lg !w-full cursor-move"
+            contentClass={'!w-full !h-full'}
+          >
+            <svg
+              {...props}
+              className={cn('mx-auto px-2 py-4', props.className)}
+            />
+          </TransformComponent>
+        </React.Fragment>
+      )}
+    </TransformWrapper>
+  </div>
+)
+
+export default MermaidZoom

src/components/mdx.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import clsx from 'clsx'
 import { Table } from '@/components/ui/table'
+import MermaidZoom from './MermaidZoom'
 
 export {
   TableHead as th,
@@ -110,4 +111,14 @@ export { CodeTabs } from '@/components/code/CodeTabs'
 
 export { Mermaid } from 'mdx-mermaid/Mermaid'
 
+export const svg = (props: React.ComponentPropsWithoutRef<'svg'>) => {
+  const { id } = props
+
+  if (id?.startsWith('mermaid-svg')) {
+    return <MermaidZoom {...props} />
+  }
+
+  return <svg {...props} />
+}
+
 // see if we need to remove these

src/styles/mermaid.css

@@ -1,7 +1,3 @@
-svg[id^='mermaid-svg-'] {
-  @apply mx-auto block rounded-lg bg-white p-4;
-}
-
 svg[id^='mermaid-svg-'] .nodeLabel,
 svg[id^='mermaid-svg-'] .edgeLabel,
 svg[id^='mermaid-svg-'] tspan {

yarn.lock

@@ -8152,6 +8152,11 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
+react-zoom-pan-pinch@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.7.0.tgz#7db4d2ec49c316eb20f71c56e9012eeb3ef4b504"
+  integrity sha512-UmReVZ0TxlKzxSbYiAj+LeGRW8s8LraAFTXRAxzMYnNRgGPsxCudwZKVkjvGmjtx7SW/hZamt69NUmGf4xrkXA==
+
 react@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"