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/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'}/>
+}