From 67bed54f327249d42fa25e3fad4217944e4bc3d5 Mon Sep 17 00:00:00 2001
From: charli117 <luowei@cvte.com>
Date: Thu, 14 Sep 2023 14:09:23 +0800
Subject: [PATCH] Mermaid front end rendering (#1166)

Co-authored-by: luowei <glpat-EjySCyNjWiLqAED-YmwM>
---
 api/constants/model_template.py               |  76 +++
 .../console/universal_chat/chat.py            |   1 -
 web/app/(commonLayout)/apps/NewAppDialog.tsx  |   2 +-
 web/app/components/app/chat/mermaid/index.tsx | 100 ++++
 web/app/components/app/chat/svg/index.tsx     |  23 +
 .../components/app/chat/svg/style.module.css  |  11 +
 web/app/components/base/markdown.tsx          |  56 +-
 .../develop/secret-key/assets/svg.svg         |   1 +
 .../develop/secret-key/assets/svged.svg       |   1 +
 web/i18n/lang/app-api.en.ts                   | 147 ++---
 web/i18n/lang/app-api.zh.ts                   | 147 ++---
 web/package.json                              |   1 +
 web/yarn.lock                                 | 564 ++++++++++++++++--
 13 files changed, 919 insertions(+), 211 deletions(-)
 create mode 100644 web/app/components/app/chat/mermaid/index.tsx
 create mode 100644 web/app/components/app/chat/svg/index.tsx
 create mode 100644 web/app/components/app/chat/svg/style.module.css
 create mode 100644 web/app/components/develop/secret-key/assets/svg.svg
 create mode 100644 web/app/components/develop/secret-key/assets/svged.svg

diff --git a/api/constants/model_template.py b/api/constants/model_template.py
index 95574b83f..46dfd2dea 100644
--- a/api/constants/model_template.py
+++ b/api/constants/model_template.py
@@ -210,6 +210,44 @@ demo_model_templates = {
                 }),
                 user_input_form=None
             )
+        },
+        {
+            'name': 'AI Graph Generator',
+            'icon': '',
+            'icon_background': '',
+            'description': 'According to the user\'s stated requirements, mermaid code blocks are generated by AI, and the code blocks are rendered into corresponding SVG vector drawings.',
+            'mode': 'chat',
+            'model_config': AppModelConfig(
+                provider='openai',
+                model_id='gpt-3.5-turbo',
+                configs={
+                    'introduction': 'Warm reminder: Click 👍 for correct reply and 👎 for inaccurate reply, which will help me further improve myself and greatly improve the accuracy of reply to similar questions. Hello, please tell me about your image generation needs: ',
+                    'prompt_template': "You will play as a mermaid graphics generator, generating code blocks that conform to mermaid format requirements based on user scenario descriptions. \n\n[Note]\n\n- Output mermaid code blocks only, no other explanation. \nLet\'s think step by step.\n",
+                    'prompt_variables': [],
+                    'completion_params': {
+                        'max_token': 300,
+                        'temperature': 0.8,
+                        'top_p': 0.9,
+                        'presence_penalty': 0.1,
+                        'frequency_penalty': 0.1,
+                    }
+                },
+                opening_statement='Warm reminder: Click 👍 for correct reply and 👎 for inaccurate reply, which will help me further improve myself and greatly improve the accuracy of reply to similar questions. Hello, please tell me about your image generation needs: ',
+                suggested_questions=None,
+                pre_prompt="You will play as a mermaid graphics generator, generating code blocks that conform to mermaid format requirements based on user scenario descriptions. \n\n[Note]\n\n- Output mermaid code blocks only, no other explanation. \nLet\'s think step by step.\n",
+                model=json.dumps({
+                    "provider": "openai",
+                    "name": "gpt-3.5-turbo",
+                    "completion_params": {
+                        "max_tokens": 300,
+                        "temperature": 0.8,
+                        "top_p": 0.9,
+                        "presence_penalty": 0.1,
+                        "frequency_penalty": 0.1
+                    }
+                }),
+                user_input_form=None
+            )
         }
     ],
 
@@ -328,6 +366,44 @@ demo_model_templates = {
                 }),
                 user_input_form=None
             )
+        },
+        {
+            'name': 'AI 图形生成器',
+            'icon': '',
+            'icon_background': '',
+            'description': '根据用户陈述需求利用AI生成mermaid代码块，将代码块渲染成对应SVG矢量图。',
+            'mode': 'chat',
+            'model_config': AppModelConfig(
+                provider='openai',
+                model_id='gpt-3.5-turbo',
+                configs={
+                    'introduction': '    温馨提醒：对正确的回复点击 👍赞同、不准确的回复点击 👎反对，将有助我进一步自我完善，大幅提高同类型问题回复的准确性。\n你好，请告诉我您的图像生成需求：',
+                    'prompt_template': "你将扮演mermaid图形生成器，根据用户场景描述生成符合mermaid格式要求的代码块。\n\n[注意事项]\n\n- 仅输出mermaid代码块，不做其他解释。\nLet\'s think step by step.\n",
+                    'prompt_variables': [],
+                    'completion_params': {
+                        'max_token': 1024,
+                        'temperature': 0.8,
+                        'top_p': 0.9,
+                        'presence_penalty': 0.1,
+                        'frequency_penalty': 0.1,
+                    }
+                },
+                opening_statement='    温馨提醒：对正确的回复点击 👍赞同、不准确的回复点击 👎反对，将有助我进一步自我完善，大幅提高同类型问题回复的准确性。\n你好，请告诉我您的图像生成需求：',
+                suggested_questions=None,
+                pre_prompt="你将扮演mermaid图形生成器，根据用户场景描述生成符合mermaid格式要求的代码块。\n\n[注意事项]\n\n- 仅输出mermaid代码块，不做其他解释。\nLet\'s think step by step.\n",
+                model=json.dumps({
+                    "provider": "openai",
+                    "name": "gpt-3.5-turbo",
+                    "completion_params": {
+                        "max_tokens": 1024,
+                        "temperature": 0.8,
+                        "top_p": 0.9,
+                        "presence_penalty": 0.1,
+                        "frequency_penalty": 0.1
+                    }
+                }),
+                user_input_form=None
+            )
         }
     ],
 }
diff --git a/api/controllers/console/universal_chat/chat.py b/api/controllers/console/universal_chat/chat.py
index 0c7401a70..61ba50325 100644
--- a/api/controllers/console/universal_chat/chat.py
+++ b/api/controllers/console/universal_chat/chat.py
@@ -33,7 +33,6 @@ class UniversalChatApi(UniversalChatResource):
         args = parser.parse_args()
 
         app_model_config = app_model.app_model_config
-        app_model_config
 
         # update app model config
         args['model_config'] = app_model_config.to_dict()
diff --git a/web/app/(commonLayout)/apps/NewAppDialog.tsx b/web/app/(commonLayout)/apps/NewAppDialog.tsx
index 1ce38f583..9dacf6d18 100644
--- a/web/app/(commonLayout)/apps/NewAppDialog.tsx
+++ b/web/app/(commonLayout)/apps/NewAppDialog.tsx
@@ -139,7 +139,7 @@ const NewAppDialog = ({ show, onSuccess, onClose }: NewAppDialogProps) => {
         </div>
         {isWithTemplate
           ? (
-            <ul className='grid grid-cols-2 gap-4'>
+            <ul className='grid grid-cols-3 gap-4'>
               {templates?.data?.map((template, index) => (
                 <li
                   key={index}
diff --git a/web/app/components/app/chat/mermaid/index.tsx b/web/app/components/app/chat/mermaid/index.tsx
new file mode 100644
index 000000000..af0b68e65
--- /dev/null
+++ b/web/app/components/app/chat/mermaid/index.tsx
@@ -0,0 +1,100 @@
+import React, { useEffect, useRef, useState } from 'react'
+import mermaid from 'mermaid'
+import { t } from 'i18next'
+import CryptoJS from 'crypto-js'
+
+let mermaidAPI: any
+mermaidAPI = null
+
+if (typeof window !== 'undefined') {
+  mermaid.initialize({
+    startOnLoad: true,
+    theme: 'default',
+    flowchart: {
+      htmlLabels: true,
+      useMaxWidth: true,
+    },
+  })
+  mermaidAPI = mermaid.mermaidAPI
+}
+
+const style = {
+  minWidth: '480px',
+  height: 'auto',
+  overflow: 'auto',
+}
+
+// eslint-disable-next-line react/display-name
+const Flowchart = React.forwardRef((props: {
+  PrimitiveCode: string
+}, ref) => {
+  const [svgCode, setSvgCode] = useState(null)
+  const chartId = useRef(`flowchart_${CryptoJS.MD5(props.PrimitiveCode).toString()}`)
+  const [isRender, setIsRender] = useState(true)
+
+  const renderFlowchart = async (PrimitiveCode: string) => {
+    try {
+      const cachedSvg: any = localStorage.getItem(chartId.current)
+      if (cachedSvg) {
+        setSvgCode(cachedSvg)
+        return
+      }
+
+      if (typeof window !== 'undefined' && mermaidAPI) {
+        const svgGraph = await mermaidAPI.render(chartId.current, PrimitiveCode)
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        const base64Svg: any = await svgToBase64(svgGraph.svg)
+        localStorage.setItem(chartId.current, base64Svg)
+        setSvgCode(base64Svg)
+      }
+    }
+    catch (error) {
+      localStorage.clear()
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      console.error(error.toString())
+    }
+  }
+
+  const svgToBase64 = (svgGraph: string) => {
+    const svgBytes = new TextEncoder().encode(svgGraph)
+    const blob = new Blob([svgBytes], { type: 'image/svg+xml;charset=utf-8' })
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onloadend = () => resolve(reader.result)
+      reader.onerror = reject
+      reader.readAsDataURL(blob)
+    })
+  }
+
+  const handleReRender = () => {
+    setIsRender(false)
+    setSvgCode(null)
+    localStorage.removeItem(chartId.current)
+    setTimeout(() => {
+      setIsRender(true)
+      renderFlowchart(props.PrimitiveCode)
+    }, 100)
+  }
+
+  useEffect(() => {
+    setIsRender(false)
+    setTimeout(() => {
+      setIsRender(true)
+      renderFlowchart(props.PrimitiveCode)
+    }, 100)
+  }, [props.PrimitiveCode])
+
+  return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    <div ref={ref}>
+      {
+        isRender && <div id={chartId.current} className="mermaid" style={style}>{svgCode && (<img src={svgCode} style={{ width: '100%', height: 'auto' }} alt="Mermaid chart" />)}</div>
+      }
+      <button onClick={handleReRender}>{t('appApi.merMaind.rerender')}</button>
+    </div>
+  )
+})
+
+export default Flowchart
diff --git a/web/app/components/app/chat/svg/index.tsx b/web/app/components/app/chat/svg/index.tsx
new file mode 100644
index 000000000..bf7cb08d4
--- /dev/null
+++ b/web/app/components/app/chat/svg/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import s from './style.module.css'
+
+type ISVGBtnProps = {
+  isSVG: boolean
+  setIsSVG: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+const SVGBtn = ({
+  isSVG,
+  setIsSVG,
+}: ISVGBtnProps) => {
+  return (
+    <div
+      className={'box-border p-0.5 flex items-center justify-center rounded-md bg-white cursor-pointer'}
+      onClick={() => { setIsSVG(prevIsSVG => !prevIsSVG) }}
+    >
+      <div className={`w-6 h-6 rounded-md hover:bg-gray-50 ${s.svgIcon} ${isSVG ? s.svgIconed : ''}`}></div>
+    </div>
+  )
+}
+
+export default SVGBtn
diff --git a/web/app/components/app/chat/svg/style.module.css b/web/app/components/app/chat/svg/style.module.css
new file mode 100644
index 000000000..9258fe8ed
--- /dev/null
+++ b/web/app/components/app/chat/svg/style.module.css
@@ -0,0 +1,11 @@
+.svgIcon {
+  background-image: url(~@/app/components/develop/secret-key/assets/svg.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.svgIconed {
+  background-image: url(~@/app/components/develop/secret-key/assets/svged.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+}
diff --git a/web/app/components/base/markdown.tsx b/web/app/components/base/markdown.tsx
index e112739ef..b3cc78f37 100644
--- a/web/app/components/base/markdown.tsx
+++ b/web/app/components/base/markdown.tsx
@@ -8,18 +8,28 @@ import SyntaxHighlighter from 'react-syntax-highlighter'
 import { atelierHeathLight } from 'react-syntax-highlighter/dist/esm/styles/hljs'
 import type { RefObject } from 'react'
 import { useEffect, useRef, useState } from 'react'
+import cn from 'classnames'
 import CopyBtn from '@/app/components/app/chat/copy-btn'
+import SVGBtn from '@/app/components/app/chat/svg'
+import Flowchart from '@/app/components/app/chat/mermaid'
+import s from '@/app/components/app/chat/style.module.css'
 
 // Available language https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_HLJS.MD
 const capitalizationLanguageNameMap: Record<string, string> = {
   sql: 'SQL',
   javascript: 'JavaScript',
+  java: 'Java',
   typescript: 'TypeScript',
   vbscript: 'VBScript',
   css: 'CSS',
   html: 'HTML',
   xml: 'XML',
   php: 'PHP',
+  python: 'Python',
+  yaml: 'Yaml',
+  mermaid: 'Mermaid',
+  markdown: 'MarkDown',
+  makefile: 'MakeFile',
 }
 const getCorrectCapitalizationLanguageName = (language: string) => {
   if (!language)
@@ -73,6 +83,7 @@ const useLazyLoad = (ref: RefObject<Element>): boolean => {
 
 export function Markdown(props: { content: string }) {
   const [isCopied, setIsCopied] = useState(false)
+  const [isSVG, setIsSVG] = useState(false)
   return (
     <div className="markdown-body">
       <ReactMarkdown
@@ -95,24 +106,35 @@ export function Markdown(props: { content: string }) {
                     }}
                   >
                     <div className='text-[13px] text-gray-500 font-normal'>{languageShowName}</div>
-                    <CopyBtn
-                      value={String(children).replace(/\n$/, '')}
-                      isPlain
-                    />
+                    <div style={{ display: 'flex' }}>
+                      {language === 'mermaid'
+                        && <SVGBtn
+                          isSVG={isSVG}
+                          setIsSVG={setIsSVG}
+                        />
+                      }
+                      <CopyBtn
+                        className={cn(s.copyBtn, 'mr-1')}
+                        value={String(children).replace(/\n$/, '')}
+                        isPlain
+                      />
+                    </div>
                   </div>
-                  <SyntaxHighlighter
-                    {...props}
-                    style={atelierHeathLight}
-                    customStyle={{
-                      paddingLeft: 12,
-                      backgroundColor: '#fff',
-                    }}
-                    language={match[1]}
-                    showLineNumbers
-                    PreTag="div"
-                  >
-                    {String(children).replace(/\n$/, '')}
-                  </SyntaxHighlighter>
+                  { (language === 'mermaid' && isSVG)
+                    ? (<Flowchart PrimitiveCode={String(children).replace(/\n$/, '')} />)
+                    : (<SyntaxHighlighter
+                      {...props}
+                      style={atelierHeathLight}
+                      customStyle={{
+                        paddingLeft: 12,
+                        backgroundColor: '#fff',
+                      }}
+                      language={match[1]}
+                      showLineNumbers
+                      PreTag="div"
+                    >
+                      {String(children).replace(/\n$/, '')}
+                    </SyntaxHighlighter>)}
                 </div>
               )
               : (
diff --git a/web/app/components/develop/secret-key/assets/svg.svg b/web/app/components/develop/secret-key/assets/svg.svg
new file mode 100644
index 000000000..bf401e060
--- /dev/null
+++ b/web/app/components/develop/secret-key/assets/svg.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1694177685288" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4415" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M192 384h640a42.666667 42.666667 0 0 1 42.666667 42.666667v362.666666a42.666667 42.666667 0 0 1-42.666667 42.666667H192v106.666667a21.333333 21.333333 0 0 0 21.333333 21.333333h725.333334a21.333333 21.333333 0 0 0 21.333333-21.333333V308.821333L949.909333 298.666667h-126.528A98.048 98.048 0 0 1 725.333333 200.618667V72.661333L716.714667 64H213.333333a21.333333 21.333333 0 0 0-21.333333 21.333333v298.666667zM128 832H42.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V426.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333V85.333333a85.333333 85.333333 0 0 1 85.333333-85.333333h530.026667L1024 282.453333V938.666667a85.333333 85.333333 0 0 1-85.333333 85.333333H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333333v-106.666667z m61.376-364.885333c-27.434667 0-49.898667 6.528-67.712 19.968-19.221333 13.824-28.501333 33.024-28.501333 57.216s9.621333 42.624 29.226666 55.296c7.466667 4.608 27.093333 12.288 58.432 23.04 28.138667 9.216 44.522667 15.36 49.514667 18.048 15.68 8.448 23.872 19.968 23.872 34.56 0 11.52-5.696 20.352-16.384 27.264-10.688 6.528-25.664 9.984-44.181333 9.984-21.013333 0-36.352-4.224-46.314667-11.904-11.050667-8.832-17.813333-23.808-20.672-44.544H85.333333c1.792 34.944 13.546667 60.288 34.922667 76.416 17.450667 13.056 42.026667 19.584 73.386667 19.584 32.426667 0 57.706667-7.296 75.52-21.12 17.813333-14.208 26.730667-33.792 26.730666-58.368 0-25.344-11.050667-44.928-33.130666-59.136-9.984-6.144-32.064-15.36-66.624-26.88-23.509333-8.064-38.122667-13.824-43.477334-16.896-12.096-6.912-17.813333-16.512-17.813333-28.032 0-13.056 4.992-22.656 15.68-28.416 8.554667-4.992 20.672-7.296 36.693333-7.296 18.538667 0 32.789333 3.456 42.048 11.136 9.258667 7.296 16.021333 19.584 19.584 36.48h41.344c-2.496-29.952-12.821333-52.224-30.656-66.432-16.725333-13.44-40.256-19.968-70.186666-19.968z m118.976 5.376L398.848 746.666667h50.24l90.496-274.176h-45.226667l-69.845333 223.488h-1.066667l-69.845333-223.488h-45.226667z m368.405333-5.376c-37.76 0-67.690667 13.824-89.792 42.24-21.013333 26.496-31.36 60.288-31.36 101.376 0 40.704 10.346667 74.112 31.36 99.84 22.442667 27.648 53.802667 41.472 94.421334 41.472 22.805333 0 43.093333-3.072 61.632-9.216A143.829333 143.829333 0 0 0 789.333333 716.714667V600.746667h-109.013333v38.4h67.328v56.448c-8.533333 5.376-17.450667 9.6-27.434667 12.672a123.285333 123.285333 0 0 1-34.197333 4.608c-30.997333 0-53.802667-9.216-68.416-27.648-13.525333-17.28-20.309333-42.24-20.309333-74.496 0-33.792 7.488-59.52 22.826666-77.952 13.866667-17.664 32.768-26.112 56.64-26.112 19.221333 0 34.901333 4.224 46.656 13.056 11.413333 8.832 19.242667 21.888 22.826667 39.552h42.026667c-4.629333-30.72-16.042667-53.376-34.197334-68.736-18.88-15.744-44.544-23.424-77.312-23.424z" fill="#8a8a8a" p-id="4416"></path></svg>
\ No newline at end of file
diff --git a/web/app/components/develop/secret-key/assets/svged.svg b/web/app/components/develop/secret-key/assets/svged.svg
new file mode 100644
index 000000000..bca6210b9
--- /dev/null
+++ b/web/app/components/develop/secret-key/assets/svged.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1694177378730" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4206" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M192 384h640a42.666667 42.666667 0 0 1 42.666667 42.666667v362.666666a42.666667 42.666667 0 0 1-42.666667 42.666667H192v106.666667a21.333333 21.333333 0 0 0 21.333333 21.333333h725.333334a21.333333 21.333333 0 0 0 21.333333-21.333333V308.821333L949.909333 298.666667h-126.528A98.048 98.048 0 0 1 725.333333 200.618667V72.661333L716.714667 64H213.333333a21.333333 21.333333 0 0 0-21.333333 21.333333v298.666667zM128 832H42.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V426.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333V85.333333a85.333333 85.333333 0 0 1 85.333333-85.333333h530.026667L1024 282.453333V938.666667a85.333333 85.333333 0 0 1-85.333333 85.333333H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333333v-106.666667z m61.376-364.885333c-27.434667 0-49.898667 6.528-67.712 19.968-19.221333 13.824-28.501333 33.024-28.501333 57.216s9.621333 42.624 29.226666 55.296c7.466667 4.608 27.093333 12.288 58.432 23.04 28.138667 9.216 44.522667 15.36 49.514667 18.048 15.68 8.448 23.872 19.968 23.872 34.56 0 11.52-5.696 20.352-16.384 27.264-10.688 6.528-25.664 9.984-44.181333 9.984-21.013333 0-36.352-4.224-46.314667-11.904-11.050667-8.832-17.813333-23.808-20.672-44.544H85.333333c1.792 34.944 13.546667 60.288 34.922667 76.416 17.450667 13.056 42.026667 19.584 73.386667 19.584 32.426667 0 57.706667-7.296 75.52-21.12 17.813333-14.208 26.730667-33.792 26.730666-58.368 0-25.344-11.050667-44.928-33.130666-59.136-9.984-6.144-32.064-15.36-66.624-26.88-23.509333-8.064-38.122667-13.824-43.477334-16.896-12.096-6.912-17.813333-16.512-17.813333-28.032 0-13.056 4.992-22.656 15.68-28.416 8.554667-4.992 20.672-7.296 36.693333-7.296 18.538667 0 32.789333 3.456 42.048 11.136 9.258667 7.296 16.021333 19.584 19.584 36.48h41.344c-2.496-29.952-12.821333-52.224-30.656-66.432-16.725333-13.44-40.256-19.968-70.186666-19.968z m118.976 5.376L398.848 746.666667h50.24l90.496-274.176h-45.226667l-69.845333 223.488h-1.066667l-69.845333-223.488h-45.226667z m368.405333-5.376c-37.76 0-67.690667 13.824-89.792 42.24-21.013333 26.496-31.36 60.288-31.36 101.376 0 40.704 10.346667 74.112 31.36 99.84 22.442667 27.648 53.802667 41.472 94.421334 41.472 22.805333 0 43.093333-3.072 61.632-9.216A143.829333 143.829333 0 0 0 789.333333 716.714667V600.746667h-109.013333v38.4h67.328v56.448c-8.533333 5.376-17.450667 9.6-27.434667 12.672a123.285333 123.285333 0 0 1-34.197333 4.608c-30.997333 0-53.802667-9.216-68.416-27.648-13.525333-17.28-20.309333-42.24-20.309333-74.496 0-33.792 7.488-59.52 22.826666-77.952 13.866667-17.664 32.768-26.112 56.64-26.112 19.221333 0 34.901333 4.224 46.656 13.056 11.413333 8.832 19.242667 21.888 22.826667 39.552h42.026667c-4.629333-30.72-16.042667-53.376-34.197334-68.736-18.88-15.744-44.544-23.424-77.312-23.424z" fill="#1A8EF7" p-id="4207"></path></svg>
\ No newline at end of file
diff --git a/web/i18n/lang/app-api.en.ts b/web/i18n/lang/app-api.en.ts
index cf188e010..2ea907b2b 100644
--- a/web/i18n/lang/app-api.en.ts
+++ b/web/i18n/lang/app-api.en.ts
@@ -1,76 +1,79 @@
 const translation = {
-    apiServer: "API Server",
-    apiKey: "API Key",
-    status: "Status",
-    disabled: "Disabled",
-    ok: "In Service",
-    copy: "Copy",
-    copied: "Copied",
-    never: "Never",
-    apiKeyModal: {
-        apiSecretKey: "API Secret key",
-        apiSecretKeyTips: "To prevent API abuse, protect your API Key. Avoid using it as plain text in front-end code. :)",
-        createNewSecretKey: "Create new Secret key",
-        secretKey: "Secret Key",
-        created: "CREATED",
-        lastUsed: "LAST USED",
-        generateTips: "Keep this key in a secure and accessible place."
-    },
-    actionMsg: {
-        deleteConfirmTitle: "Delete this secret key?",
-        deleteConfirmTips: "This action cannot be undone.",
-        ok: "OK"
-    },
-    completionMode: {
-        title: "Completion App API",
-        info: "For high-quality text generation, such as articles, summaries, and translations, use the completion-messages API with user input. Text generation relies on the model parameters and prompt templates set in Dify Prompt Engineering.",
-        createCompletionApi: "Create Completion Message",
-        createCompletionApiTip: "Create a Completion Message to support the question-and-answer mode.",
-        inputsTips: "(Optional) Provide user input fields as key-value pairs, corresponding to variables in Prompt Eng. Key is the variable name, Value is the parameter value. If the field type is Select, the submitted Value must be one of the preset choices.",
-        queryTips: "User input text content.",
-        blocking: "Blocking type, waiting for execution to complete and returning results. (Requests may be interrupted if the process is long)",
-        streaming: "streaming returns. Implementation of streaming return based on SSE (Server-Sent Events).",
-        messageFeedbackApi: "Message feedback (like)",
-        messageFeedbackApiTip: "Rate received messages on behalf of end-users with likes or dislikes. This data is visible in the Logs & Annotations page and used for future model fine-tuning.",
-        messageIDTip: "Message ID",
-        ratingTip: "like or dislike, null is undo",
-        parametersApi: "Obtain application parameter information",
-        parametersApiTip: "Retrieve configured Input parameters, including variable names, field names, types, and default values. Typically used for displaying these fields in a form or filling in default values after the client loads."
-    },
-    chatMode: {
-        title: "Chat App API",
-        info: "For versatile conversational apps using a Q&A format, call the chat-messages API to initiate dialogue. Maintain ongoing conversations by passing the returned conversation_id. Response parameters and templates depend on Dify Prompt Eng. settings.",
-        createChatApi: "Create chat message",
-        createChatApiTip: "Create a new conversation message or continue an existing dialogue.",
-        inputsTips: "(Optional) Provide user input fields as key-value pairs, corresponding to variables in Prompt Eng. Key is the variable name, Value is the parameter value. If the field type is Select, the submitted Value must be one of the preset choices.",
-        queryTips: "User input/question content",
-        blocking: "Blocking type, waiting for execution to complete and returning results. (Requests may be interrupted if the process is long)",
-        streaming: "streaming returns. Implementation of streaming return based on SSE (Server-Sent Events).",
-        conversationIdTip: "(Optional) Conversation ID: leave empty for first-time conversation; pass conversation_id from context to continue dialogue.",
-        messageFeedbackApi: "Message terminal user feedback, like",
-        messageFeedbackApiTip: "Rate received messages on behalf of end-users with likes or dislikes. This data is visible in the Logs & Annotations page and used for future model fine-tuning.",
-        messageIDTip: "Message ID",
-        ratingTip: "like or dislike, null is undo",
-        chatMsgHistoryApi: "Get the chat history message",
-        chatMsgHistoryApiTip: "The first page returns the latest `limit` bar, which is in reverse order.",
-        chatMsgHistoryConversationIdTip: "Conversation ID",
-        chatMsgHistoryFirstId: "ID of the first chat record on the current page. The default is none.",
-        chatMsgHistoryLimit: "How many chats are returned in one request",
-        conversationsListApi: "Get conversation list",
-        conversationsListApiTip: "Gets the session list of the current user. By default, the last 20 sessions are returned.",
-        conversationsListFirstIdTip: "The ID of the last record on the current page, default none.",
-        conversationsListLimitTip: "How many chats are returned in one request",
-        conversationRenamingApi: "Conversation renaming",
-        conversationRenamingApiTip: "Rename conversations; the name is displayed in multi-session client interfaces.",
-        conversationRenamingNameTip: "New name",
-        parametersApi: "Obtain application parameter information",
-        parametersApiTip: "Retrieve configured Input parameters, including variable names, field names, types, and default values. Typically used for displaying these fields in a form or filling in default values after the client loads."
-    },
-    develop: {
-        requestBody: "Request Body",
-        pathParams: "Path Params",
-        query: "Query"
-    }
+  apiServer: 'API Server',
+  apiKey: 'API Key',
+  status: 'Status',
+  disabled: 'Disabled',
+  ok: 'In Service',
+  copy: 'Copy',
+  copied: 'Copied',
+  merMaind: {
+    rerender: 'Redo Rerender',
+  },
+  never: 'Never',
+  apiKeyModal: {
+    apiSecretKey: 'API Secret key',
+    apiSecretKeyTips: 'To prevent API abuse, protect your API Key. Avoid using it as plain text in front-end code. :)',
+    createNewSecretKey: 'Create new Secret key',
+    secretKey: 'Secret Key',
+    created: 'CREATED',
+    lastUsed: 'LAST USED',
+    generateTips: 'Keep this key in a secure and accessible place.',
+  },
+  actionMsg: {
+    deleteConfirmTitle: 'Delete this secret key?',
+    deleteConfirmTips: 'This action cannot be undone.',
+    ok: 'OK',
+  },
+  completionMode: {
+    title: 'Completion App API',
+    info: 'For high-quality text generation, such as articles, summaries, and translations, use the completion-messages API with user input. Text generation relies on the model parameters and prompt templates set in Dify Prompt Engineering.',
+    createCompletionApi: 'Create Completion Message',
+    createCompletionApiTip: 'Create a Completion Message to support the question-and-answer mode.',
+    inputsTips: '(Optional) Provide user input fields as key-value pairs, corresponding to variables in Prompt Eng. Key is the variable name, Value is the parameter value. If the field type is Select, the submitted Value must be one of the preset choices.',
+    queryTips: 'User input text content.',
+    blocking: 'Blocking type, waiting for execution to complete and returning results. (Requests may be interrupted if the process is long)',
+    streaming: 'streaming returns. Implementation of streaming return based on SSE (Server-Sent Events).',
+    messageFeedbackApi: 'Message feedback (like)',
+    messageFeedbackApiTip: 'Rate received messages on behalf of end-users with likes or dislikes. This data is visible in the Logs & Annotations page and used for future model fine-tuning.',
+    messageIDTip: 'Message ID',
+    ratingTip: 'like or dislike, null is undo',
+    parametersApi: 'Obtain application parameter information',
+    parametersApiTip: 'Retrieve configured Input parameters, including variable names, field names, types, and default values. Typically used for displaying these fields in a form or filling in default values after the client loads.',
+  },
+  chatMode: {
+    title: 'Chat App API',
+    info: 'For versatile conversational apps using a Q&A format, call the chat-messages API to initiate dialogue. Maintain ongoing conversations by passing the returned conversation_id. Response parameters and templates depend on Dify Prompt Eng. settings.',
+    createChatApi: 'Create chat message',
+    createChatApiTip: 'Create a new conversation message or continue an existing dialogue.',
+    inputsTips: '(Optional) Provide user input fields as key-value pairs, corresponding to variables in Prompt Eng. Key is the variable name, Value is the parameter value. If the field type is Select, the submitted Value must be one of the preset choices.',
+    queryTips: 'User input/question content',
+    blocking: 'Blocking type, waiting for execution to complete and returning results. (Requests may be interrupted if the process is long)',
+    streaming: 'streaming returns. Implementation of streaming return based on SSE (Server-Sent Events).',
+    conversationIdTip: '(Optional) Conversation ID: leave empty for first-time conversation; pass conversation_id from context to continue dialogue.',
+    messageFeedbackApi: 'Message terminal user feedback, like',
+    messageFeedbackApiTip: 'Rate received messages on behalf of end-users with likes or dislikes. This data is visible in the Logs & Annotations page and used for future model fine-tuning.',
+    messageIDTip: 'Message ID',
+    ratingTip: 'like or dislike, null is undo',
+    chatMsgHistoryApi: 'Get the chat history message',
+    chatMsgHistoryApiTip: 'The first page returns the latest `limit` bar, which is in reverse order.',
+    chatMsgHistoryConversationIdTip: 'Conversation ID',
+    chatMsgHistoryFirstId: 'ID of the first chat record on the current page. The default is none.',
+    chatMsgHistoryLimit: 'How many chats are returned in one request',
+    conversationsListApi: 'Get conversation list',
+    conversationsListApiTip: 'Gets the session list of the current user. By default, the last 20 sessions are returned.',
+    conversationsListFirstIdTip: 'The ID of the last record on the current page, default none.',
+    conversationsListLimitTip: 'How many chats are returned in one request',
+    conversationRenamingApi: 'Conversation renaming',
+    conversationRenamingApiTip: 'Rename conversations; the name is displayed in multi-session client interfaces.',
+    conversationRenamingNameTip: 'New name',
+    parametersApi: 'Obtain application parameter information',
+    parametersApiTip: 'Retrieve configured Input parameters, including variable names, field names, types, and default values. Typically used for displaying these fields in a form or filling in default values after the client loads.',
+  },
+  develop: {
+    requestBody: 'Request Body',
+    pathParams: 'Path Params',
+    query: 'Query',
+  },
 }
 
 export default translation
diff --git a/web/i18n/lang/app-api.zh.ts b/web/i18n/lang/app-api.zh.ts
index 49dc184dd..437445eb0 100644
--- a/web/i18n/lang/app-api.zh.ts
+++ b/web/i18n/lang/app-api.zh.ts
@@ -1,76 +1,79 @@
 const translation = {
-    apiServer: "API 服务器",
-    apiKey: "API 密钥",
-    status: "状态",
-    disabled: "已停用",
-    ok: "运行中",
-    copy: "复制",
-    copied: "已复制",
-    never: "从未",
-    apiKeyModal: {
-        apiSecretKey: "API 密钥",
-        apiSecretKeyTips: "如果不想你的应用 API 被滥用，请保护好你的 API Key :) 最佳实践是避免在前端代码中明文引用。",
-        createNewSecretKey: "创建密钥",
-        secretKey: "密钥",
-        created: "创建时间",
-        lastUsed: "最后使用",
-        generateTips: "请将此密钥保存在安全且可访问的地方。"
-    },
-    actionMsg: {
-        deleteConfirmTitle: "删除此密钥？",
-        deleteConfirmTips: "删除密钥无法撤销，正在使用中的应用会受影响。",
-        ok: "好的"
-    },
-    completionMode: {
-        title: "文本生成型应用 API",
-        info: "可用于生成高质量文本的应用，例如生成文章、摘要、翻译等，通过调用 completion-messages 接口，发送用户输入得到生成文本结果。用于生成文本的模型参数和提示词模版取决于开发者在 Dify 提示词编排页的设置。",
-        createCompletionApi: "创建文本补全消息",
-        createCompletionApiTip: "创建文本补全消息，支持一问一答模式。",
-        inputsTips: "（选填）以键值对方式提供用户输入字段，与提示词编排中的变量对应。Key 为变量名称，Value 是参数值。如果字段类型为 Select，传入的 Value 需为预设选项之一。",
-        queryTips: "用户输入的文本正文。",
-        blocking: "blocking 阻塞型，等待执行完毕后返回结果。（请求若流程较长可能会被中断）",
-        streaming: "streaming 流式返回。基于 SSE（**[Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)**）实现流式返回。",
-        messageFeedbackApi: "消息反馈（点赞）",
-        messageFeedbackApiTip: "代表最终用户对返回消息进行评价，可以点赞与点踩，该数据将在“日志与标注”页中可见，并用于后续的模型微调。",
-        messageIDTip: "消息 ID",
-        ratingTip: "like 或 dislike， 空值为撤销",
-        parametersApi: "获取应用配置信息",
-        parametersApiTip: "获取已配置的 Input 参数，包括变量名、字段名称、类型与默认值。通常用于客户端加载后显示这些字段的表单或填入默认值。"
-    },
-    chatMode: {
-        title: "对话型应用 API",
-        info: "可用于大部分场景的对话型应用，采用一问一答模式与用户持续对话。要开始一个对话请调用 chat-messages 接口，通过继续传入返回的 conversation_id 可持续保持该会话。",
-        createChatApi: "发送对话消息",
-        createChatApiTip: "创建会话消息，或基于此前的对话继续发送消息。",
-        inputsTips: "（选填）以键值对方式提供用户输入字段，与提示词编排中的变量对应。Key 为变量名称，Value 是参数值。如果字段类型为 Select，传入的 Value 需为预设选项之一。",
-        queryTips: " 用户输入/提问内容",
-        blocking: "blocking 阻塞型，等待执行完毕后返回结果。（请求若流程较长可能会被中断）",
-        streaming: "streaming 流式返回。基于 SSE（**[Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)**）实现流式返回。",
-        conversationIdTip: "（选填）会话标识符，首次对话可为空，如果要继续对话请传入上下文返回的 conversation_id",
-        messageFeedbackApi: "消息反馈（点赞）",
-        messageFeedbackApiTip: "代表最终用户对返回消息进行评价，可以点赞与点踩，该数据将在“日志与标注”页中可见，并用于后续的模型微调。",
-        messageIDTip: "消息 ID",
-        ratingTip: "like 或 dislike， 空值为撤销",
-        chatMsgHistoryApi: "获取会话历史消息",
-        chatMsgHistoryApiTip: "滚动加载形式返回历史聊天记录，第一页返回最新 `limit` 条，即：倒序返回。",
-        chatMsgHistoryConversationIdTip: "会话 ID",
-        chatMsgHistoryFirstId: "当前页第一条聊天记录的 ID，默认 none",
-        chatMsgHistoryLimit: "一次请求返回多少条聊天记录",
-        conversationsListApi: "获取会话列表",
-        conversationsListApiTip: "获取当前用户的会话列表，默认返回最近的 20 条。",
-        conversationsListFirstIdTip: " 当前页最前面一条记录的 ID，默认 none",
-        conversationsListLimitTip: "一次请求返回多少条记录",
-        conversationRenamingApi: "会话重命名",
-        conversationRenamingApiTip: "对会话进行重命名，会话名称用于显示在支持多会话的客户端上。",
-        conversationRenamingNameTip: "新的名称",
-        parametersApi: "获取应用配置信息",
-        parametersApiTip: "获取已配置的 Input 参数，包括变量名、字段名称、类型与默认值。通常用于客户端加载后显示这些字段的表单或填入默认值。"
-    },
-    develop: {
-        requestBody: "Request Body",
-        pathParams: "Path Params",
-        query: "Query"
-    }
+  apiServer: 'API 服务器',
+  apiKey: 'API 密钥',
+  status: '状态',
+  disabled: '已停用',
+  ok: '运行中',
+  copy: '复制',
+  merMaind: {
+    rerender: '重新渲染',
+  },
+  copied: '已复制',
+  never: '从未',
+  apiKeyModal: {
+    apiSecretKey: 'API 密钥',
+    apiSecretKeyTips: '如果不想你的应用 API 被滥用，请保护好你的 API Key :) 最佳实践是避免在前端代码中明文引用。',
+    createNewSecretKey: '创建密钥',
+    secretKey: '密钥',
+    created: '创建时间',
+    lastUsed: '最后使用',
+    generateTips: '请将此密钥保存在安全且可访问的地方。',
+  },
+  actionMsg: {
+    deleteConfirmTitle: '删除此密钥？',
+    deleteConfirmTips: '删除密钥无法撤销，正在使用中的应用会受影响。',
+    ok: '好的',
+  },
+  completionMode: {
+    title: '文本生成型应用 API',
+    info: '可用于生成高质量文本的应用，例如生成文章、摘要、翻译等，通过调用 completion-messages 接口，发送用户输入得到生成文本结果。用于生成文本的模型参数和提示词模版取决于开发者在 Dify 提示词编排页的设置。',
+    createCompletionApi: '创建文本补全消息',
+    createCompletionApiTip: '创建文本补全消息，支持一问一答模式。',
+    inputsTips: '（选填）以键值对方式提供用户输入字段，与提示词编排中的变量对应。Key 为变量名称，Value 是参数值。如果字段类型为 Select，传入的 Value 需为预设选项之一。',
+    queryTips: '用户输入的文本正文。',
+    blocking: 'blocking 阻塞型，等待执行完毕后返回结果。（请求若流程较长可能会被中断）',
+    streaming: 'streaming 流式返回。基于 SSE（**[Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)**）实现流式返回。',
+    messageFeedbackApi: '消息反馈（点赞）',
+    messageFeedbackApiTip: '代表最终用户对返回消息进行评价，可以点赞与点踩，该数据将在“日志与标注”页中可见，并用于后续的模型微调。',
+    messageIDTip: '消息 ID',
+    ratingTip: 'like 或 dislike， 空值为撤销',
+    parametersApi: '获取应用配置信息',
+    parametersApiTip: '获取已配置的 Input 参数，包括变量名、字段名称、类型与默认值。通常用于客户端加载后显示这些字段的表单或填入默认值。',
+  },
+  chatMode: {
+    title: '对话型应用 API',
+    info: '可用于大部分场景的对话型应用，采用一问一答模式与用户持续对话。要开始一个对话请调用 chat-messages 接口，通过继续传入返回的 conversation_id 可持续保持该会话。',
+    createChatApi: '发送对话消息',
+    createChatApiTip: '创建会话消息，或基于此前的对话继续发送消息。',
+    inputsTips: '（选填）以键值对方式提供用户输入字段，与提示词编排中的变量对应。Key 为变量名称，Value 是参数值。如果字段类型为 Select，传入的 Value 需为预设选项之一。',
+    queryTips: ' 用户输入/提问内容',
+    blocking: 'blocking 阻塞型，等待执行完毕后返回结果。（请求若流程较长可能会被中断）',
+    streaming: 'streaming 流式返回。基于 SSE（**[Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)**）实现流式返回。',
+    conversationIdTip: '（选填）会话标识符，首次对话可为空，如果要继续对话请传入上下文返回的 conversation_id',
+    messageFeedbackApi: '消息反馈（点赞）',
+    messageFeedbackApiTip: '代表最终用户对返回消息进行评价，可以点赞与点踩，该数据将在“日志与标注”页中可见，并用于后续的模型微调。',
+    messageIDTip: '消息 ID',
+    ratingTip: 'like 或 dislike， 空值为撤销',
+    chatMsgHistoryApi: '获取会话历史消息',
+    chatMsgHistoryApiTip: '滚动加载形式返回历史聊天记录，第一页返回最新 `limit` 条，即：倒序返回。',
+    chatMsgHistoryConversationIdTip: '会话 ID',
+    chatMsgHistoryFirstId: '当前页第一条聊天记录的 ID，默认 none',
+    chatMsgHistoryLimit: '一次请求返回多少条聊天记录',
+    conversationsListApi: '获取会话列表',
+    conversationsListApiTip: '获取当前用户的会话列表，默认返回最近的 20 条。',
+    conversationsListFirstIdTip: ' 当前页最前面一条记录的 ID，默认 none',
+    conversationsListLimitTip: '一次请求返回多少条记录',
+    conversationRenamingApi: '会话重命名',
+    conversationRenamingApiTip: '对会话进行重命名，会话名称用于显示在支持多会话的客户端上。',
+    conversationRenamingNameTip: '新的名称',
+    parametersApi: '获取应用配置信息',
+    parametersApiTip: '获取已配置的 Input 参数，包括变量名、字段名称、类型与默认值。通常用于客户端加载后显示这些字段的表单或填入默认值。',
+  },
+  develop: {
+    requestBody: 'Request Body',
+    pathParams: 'Path Params',
+    query: 'Query',
+  },
 }
 
 export default translation
diff --git a/web/package.json b/web/package.json
index d744e2de4..51cf94a27 100644
--- a/web/package.json
+++ b/web/package.json
@@ -44,6 +44,7 @@
     "katex": "^0.16.7",
     "lamejs": "1.2.0",
     "lodash-es": "^4.17.21",
+    "mermaid": "10.4.0",
     "negotiator": "^0.6.3",
     "next": "13.3.1",
     "qs": "^6.11.1",
diff --git a/web/yarn.lock b/web/yarn.lock
index 901f94d3d..97efa349c 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -95,6 +95,11 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@braintree/sanitize-url@^6.0.1":
+  version "6.0.4"
+  resolved "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz"
+  integrity sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==
+
 "@emoji-mart/data@^1.1.2":
   version "1.1.2"
   resolved "https://registry.npmjs.org/@emoji-mart/data/-/data-1.1.2.tgz"
@@ -307,10 +312,10 @@
   resolved "https://registry.npmjs.org/@miragejs/pretender-node-polyfill/-/pretender-node-polyfill-0.1.2.tgz"
   integrity sha512-M/BexG/p05C5lFfMunxo/QcgIJnMT2vDVCd00wNqK2ImZONIlEETZwWJu1QtLxtmYlSHlCFl3JNzp0tLe7OJ5g==
 
-"@next/env@13.3.4":
-  version "13.3.4"
-  resolved "https://registry.npmjs.org/@next/env/-/env-13.3.4.tgz"
-  integrity sha512-oTK/wRV2qga86m/4VdrR1+/56UA6U1Qv3sIgowB+bZjahniZLEG5BmmQjfoGv7ZuLXBZ8Eec6hkL9BqJcrEL2g==
+"@next/env@13.3.1":
+  version "13.3.1"
+  resolved "https://registry.npmjs.org/@next/env/-/env-13.3.1.tgz"
+  integrity sha512-EDtCoedIZC7JlUQ3uaQpSc4aVmyhbLHmQVALg7pFfQgOTjgSnn7mKtA0DiCMkYvvsx6aFb5octGMtWrOtGXW9A==
 
 "@next/eslint-plugin-next@13.4.12":
   version "13.4.12"
@@ -326,10 +331,10 @@
   dependencies:
     source-map "^0.7.0"
 
-"@next/swc-darwin-arm64@13.3.4":
-  version "13.3.4"
-  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.3.4.tgz"
-  integrity sha512-vux7RWfzxy1lD21CMwZsy9Ej+0+LZdIIj1gEhVmzOQqQZ5N56h8JamrjIVCfDL+Lpj8KwOmFZbPHE8qaYnL2pg==
+"@next/swc-darwin-arm64@13.3.1":
+  version "13.3.1"
+  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.3.1.tgz"
+  integrity sha512-UXPtriEc/pBP8luSLSCZBcbzPeVv+SSjs9cH/KygTbhmACye8/OOXRZO13Z2Wq1G0gLmEAIHQAOuF+vafPd2lw==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -438,10 +443,10 @@
     "@sentry/types" "7.54.0"
     tslib "^1.9.3"
 
-"@swc/helpers@0.5.1":
-  version "0.5.1"
-  resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz"
-  integrity sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==
+"@swc/helpers@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.0.tgz"
+  integrity sha512-SjY/p4MmECVVEWspzSRpQEM3sjR17sP8PbGxELWrT+YZMBfiUyt1MRUNjMV23zohwlG2HYtCQOsCwsTHguXkyg==
   dependencies:
     tslib "^2.4.0"
 
@@ -472,6 +477,23 @@
   resolved "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.1.1.tgz"
   integrity sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==
 
+"@types/d3-scale-chromatic@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz"
+  integrity sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==
+
+"@types/d3-scale@^4.0.3":
+  version "4.0.4"
+  resolved "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.4.tgz"
+  integrity sha512-eq1ZeTj0yr72L8MQk6N6heP603ubnywSDRfNpi5enouR112HzGLS6RIvExCzZTraFF4HdzNpJMwA/zGiMoHUUw==
+  dependencies:
+    "@types/d3-time" "*"
+
+"@types/d3-time@*":
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz"
+  integrity sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==
+
 "@types/debug@^4.0.0":
   version "4.1.8"
   resolved "https://registry.npmjs.org/@types/debug/-/debug-4.1.8.tgz"
@@ -1421,6 +1443,11 @@ commander@^8.3.0:
   resolved "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz"
   integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
 
+commander@7:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@@ -1433,6 +1460,20 @@ copy-to-clipboard@^3.3.3:
   dependencies:
     toggle-selection "^1.0.6"
 
+cose-base@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/cose-base/-/cose-base-1.0.3.tgz"
+  integrity sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==
+  dependencies:
+    layout-base "^1.0.0"
+
+cose-base@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz"
+  integrity sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==
+  dependencies:
+    layout-base "^2.0.0"
+
 cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
@@ -1457,6 +1498,307 @@ csstype@^3.0.2:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+cytoscape-cose-bilkent@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.1.0.tgz"
+  integrity sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==
+  dependencies:
+    cose-base "^1.0.0"
+
+cytoscape-fcose@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz"
+  integrity sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==
+  dependencies:
+    cose-base "^2.2.0"
+
+cytoscape@^3.2.0, cytoscape@^3.23.0:
+  version "3.26.0"
+  resolved "https://registry.npmjs.org/cytoscape/-/cytoscape-3.26.0.tgz"
+  integrity sha512-IV+crL+KBcrCnVVUCZW+zRRRFUZQcrtdOPXki+o4CFUWLdAEYvuZLcBSJC9EBK++suamERKzeY7roq2hdovV3w==
+  dependencies:
+    heap "^0.2.6"
+    lodash "^4.17.21"
+
+d3-array@^3.2.0, "d3-array@2 - 3", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@3:
+  version "3.2.4"
+  resolved "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz"
+  integrity sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==
+  dependencies:
+    internmap "1 - 2"
+
+"d3-array@1 - 2":
+  version "2.12.1"
+  resolved "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz"
+  integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
+  dependencies:
+    internmap "^1.0.0"
+
+d3-axis@3:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz"
+  integrity sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==
+
+d3-brush@3:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz"
+  integrity sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-drag "2 - 3"
+    d3-interpolate "1 - 3"
+    d3-selection "3"
+    d3-transition "3"
+
+d3-chord@3:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz"
+  integrity sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==
+  dependencies:
+    d3-path "1 - 3"
+
+"d3-color@1 - 3", d3-color@3:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz"
+  integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
+
+d3-contour@4:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz"
+  integrity sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==
+  dependencies:
+    d3-array "^3.2.0"
+
+d3-delaunay@6:
+  version "6.0.4"
+  resolved "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz"
+  integrity sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==
+  dependencies:
+    delaunator "5"
+
+"d3-dispatch@1 - 3", d3-dispatch@3:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz"
+  integrity sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==
+
+"d3-drag@2 - 3", d3-drag@3:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz"
+  integrity sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-selection "3"
+
+"d3-dsv@1 - 3", d3-dsv@3:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz"
+  integrity sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==
+  dependencies:
+    commander "7"
+    iconv-lite "0.6"
+    rw "1"
+
+"d3-ease@1 - 3", d3-ease@3:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz"
+  integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
+
+d3-fetch@3:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz"
+  integrity sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==
+  dependencies:
+    d3-dsv "1 - 3"
+
+d3-force@3:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz"
+  integrity sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-quadtree "1 - 3"
+    d3-timer "1 - 3"
+
+"d3-format@1 - 3", d3-format@3:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz"
+  integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
+
+d3-geo@3:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz"
+  integrity sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==
+  dependencies:
+    d3-array "2.5.0 - 3"
+
+d3-hierarchy@3:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz"
+  integrity sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==
+
+"d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3", d3-interpolate@3:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz"
+  integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
+  dependencies:
+    d3-color "1 - 3"
+
+d3-path@^3.1.0, "d3-path@1 - 3", d3-path@3:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz"
+  integrity sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==
+
+d3-path@1:
+  version "1.0.9"
+  resolved "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz"
+  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
+
+d3-polygon@3:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz"
+  integrity sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==
+
+"d3-quadtree@1 - 3", d3-quadtree@3:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz"
+  integrity sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==
+
+d3-random@3:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz"
+  integrity sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==
+
+d3-sankey@^0.12.3:
+  version "0.12.3"
+  resolved "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz"
+  integrity sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==
+  dependencies:
+    d3-array "1 - 2"
+    d3-shape "^1.2.0"
+
+d3-scale-chromatic@3:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz"
+  integrity sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==
+  dependencies:
+    d3-color "1 - 3"
+    d3-interpolate "1 - 3"
+
+d3-scale@4:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz"
+  integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
+  dependencies:
+    d3-array "2.10.0 - 3"
+    d3-format "1 - 3"
+    d3-interpolate "1.2.0 - 3"
+    d3-time "2.1.1 - 3"
+    d3-time-format "2 - 4"
+
+"d3-selection@2 - 3", d3-selection@3:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz"
+  integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==
+
+d3-shape@^1.2.0:
+  version "1.3.7"
+  resolved "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz"
+  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
+  dependencies:
+    d3-path "1"
+
+d3-shape@3:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz"
+  integrity sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==
+  dependencies:
+    d3-path "^3.1.0"
+
+"d3-time-format@2 - 4", d3-time-format@4:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz"
+  integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
+  dependencies:
+    d3-time "1 - 3"
+
+"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@3:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz"
+  integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==
+  dependencies:
+    d3-array "2 - 3"
+
+"d3-timer@1 - 3", d3-timer@3:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz"
+  integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
+
+"d3-transition@2 - 3", d3-transition@3:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz"
+  integrity sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==
+  dependencies:
+    d3-color "1 - 3"
+    d3-dispatch "1 - 3"
+    d3-ease "1 - 3"
+    d3-interpolate "1 - 3"
+    d3-timer "1 - 3"
+
+d3-zoom@3:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz"
+  integrity sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-drag "2 - 3"
+    d3-interpolate "1 - 3"
+    d3-selection "2 - 3"
+    d3-transition "2 - 3"
+
+d3@^7.4.0, d3@^7.8.2:
+  version "7.8.5"
+  resolved "https://registry.npmjs.org/d3/-/d3-7.8.5.tgz"
+  integrity sha512-JgoahDG51ncUfJu6wX/1vWQEqOflgXyl4MaHqlcSruTez7yhaRKR9i8VjjcQGeS2en/jnFivXuaIMnseMMt0XA==
+  dependencies:
+    d3-array "3"
+    d3-axis "3"
+    d3-brush "3"
+    d3-chord "3"
+    d3-color "3"
+    d3-contour "4"
+    d3-delaunay "6"
+    d3-dispatch "3"
+    d3-drag "3"
+    d3-dsv "3"
+    d3-ease "3"
+    d3-fetch "3"
+    d3-force "3"
+    d3-format "3"
+    d3-geo "3"
+    d3-hierarchy "3"
+    d3-interpolate "3"
+    d3-path "3"
+    d3-polygon "3"
+    d3-quadtree "3"
+    d3-random "3"
+    d3-scale "4"
+    d3-scale-chromatic "3"
+    d3-selection "3"
+    d3-shape "3"
+    d3-time "3"
+    d3-time-format "4"
+    d3-timer "3"
+    d3-transition "3"
+    d3-zoom "3"
+
+dagre-d3-es@7.0.10:
+  version "7.0.10"
+  resolved "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.10.tgz"
+  integrity sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==
+  dependencies:
+    d3 "^7.8.2"
+    lodash-es "^4.17.21"
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
@@ -1548,6 +1890,13 @@ define-properties@^1.1.3, define-properties@^1.1.4, define-properties@^1.2.0:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+delaunator@5:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz"
+  integrity sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==
+  dependencies:
+    robust-predicates "^3.0.0"
+
 dequal@^2.0.0:
   version "2.0.3"
   resolved "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz"
@@ -1610,6 +1959,11 @@ domhandler@^5.0.2, domhandler@^5.0.3:
   dependencies:
     domelementtype "^2.3.0"
 
+dompurify@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.npmjs.org/dompurify/-/dompurify-3.0.5.tgz"
+  integrity sha512-F9e6wPGtY+8KNMRAVfxeCOHU0/NPWMSENNq4pQctuXRqqdEPW7q3CrLbR5Nse044WwacyjHGOMlvNsBe1y6z9A==
+
 domutils@^3.0.1:
   version "3.1.0"
   resolved "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz"
@@ -1645,6 +1999,11 @@ electron-to-chromium@^1.4.411:
   resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.423.tgz"
   integrity sha512-y4A7YfQcDGPAeSWM1IuoWzXpg9RY1nwHzHSwRtCSQFp9FgAVDgdWlFf0RbdWfLWQ2WUI+bddUgk5RgTjqRE6FQ==
 
+elkjs@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.npmjs.org/elkjs/-/elkjs-0.8.2.tgz"
+  integrity sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==
+
 emoji-mart@^5.5.2:
   version "5.5.2"
   resolved "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.5.2.tgz"
@@ -2438,22 +2797,10 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@^7.1.3:
-  version "7.2.3"
-  resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz"
-  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.1.1"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-glob@7.1.6:
-  version "7.1.6"
-  resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+glob@^7.1.3, glob@7.1.7:
+  version "7.1.7"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz"
+  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
@@ -2462,10 +2809,10 @@ glob@7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@7.1.7:
-  version "7.1.7"
-  resolved "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz"
-  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
+glob@7.1.6:
+  version "7.1.6"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
@@ -2694,6 +3041,11 @@ hastscript@^7.0.0:
     property-information "^6.0.0"
     space-separated-tokens "^2.0.0"
 
+heap@^0.2.6:
+  version "0.2.7"
+  resolved "https://registry.npmjs.org/heap/-/heap-0.2.7.tgz"
+  integrity sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==
+
 highlight.js@^10.4.1, highlight.js@~10.7.0:
   version "10.7.3"
   resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz"
@@ -2757,6 +3109,13 @@ i18next@^22.4.13, "i18next@>= 19.0.0":
   dependencies:
     "@babel/runtime" "^7.20.6"
 
+iconv-lite@0.6:
+  version "0.6.3"
+  resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 ignore@^5.0.5, ignore@^5.1.1, ignore@^5.2.0:
   version "5.2.4"
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz"
@@ -2822,6 +3181,16 @@ internal-slot@^1.0.3, internal-slot@^1.0.4, internal-slot@^1.0.5:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+internmap@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz"
+  integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
+
+"internmap@1 - 2":
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz"
+  integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
+
 intersection-observer@^0.12.0:
   version "0.12.2"
   resolved "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.12.2.tgz"
@@ -3221,6 +3590,11 @@ katex@^0.16.0, katex@^0.16.7:
   dependencies:
     commander "^8.3.0"
 
+khroma@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/khroma/-/khroma-2.0.0.tgz"
+  integrity sha512-2J8rDNlQWbtiNYThZRvmMv5yt44ZakX+Tz5ZIp/mN1pt4snn+m030Va5Z4v8xA0cQFDXBwO/8i42xL4QPsVk3g==
+
 kleur@^4.0.3:
   version "4.1.5"
   resolved "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz"
@@ -3245,6 +3619,16 @@ language-tags@=1.0.5:
   dependencies:
     language-subtag-registry "~0.3.2"
 
+layout-base@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz"
+  integrity sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==
+
+layout-base@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz"
+  integrity sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==
+
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz"
@@ -3568,6 +3952,24 @@ mdast-util-from-markdown@^1.1.0:
     unist-util-stringify-position "^3.0.0"
     uvu "^0.5.0"
 
+mdast-util-from-markdown@^1.3.0:
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.1.tgz"
+  integrity sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    decode-named-character-reference "^1.0.0"
+    mdast-util-to-string "^3.1.0"
+    micromark "^3.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-decode-string "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    unist-util-stringify-position "^3.0.0"
+    uvu "^0.5.0"
+
 mdast-util-gfm-autolink-literal@^1.0.0:
   version "1.0.3"
   resolved "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-1.0.3.tgz"
@@ -3764,6 +4166,32 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
+mermaid@10.4.0:
+  version "10.4.0"
+  resolved "https://registry.npmjs.org/mermaid/-/mermaid-10.4.0.tgz"
+  integrity sha512-4QCQLp79lvz7UZxow5HUX7uWTPJOaQBVExduo91tliXC7v78i6kssZOPHxLL+Xs30KU72cpPn3g3imw/xm/gaw==
+  dependencies:
+    "@braintree/sanitize-url" "^6.0.1"
+    "@types/d3-scale" "^4.0.3"
+    "@types/d3-scale-chromatic" "^3.0.0"
+    cytoscape "^3.23.0"
+    cytoscape-cose-bilkent "^4.1.0"
+    cytoscape-fcose "^2.1.0"
+    d3 "^7.4.0"
+    d3-sankey "^0.12.3"
+    dagre-d3-es "7.0.10"
+    dayjs "^1.11.7"
+    dompurify "^3.0.5"
+    elkjs "^0.8.2"
+    khroma "^2.0.0"
+    lodash-es "^4.17.21"
+    mdast-util-from-markdown "^1.3.0"
+    non-layered-tidy-tree-layout "^2.0.2"
+    stylis "^4.1.3"
+    ts-dedent "^2.2.0"
+    uuid "^9.0.0"
+    web-worker "^1.2.0"
+
 micromark-core-commonmark@^1.0.0, micromark-core-commonmark@^1.0.1:
   version "1.1.0"
   resolved "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-1.1.0.tgz"
@@ -4187,7 +4615,7 @@ min-indent@^1.0.0:
   resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -4275,33 +4703,38 @@ neo-async@^2.6.2:
   resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-next@13.3.4:
-  version "13.3.4"
-  resolved "https://registry.npmjs.org/next/-/next-13.3.4.tgz"
-  integrity sha512-sod7HeokBSvH5QV0KB+pXeLfcXUlLrGnVUXxHpmhilQ+nQYT3Im2O8DswD5e4uqbR8Pvdu9pcWgb1CbXZQZlmQ==
+next@13.3.1:
+  version "13.3.1"
+  resolved "https://registry.npmjs.org/next/-/next-13.3.1.tgz"
+  integrity sha512-eByWRxPzKHs2oQz1yE41LX35umhz86ZSZ+mYyXBqn2IBi2hyUqxBA88avywdr4uyH+hCJczegGsDGWbzQA5Rqw==
   dependencies:
-    "@next/env" "13.3.4"
-    "@swc/helpers" "0.5.1"
+    "@next/env" "13.3.1"
+    "@swc/helpers" "0.5.0"
     busboy "1.6.0"
     caniuse-lite "^1.0.30001406"
     postcss "8.4.14"
     styled-jsx "5.1.1"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "13.3.4"
-    "@next/swc-darwin-x64" "13.3.4"
-    "@next/swc-linux-arm64-gnu" "13.3.4"
-    "@next/swc-linux-arm64-musl" "13.3.4"
-    "@next/swc-linux-x64-gnu" "13.3.4"
-    "@next/swc-linux-x64-musl" "13.3.4"
-    "@next/swc-win32-arm64-msvc" "13.3.4"
-    "@next/swc-win32-ia32-msvc" "13.3.4"
-    "@next/swc-win32-x64-msvc" "13.3.4"
+    "@next/swc-darwin-arm64" "13.3.1"
+    "@next/swc-darwin-x64" "13.3.1"
+    "@next/swc-linux-arm64-gnu" "13.3.1"
+    "@next/swc-linux-arm64-musl" "13.3.1"
+    "@next/swc-linux-x64-gnu" "13.3.1"
+    "@next/swc-linux-x64-musl" "13.3.1"
+    "@next/swc-win32-arm64-msvc" "13.3.1"
+    "@next/swc-win32-ia32-msvc" "13.3.1"
+    "@next/swc-win32-x64-msvc" "13.3.1"
 
 node-releases@^2.0.12:
   version "2.0.12"
   resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.12.tgz"
   integrity sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ==
 
+non-layered-tidy-tree-layout@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/non-layered-tidy-tree-layout/-/non-layered-tidy-tree-layout-2.0.2.tgz"
+  integrity sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw==
+
 normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz"
@@ -5114,6 +5547,11 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
+robust-predicates@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz"
+  integrity sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==
+
 route-recognizer@^0.3.3:
   version "0.3.4"
   resolved "https://registry.npmjs.org/route-recognizer/-/route-recognizer-0.3.4.tgz"
@@ -5133,6 +5571,11 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rw@1:
+  version "1.3.3"
+  resolved "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz"
+  integrity sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==
+
 rxjs@^7.8.0:
   version "7.8.1"
   resolved "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz"
@@ -5168,6 +5611,11 @@ safe-regex@^2.1.1:
   dependencies:
     regexp-tree "~0.1.1"
 
+"safer-buffer@>= 2.1.2 < 3.0.0":
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
 sass@^1.3.0, sass@^1.61.0:
   version "1.62.1"
   resolved "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz"
@@ -5506,6 +5954,11 @@ styled-jsx@5.1.1:
   dependencies:
     client-only "0.0.1"
 
+stylis@^4.1.3:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz"
+  integrity sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==
+
 sucrase@^3.32.0:
   version "3.32.0"
   resolved "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz"
@@ -5680,6 +6133,11 @@ trough@^2.0.0:
   resolved "https://registry.npmjs.org/trough/-/trough-2.1.0.tgz"
   integrity sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==
 
+ts-dedent@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz"
+  integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==
+
 ts-interface-checker@^0.1.9:
   version "0.1.13"
   resolved "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz"
@@ -5904,6 +6362,11 @@ util-deprecate@^1.0.2:
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+uuid@^9.0.0:
+  version "9.0.1"
+  resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
 uvu@^0.5.0:
   version "0.5.6"
   resolved "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz"
@@ -5979,6 +6442,11 @@ web-namespaces@^2.0.0:
   resolved "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz"
   integrity sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==
 
+web-worker@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz"
+  integrity sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA==
+
 webpack-sources@^3.2.3:
   version "3.2.3"
   resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz"