added mermaid diagram (#525)

added mermaid diagram

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Erik Michelson <github@erik.michelson.eu>

src/components/markdown-renderer/markdown-renderer.tsx

@@ -62,6 +62,7 @@ import { GistReplacer } from './replace-components/gist/gist-replacer'
 import { HighlightedCodeReplacer } from './replace-components/highlighted-fence/highlighted-fence-replacer'
 import { ImageReplacer } from './replace-components/image/image-replacer'
 import { KatexReplacer } from './replace-components/katex/katex-replacer'
+import { MermaidReplacer } from './replace-components/mermaid/mermaid-replacer'
 import { PdfReplacer } from './replace-components/pdf/pdf-replacer'
 import { PossibleWiderReplacer } from './replace-components/possible-wider/possible-wider-replacer'
 import { QuoteOptionsReplacer } from './replace-components/quote-options/quote-options-replacer'
@@ -349,6 +350,7 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
       new ImageReplacer(),
       new CsvReplacer(),
       new FlowchartReplacer(),
+      new MermaidReplacer(),
       new HighlightedCodeReplacer(),
       new QuoteOptionsReplacer(),
       new KatexReplacer(),

src/components/markdown-renderer/replace-components/mermaid/mermaid-chart.tsx

@@ -0,0 +1,53 @@
+import mermaid from 'mermaid'
+import React, { useEffect, useRef, useState } from 'react'
+import { Alert } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { v4 as uuid } from 'uuid'
+
+export interface MermaidChartProps {
+  code: string
+}
+
+interface MermaidParseError {
+  str: string
+}
+
+let mermaidInitialized = false
+
+export const MermaidChart: React.FC<MermaidChartProps> = ({ code }) => {
+  const [diagramId] = useState(() => 'mermaid_' + uuid().replaceAll('-', '_'))
+  const diagramContainer = useRef<HTMLDivElement>(null)
+  const [error, setError] = useState<string>()
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    if (!mermaidInitialized) {
+      mermaid.initialize({ startOnLoad: false })
+      mermaidInitialized = true
+    }
+  }, [])
+
+  useEffect(() => {
+    try {
+      if (!diagramContainer.current) {
+        return
+      }
+      mermaid.parse(code)
+      delete diagramContainer.current.dataset.processed
+      diagramContainer.current.textContent = code
+      mermaid.init(`#${diagramId}`)
+    } catch (error) {
+      const message = (error as MermaidParseError).str
+      if (message) {
+        setError(message)
+      } else {
+        setError(t('renderer.mermaid.unknownError'))
+        console.error(error)
+      }
+    }
+  }, [code, diagramId, t])
+
+  return error
+    ? <Alert variant={'warning'}>{error}</Alert>
+    : <div className={'text-center mermaid'} ref={diagramContainer} id={diagramId}/>
+}

src/components/markdown-renderer/replace-components/mermaid/mermaid-replacer.tsx

@@ -0,0 +1,16 @@
+import { DomElement } from 'domhandler'
+import React from 'react'
+import { ComponentReplacer } from '../ComponentReplacer'
+import { MermaidChart } from './mermaid-chart'
+
+export class MermaidReplacer implements ComponentReplacer {
+  getReplacement (codeNode: DomElement, index: number): React.ReactElement | undefined {
+    if (codeNode.name !== 'code' || !codeNode.attribs || !codeNode.attribs['data-highlight-language'] || codeNode.attribs['data-highlight-language'] !== 'mermaid' || !codeNode.children || !codeNode.children[0]) {
+      return
+    }
+
+    const code = codeNode.children[0].data as string
+
+    return <MermaidChart key={`flowchart-${index}`} code={code}/>
+  }
+}