Added flowchart diagrams (#510)

Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: mrdrogdrog <mr.drogdrog@gmail.com>
Co-authored-by: Erik Michelson <github@erik.michelson.eu>

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

@@ -57,6 +57,7 @@ import { replaceYouTubeLink } from './regex-plugins/replace-youtube-link'
 import { AsciinemaReplacer } from './replace-components/asciinema/asciinema-replacer'
 import { ComponentReplacer, SubNodeConverter } from './replace-components/ComponentReplacer'
 import { CsvReplacer } from './replace-components/csv/csv-replacer'
+import { FlowchartReplacer } from './replace-components/flow/flowchart-replacer'
 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'
@@ -311,6 +312,7 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content, onM
       new ImageReplacer(),
       new TocReplacer(),
       new CsvReplacer(),
+      new FlowchartReplacer(),
       new HighlightedCodeReplacer(),
       new QuoteOptionsReplacer(),
       new KatexReplacer()

src/components/markdown-renderer/replace-components/flow/flowchart-replacer.tsx

@@ -0,0 +1,16 @@
+import { DomElement } from 'domhandler'
+import React from 'react'
+import { ComponentReplacer } from '../ComponentReplacer'
+import { FlowChart } from './flowchart/flowchart'
+
+export class FlowchartReplacer 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'] !== 'flow' || !codeNode.children || !codeNode.children[0]) {
+      return
+    }
+
+    const code = codeNode.children[0].data as string
+
+    return <FlowChart key={`flowchart-${index}`} code={code}/>
+  }
+}

src/components/markdown-renderer/replace-components/flow/flowchart/flowchart.tsx

@@ -0,0 +1,48 @@
+import { parse } from 'flowchart.js'
+import React, { useEffect, useRef, useState } from 'react'
+import { Alert } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+
+export interface FlowChartProps {
+  code: string
+}
+
+export const FlowChart: React.FC<FlowChartProps> = ({ code }) => {
+  const diagramRef = useRef<HTMLDivElement>(null)
+  const [error, setError] = useState(false)
+
+  useTranslation()
+
+  useEffect(() => {
+    if (diagramRef.current === null) {
+      return
+    }
+    const parserOutput = parse(code)
+    try {
+      parserOutput.drawSVG(diagramRef.current, {
+        'line-width': 2,
+        fill: 'none',
+        'font-size': '16px',
+        'font-family': 'Source Code Pro, twemoji, monospace'
+      })
+      setError(false)
+    } catch (error) {
+      setError(true)
+    }
+
+    const currentDiagramRef = diagramRef.current
+
+    return () => {
+      Array.from(currentDiagramRef.children).forEach(value => value.remove())
+    }
+  }, [code])
+
+  if (error) {
+    return (
+      <Alert variant={'danger'}>
+        <Trans i18nKey={'renderer.flowchart.invalidSyntax'}/>
+      </Alert>
+    )
+  }
+  return <div ref={diagramRef} className={'text-center'}/>
+}