Create MermaidViewer

apps/app/src/client/services/renderer/renderer.tsx

@@ -17,6 +17,7 @@ import type { Pluggable } from 'unified';
 
 import { DrawioViewerWithEditButton } from '~/components/ReactMarkdownComponents/DrawioViewerWithEditButton';
 import { Header } from '~/components/ReactMarkdownComponents/Header';
+import { MermaidViewer } from '~/components/ReactMarkdownComponents/MermaidViewer';
 import { TableWithEditButton } from '~/components/ReactMarkdownComponents/TableWithEditButton';
 import { RehypeSanitizeOption } from '~/interfaces/rehype';
 import type { RendererOptions } from '~/interfaces/renderer-options';
@@ -24,6 +25,7 @@ import type { RendererConfig } from '~/interfaces/services/renderer';
 import * as addLineNumberAttribute from '~/services/renderer/rehype-plugins/add-line-number-attribute';
 import * as keywordHighlighter from '~/services/renderer/rehype-plugins/keyword-highlighter';
 import * as relocateToc from '~/services/renderer/rehype-plugins/relocate-toc';
+import * as mermaid from '~/services/renderer/remark-plugins/mermaid';
 import * as plantuml from '~/services/renderer/remark-plugins/plantuml';
 import * as xsvToTable from '~/services/renderer/remark-plugins/xsv-to-table';
 import {
@@ -61,6 +63,7 @@ export const generateViewOptions = (
     xsvToTable.remarkPlugin,
     lsxGrowiPlugin.remarkPlugin,
     refsGrowiPlugin.remarkPlugin,
+    mermaid.remarkPlugin,
   );
   if (config.isEnabledLinebreaks) {
     remarkPlugins.push(breaks);
@@ -105,6 +108,7 @@ export const generateViewOptions = (
     components.gallery = refsGrowiPlugin.Gallery;
     components.drawio = DrawioViewerWithEditButton;
     components.table = TableWithEditButton;
+    components.mermaid = MermaidViewer;
   }
 
   if (config.isEnabledXssPrevention) {
@@ -164,6 +168,7 @@ export const generateSimpleViewOptions = (
     xsvToTable.remarkPlugin,
     lsxGrowiPlugin.remarkPlugin,
     refsGrowiPlugin.remarkPlugin,
+    mermaid.remarkPlugin,
   );
 
   const isEnabledLinebreaks = overrideIsEnabledLinebreaks ?? config.isEnabledLinebreaks;
@@ -204,6 +209,7 @@ export const generateSimpleViewOptions = (
     components.refsimg = refsGrowiPlugin.RefsImgImmutable;
     components.gallery = refsGrowiPlugin.GalleryImmutable;
     components.drawio = drawioPlugin.DrawioViewer;
+    components.mermaid = MermaidViewer;
   }
 
   if (config.isEnabledXssPrevention) {
@@ -238,6 +244,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
     xsvToTable.remarkPlugin,
     lsxGrowiPlugin.remarkPlugin,
     refsGrowiPlugin.remarkPlugin,
+    mermaid.remarkPlugin,
   );
   if (config.isEnabledLinebreaks) {
     remarkPlugins.push(breaks);
@@ -275,6 +282,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
     components.refsimg = refsGrowiPlugin.RefsImgImmutable;
     components.gallery = refsGrowiPlugin.GalleryImmutable;
     components.drawio = drawioPlugin.DrawioViewer;
+    components.mermaid = MermaidViewer;
   }
 
   if (config.isEnabledXssPrevention) {

apps/app/src/components/ReactMarkdownComponents/MermaidViewer.tsx

@@ -0,0 +1,27 @@
+import { useRef, useEffect, ReactNode } from 'react';
+
+import mermaid from 'mermaid';
+
+type MermaidViewerProps = {
+  children: ReactNode,
+}
+
+export const MermaidViewer = (props: MermaidViewerProps): JSX.Element => {
+  const { children } = props;
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (ref.current != null && children != null) {
+      mermaid.init({}, ref.current);
+    }
+  }, [children]);
+
+  return (
+    children
+      ? <div ref={ref} key={children as string}>
+        {children}
+      </div>
+      : <div key={children as string} />
+  );
+};