feat: Support Mermaid

apps/app/package.json

@@ -119,6 +119,7 @@
     "lucene-query-parser": "^1.2.0",
     "markdown-table": "^1.1.1",
     "md5": "^2.2.1",
+    "mermaid": "^10.1.0",
     "method-override": "^3.0.0",
     "migrate-mongo": "^8.2.3",
     "mkdirp": "^1.0.3",

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

@@ -17,13 +17,15 @@ 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';
 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);
@@ -76,6 +79,7 @@ export const generateViewOptions = (
       drawioPlugin.sanitizeOption,
       lsxGrowiPlugin.sanitizeOption,
       refsGrowiPlugin.sanitizeOption,
+      mermaid.sanitizeOption,
     )]
     : () => {};
 
@@ -105,6 +109,7 @@ export const generateViewOptions = (
     components.gallery = refsGrowiPlugin.Gallery;
     components.drawio = DrawioViewerWithEditButton;
     components.table = TableWithEditButton;
+    components.mermaid = MermaidViewer;
   }
 
   if (config.isEnabledXssPrevention) {
@@ -164,6 +169,7 @@ export const generateSimpleViewOptions = (
     xsvToTable.remarkPlugin,
     lsxGrowiPlugin.remarkPlugin,
     refsGrowiPlugin.remarkPlugin,
+    mermaid.remarkPlugin,
   );
 
   const isEnabledLinebreaks = overrideIsEnabledLinebreaks ?? config.isEnabledLinebreaks;
@@ -183,6 +189,7 @@ export const generateSimpleViewOptions = (
       drawioPlugin.sanitizeOption,
       lsxGrowiPlugin.sanitizeOption,
       refsGrowiPlugin.sanitizeOption,
+      mermaid.sanitizeOption,
     )]
     : () => {};
 
@@ -204,6 +211,7 @@ export const generateSimpleViewOptions = (
     components.refsimg = refsGrowiPlugin.RefsImgImmutable;
     components.gallery = refsGrowiPlugin.GalleryImmutable;
     components.drawio = drawioPlugin.DrawioViewer;
+    components.mermaid = MermaidViewer;
   }
 
   if (config.isEnabledXssPrevention) {
@@ -238,6 +246,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
     xsvToTable.remarkPlugin,
     lsxGrowiPlugin.remarkPlugin,
     refsGrowiPlugin.remarkPlugin,
+    mermaid.remarkPlugin,
   );
   if (config.isEnabledLinebreaks) {
     remarkPlugins.push(breaks);
@@ -254,6 +263,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
       refsGrowiPlugin.sanitizeOption,
       drawioPlugin.sanitizeOption,
       addLineNumberAttribute.sanitizeOption,
+      mermaid.sanitizeOption,
     )]
     : () => {};
 
@@ -275,6 +285,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,28 @@
+import React, { useRef, useEffect, ReactNode } from 'react';
+
+import mermaid from 'mermaid';
+
+type MermaidViewerProps = {
+  children: ReactNode,
+}
+
+export const MermaidViewer = React.memo((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} />
+  );
+});
+MermaidViewer.displayName = 'MermaidViewer';

apps/app/src/services/renderer/remark-plugins/mermaid.ts

@@ -0,0 +1,24 @@
+import type { Schema as SanitizeOption } from 'hast-util-sanitize';
+import { Plugin } from 'unified';
+import { Node } from 'unist';
+import { visit } from 'unist-util-visit';
+
+function rewriteNode(node: Node) {
+  // replace node
+  const data = node.data ?? (node.data = {});
+  data.hName = 'mermaid';
+}
+
+export const remarkPlugin: Plugin = function() {
+  return (tree) => {
+    visit(tree, (node) => {
+      if (node.type === 'code' && node.lang === 'mermaid') {
+        rewriteNode(node);
+      }
+    });
+  };
+};
+
+export const sanitizeOption: SanitizeOption = {
+  tagNames: ['mermaid'],
+};