:construction: add mermaid demo

dashboard/src/App.tsx

@@ -3,6 +3,7 @@ import { ConfigProvider } from "antd";
 import { IntlProvider } from "react-intl";
 import { Provider } from "react-redux";
 import { pdfjs } from "react-pdf";
+import mermaid from "mermaid";
 
 import Router from "./Router";
 import store from "./store";
@@ -16,6 +17,7 @@ import onLoad from "./load";
 import "./App.css";
 
 pdfjs.GlobalWorkerOptions.workerSrc = `${API_HOST}/assets/pdf.worker.min.js`;
+mermaid.initialize({ startOnLoad: true });
 
 onLoad();
 const lang = getLocale();

dashboard/src/pages/nut/index.tsx

@@ -13,11 +13,25 @@ interface IRandomPanel {
   v2: string;
 }
 
+interface IMermaidProps {
+  value: string;
+}
+
+const Mermaid = ({ value }: IMermaidProps) => {
+  return <pre className="mermaid">{value}</pre>;
+};
+
 const Widget = () => {
   const [rdp, setRdp] = useState<IRandomPanel>({
     v1: "",
     v2: "",
   });
+  var aaa: any = {};
+  aaa["bbb"] = "hi";
+  aaa[123] = 321;
+  aaa.hi = "hello";
+  console.log(aaa);
+
   return (
     <div>
       <HeadBar />
@@ -28,25 +42,39 @@ const Widget = () => {
       ></div>
       <div>Home Page</div>
       <div>
+        <h1>Mermaid</h1>
+        <div>
+          <Mermaid
+            value={`graph TD 
+        A[Client] --> B[Load Balancer] 
+        B --> C[Server01] 
+        B --> D[Server02]`}
+          />
+        </div>
         <h1>random</h1>
-        <Space style={{ color: "red" }}>{rdp.v1}</Space>
-        &nbsp;
-        <Space style={{ color: "green" }}>{rdp.v2}</Space>
-        &nbsp;
-        <Button
-          onClick={() => {
-            setRdp({
-              v1: Array.from(Array(20), () =>
-                Math.floor(Math.random() * 36).toString(36)
-              ).join(""),
-              v2: lodash
-                .times(20, () => lodash.random(35).toString(36))
-                .join(""),
-            });
-          }}
-        >
-          Generate
-        </Button>
+        <div>
+          &nbsp;
+          <Space style={{ color: "blue" }}>{lodash.uniqueId("hi-")}</Space>
+          &nbsp;
+          <Space style={{ color: "red" }}>{rdp.v1}</Space>
+          &nbsp;
+          <Space style={{ color: "green" }}>{rdp.v2}</Space>
+          &nbsp;
+          <Button
+            onClick={() => {
+              setRdp({
+                v1: Array.from(Array(20), () =>
+                  Math.floor(Math.random() * 36).toString(36)
+                ).join(""),
+                v2: lodash
+                  .times(20, () => lodash.random(35).toString(36))
+                  .join(""),
+              });
+            }}
+          >
+            Generate
+          </Button>
+        </div>
       </div>
       <br />
       <div>