docs: diagrams plugin tooling (#5741)

* added plugin

* updated plugin + added component

* dummy data TO BE REMOVED

* (wip) workflow generator tool

* add workflow generator tooling

* updated the generator tool

* added code file creation

* fix design of diagrams

* configured diagram theme

* added build script

* removed comments + unnecessary files

* general fixes

* refactored plugin

* added README + more output types

www/apps/docs/docusaurus.config.js

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import "dotenv/config"
 import fs from "fs"
+import path from "path"
 import { themes as prismThemes } from "prism-react-renderer"
 const reverseSidebarItems = require("./src/utils/reverse-sidebar")
 const excludeSidebarResults = require("./src/utils/exclude-sidebar-results")
@@ -24,6 +25,7 @@ const config = {
       admonitions: false,
       headingIds: false,
     },
+    mermaid: true,
   },
   plugins: [
     require.resolve("docusaurus-plugin-image-zoom"),
@@ -62,8 +64,39 @@ const config = {
         },
       }
     },
+    [
+      "./src/plugins/docusaurus-plugin-diagram2code-showcase",
+      {
+        directoryPath: path.join(__dirname, "diagrams"),
+        outputPath: path.join(__dirname, "src", "utils"),
+      },
+    ],
   ],
+  themes: ["@docusaurus/theme-mermaid"],
   themeConfig: {
+    mermaid: {
+      theme: {
+        light: "base",
+        dark: "base",
+      },
+      options: {
+        themeVariables: {
+          background: "#FFFFFF",
+          mainBkg: "#FFFFFF",
+          primaryColor: "#FFFFFF",
+          primaryTextColor: "#030712",
+          primaryBorderColor: "#D1D5DB",
+          nodeBorder: "#D1D5DB",
+          lineColor: "#11181C",
+          fontFamily: "Inter",
+          fontSize: "13px",
+          tertiaryColor: "#F3F4F6",
+          tertiaryBorderColor: "#D1D5DB",
+          tertiaryTextColor: "#030712",
+          clusterBkg: "#F3F4F6",
+        },
+      },
+    },
     image: "img/docs-meta.jpg",
     colorMode: {
       defaultMode: "light",