diff --git a/package-lock.json b/package-lock.json
index 14e6d59..86d202d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,11 +10,14 @@
       "license": "Apache-2.0",
       "dependencies": {
         "@asyncapi/parser": "^3.0.7",
+        "ejs": "^3.1.9",
+        "markdown-it": "^14.0.0",
+        "mermaid": "^10.8.0",
         "@types/markdown-it": "^13.0.7",
-        "markdown-it": "^14.0.0"
       },
       "devDependencies": {
         "@asyncapi/react-component": "^1.2.7",
+        "@types/ejs": "^3.1.5",
         "@types/glob": "^7.2.0",
         "@types/js-yaml": "^4.0.5",
         "@types/mocha": "^9.1.1",
@@ -128,6 +131,11 @@
         "@types/json-schema": "^7.0.11"
       }
     },
+    "node_modules/@braintree/sanitize-url": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz",
+      "integrity": "sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A=="
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -638,6 +646,32 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
+      "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.3.tgz",
+      "integrity": "sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw=="
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz",
+      "integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw=="
+    },
+    "node_modules/@types/debug": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
+      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
     "node_modules/@types/dompurify": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-2.3.4.tgz",
@@ -647,6 +681,12 @@
         "@types/trusted-types": "*"
       }
     },
+    "node_modules/@types/ejs": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@types/ejs/-/ejs-3.1.5.tgz",
+      "integrity": "sha512-nv+GSx77ZtXiJzwKdsASqi+YQ5Z7vwHsTP0JY2SiQgjGckkBRKZnk8nIM+7oUZ1VCtuTz0+By4qVR7fqzp/Dfg==",
+      "dev": true
+    },
     "node_modules/@types/es-aggregate-error": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/es-aggregate-error/-/es-aggregate-error-1.0.6.tgz",
@@ -702,6 +742,7 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
     },
+
     "node_modules/@types/linkify-it": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.5.tgz",
@@ -720,6 +761,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.5.tgz",
       "integrity": "sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA=="
+
     },
     "node_modules/@types/minimatch": {
       "version": "5.1.2",
@@ -733,6 +775,11 @@
       "integrity": "sha512-Z61JK7DKDtdKTWwLeElSEBcWGRLY8g95ic5FoQqI9CMx0ns/Ghep3B4DfcEimiKMvtamNVULVNKEsiwV3aQmXw==",
       "dev": true
     },
+    "node_modules/@types/ms": {
+      "version": "0.7.34",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
+      "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
+    },
     "node_modules/@types/node": {
       "version": "14.18.32",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.32.tgz",
@@ -753,6 +800,11 @@
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==",
       "dev": true
     },
+    "node_modules/@types/unist": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
+      "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+    },
     "node_modules/@types/urijs": {
       "version": "1.19.25",
       "resolved": "https://registry.npmjs.org/@types/urijs/-/urijs-1.19.25.tgz",
@@ -1363,7 +1415,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -1441,6 +1492,11 @@
         "astring": "bin/astring"
       }
     },
+    "node_modules/async": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
+      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg=="
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -1656,7 +1712,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -1668,6 +1723,15 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -1757,7 +1821,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -1768,8 +1831,7 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/colorette": {
       "version": "2.0.19",
@@ -1874,6 +1936,14 @@
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "dev": true
     },
+    "node_modules/cose-base": {
+      "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"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1912,6 +1982,466 @@
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
       "dev": true
     },
+    "node_modules/cytoscape": {
+      "version": "3.28.1",
+      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.28.1.tgz",
+      "integrity": "sha512-xyItz4O/4zp9/239wCcH8ZcFuuZooEeF8KHRmzjDfGdXsj3OG9MFSMA0pJE0uX3uCN/ygof6hHf4L7lst+JaDg==",
+      "dependencies": {
+        "heap": "^0.2.6",
+        "lodash": "^4.17.21"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/cytoscape-cose-bilkent": {
+      "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"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
+    "node_modules/d3": {
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-array": {
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+
+    "node_modules/d3-brush": {
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+
+    "node_modules/d3-chord": {
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+
+    "node_modules/d3-contour": {
+      "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"
+      },
+
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "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"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/iconv-lite": {
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-sankey": {
+      "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"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-array": {
+      "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"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "node_modules/d3-sankey/node_modules/d3-shape": {
+      "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"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+    },
+    "node_modules/d3-scale": {
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/dagre-d3-es": {
+      "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"
+      }
+    },
     "node_modules/data-urls": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
@@ -1926,11 +2456,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -1949,6 +2483,18 @@
       "integrity": "sha512-ic1yEvwT6GuvaYwBLLY6/aFFgjZdySKTE8en/fkU3QICTmRtgtSlFn0u0BXN06InZwtfCelR7j8LRiDI/02iGA==",
       "dev": true
     },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
+      "integrity": "sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -1984,6 +2530,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -2001,11 +2555,18 @@
         "node": ">= 0.6.0"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/diff": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-5.0.0.tgz",
       "integrity": "sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==",
-      "dev": true,
       "engines": {
         "node": ">=0.3.1"
       }
@@ -2070,12 +2631,31 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "node_modules/ejs": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz",
+      "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==",
+      "dependencies": {
+        "jake": "^10.8.5"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.283",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.283.tgz",
       "integrity": "sha512-g6RQ9zCOV+U5QVHW9OpFR7rdk/V7xfopNXnyAamdpFgCHgZ1sjI8VuR1+zG2YG/TZk+tQ8mpNkug4P8FU0fuOA==",
       "dev": true
     },
+    "node_modules/elkjs": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.9.2.tgz",
+      "integrity": "sha512-2Y/RaA1pdgSHpY0YG4TYuYCD2wh97CRvu22eLG3Kz0pgQ/6KbIFTxsTnDc4MH/6hFlg2L/9qXrDMG0nMjP63iw=="
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -2664,6 +3244,33 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/filelist": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
+      "dependencies": {
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -3055,7 +3662,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3127,6 +3733,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/heap": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.7.tgz",
+      "integrity": "sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg=="
+    },
     "node_modules/highlight.js": {
       "version": "10.7.3",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
@@ -3264,6 +3875,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/interpret": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
@@ -3554,6 +4173,23 @@
         "jsdom": "^16.5.2"
       }
     },
+    "node_modules/jake": {
+      "version": "10.8.7",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz",
+      "integrity": "sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==",
+      "dependencies": {
+        "async": "^3.2.3",
+        "chalk": "^4.0.2",
+        "filelist": "^1.0.4",
+        "minimatch": "^3.1.2"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/jest-worker": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
@@ -3731,6 +4367,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/khroma": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/khroma/-/khroma-2.1.0.tgz",
+      "integrity": "sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw=="
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -3740,6 +4381,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/layout-base": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz",
+      "integrity": "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg=="
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -3804,6 +4458,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3884,6 +4543,41 @@
         "node": ">= 12"
       }
     },
+    "node_modules/mdast-util-from-markdown": {
+      "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"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz",
+      "integrity": "sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==",
+      "dependencies": {
+        "@types/mdast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdurl": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
@@ -3904,6 +4598,462 @@
         "node": ">= 8"
       }
     },
+    "node_modules/mermaid": {
+      "version": "10.8.0",
+      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.8.0.tgz",
+      "integrity": "sha512-9CzfSreRjdDJxX796+jW4zjEq0DVw5xVF0nWsqff8OTbrt+ml0TZ5PyYUjjUZJa2NYxYJZZXewEquxGiM8qZEA==",
+      "dependencies": {
+        "@braintree/sanitize-url": "^6.0.1",
+        "@types/d3-scale": "^4.0.3",
+        "@types/d3-scale-chromatic": "^3.0.0",
+        "cytoscape": "^3.28.1",
+        "cytoscape-cose-bilkent": "^4.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.9.0",
+        "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"
+      }
+    },
+    "node_modules/mermaid/node_modules/dompurify": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.9.tgz",
+      "integrity": "sha512-uyb4NDIvQ3hRn6NiC+SIFaP4mJ/MdXlvtunaqK9Bn6dD3RuB/1S/gasEjDHD8eiaqdSael2vBv+hOs7Y+jhYOQ=="
+    },
+    "node_modules/micromark": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-3.2.0.tgz",
+      "integrity": "sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-core-commonmark": "^1.0.1",
+        "micromark-factory-space": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-chunked": "^1.0.0",
+        "micromark-util-combine-extensions": "^1.0.0",
+        "micromark-util-decode-numeric-character-reference": "^1.0.0",
+        "micromark-util-encode": "^1.0.0",
+        "micromark-util-normalize-identifier": "^1.0.0",
+        "micromark-util-resolve-all": "^1.0.0",
+        "micromark-util-sanitize-uri": "^1.0.0",
+        "micromark-util-subtokenize": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.1",
+        "uvu": "^0.5.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-1.1.0.tgz",
+      "integrity": "sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-factory-destination": "^1.0.0",
+        "micromark-factory-label": "^1.0.0",
+        "micromark-factory-space": "^1.0.0",
+        "micromark-factory-title": "^1.0.0",
+        "micromark-factory-whitespace": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-chunked": "^1.0.0",
+        "micromark-util-classify-character": "^1.0.0",
+        "micromark-util-html-tag-name": "^1.0.0",
+        "micromark-util-normalize-identifier": "^1.0.0",
+        "micromark-util-resolve-all": "^1.0.0",
+        "micromark-util-subtokenize": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.1",
+        "uvu": "^0.5.0"
+      }
+    },
+    "node_modules/micromark-factory-destination": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-1.1.0.tgz",
+      "integrity": "sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-1.1.0.tgz",
+      "integrity": "sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0",
+        "uvu": "^0.5.0"
+      }
+    },
+    "node_modules/micromark-factory-space": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-1.1.0.tgz",
+      "integrity": "sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-1.1.0.tgz",
+      "integrity": "sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-factory-space": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-1.1.0.tgz",
+      "integrity": "sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-factory-space": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-1.2.0.tgz",
+      "integrity": "sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-chunked": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-1.1.0.tgz",
+      "integrity": "sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-classify-character": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-1.1.0.tgz",
+      "integrity": "sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-combine-extensions": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-1.1.0.tgz",
+      "integrity": "sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-chunked": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.1.0.tgz",
+      "integrity": "sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^1.0.0"
+      }
+    },
+
+    "node_modules/micromark-util-decode-string": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-1.1.0.tgz",
+      "integrity": "sha512-YphLGCK8gM1tG1bd54azwyrQRjCFcmgj2S2GoJDNnh4vYtnL38JS8M4gpxzOPNyHdNEpheyWXCTnnTDY3N+NVQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-decode-numeric-character-reference": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0"
+      }
+
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-1.1.0.tgz",
+      "integrity": "sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.2.0.tgz",
+      "integrity": "sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+
+    },
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-1.1.0.tgz",
+      "integrity": "sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-resolve-all": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-1.1.0.tgz",
+      "integrity": "sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.2.0.tgz",
+      "integrity": "sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-encode": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-subtokenize": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-1.1.0.tgz",
+      "integrity": "sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-chunked": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0",
+        "uvu": "^0.5.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-1.1.0.tgz",
+      "integrity": "sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+
+    },
+    "node_modules/micromark-util-types": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-1.1.0.tgz",
+      "integrity": "sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
     "node_modules/micromatch": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
@@ -4110,11 +5260,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/mri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/nanoid": {
       "version": "3.3.1",
@@ -4211,6 +5368,11 @@
       "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
       "dev": true
     },
+    "node_modules/non-layered-tidy-tree-layout": {
+      "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=="
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -4771,6 +5933,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -4794,6 +5961,22 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
+    "node_modules/sade": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+      "dependencies": {
+        "mri": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/safe-array-concat": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz",
@@ -4843,8 +6026,7 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/saxes": {
       "version": "5.0.1",
@@ -5118,11 +6300,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
+      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -5312,6 +6498,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/ts-dedent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
+      "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==",
+      "engines": {
+        "node": ">=6.10"
+      }
+    },
     "node_modules/ts-loader": {
       "version": "9.4.1",
       "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.4.1.tgz",
@@ -5468,6 +6662,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/unist-util-stringify-position": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz",
+      "integrity": "sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==",
+      "dependencies": {
+        "@types/unist": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unzipper": {
       "version": "0.10.11",
       "resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.10.11.tgz",
@@ -5562,6 +6768,35 @@
         "node": ">= 4"
       }
     },
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/uvu": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz",
+      "integrity": "sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==",
+      "dependencies": {
+        "dequal": "^2.0.0",
+        "diff": "^5.0.0",
+        "kleur": "^4.0.3",
+        "sade": "^1.7.3"
+      },
+      "bin": {
+        "uvu": "bin.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -5597,6 +6832,11 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/web-worker": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.3.0.tgz",
+      "integrity": "sha512-BSR9wyRsy/KOValMgd5kMyr3JzpdeoR9KVId8u5GVlTTAtNChlsE4yTxeY7zMdNSyOmoKBv8NH2qeRY9Tg+IaA=="
+    },
     "node_modules/webidl-conversions": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
diff --git a/package.json b/package.json
index 722d016..d30832e 100644
--- a/package.json
+++ b/package.json
@@ -125,6 +125,7 @@
   },
   "devDependencies": {
     "@asyncapi/react-component": "^1.2.7",
+    "@types/ejs": "^3.1.5",
     "@types/glob": "^7.2.0",
     "@types/js-yaml": "^4.0.5",
     "@types/mocha": "^9.1.1",
@@ -146,7 +147,9 @@
   },
   "dependencies": {
     "@asyncapi/parser": "^3.0.7",
+    "ejs": "^3.1.9",
+    "markdown-it": "^14.0.0",
+    "mermaid": "^10.8.0"
     "@types/markdown-it": "^13.0.7",
-    "markdown-it": "^14.0.0"
   }
 }
diff --git a/src/Asyncapi.ts b/src/Asyncapi.ts
new file mode 100644
index 0000000..bacef3b
--- /dev/null
+++ b/src/Asyncapi.ts
@@ -0,0 +1,661 @@
+import {AsyncAPIDocumentInterface, SchemaV2 as SchemaModel } from '@asyncapi/parser';
+import * as vscode from 'vscode';
+import * as ejs from 'ejs';
+import * as path from 'path';
+import * as Markdownit from 'markdown-it';
+import { Server } from 'http';
+import { sample } from 'openapi-sampler';
+
+const md = Markdownit('commonmark');
+
+
+const extRenderType = 'x-schema-private-render-type';
+const extRenderAdditionalInfo = 'x-schema-private-render-additional-info';
+const extRawValue = 'x-schema-private-raw-value';
+const extParameterLocation = 'x-schema-private-parameter-location';
+const jsonSchemaTypes: string[] = [
+  'string',
+  'number',
+  'integer',
+  'boolean',
+  'array',
+  'object',
+  'null',
+];
+
+const RESTRICTED_ANY = 'restricted any';
+const NEVER = 'never';
+const UNKNOWN = 'unknown';
+const ANY = 'any';
+const jsonSchemaKeywordTypes = {
+  maxLength: 'string',
+  minLength: 'string',
+  pattern: 'string',
+  contentMediaType: 'string',
+  contentEncoding: 'string',
+  multipleOf: 'number',
+  maximum: 'number',
+  exclusiveMaximum: 'number',
+  minimum: 'number',
+  exclusiveMinimum: 'number',
+  items: 'array',
+  maxItems: 'array',
+  minItems: 'array',
+  uniqueItems: 'array',
+  contains: 'array',
+  additionalItems: 'array',
+  maxProperties: 'object',
+  minProperties: 'object',
+  required: 'object',
+  properties: 'object',
+  patternProperties: 'object',
+  propertyNames: 'object',
+  dependencies: 'object',
+  additionalProperties: 'object',
+};
+
+class SchemaHelper {
+
+  static toSchemaType(schema: { json: () => boolean; isBooleanSchema: () => any; not: () => any; }):any {
+    if (!schema || typeof schema.json !== 'function') {
+      return UNKNOWN;
+    }
+    if (schema.isBooleanSchema()) {
+      if (schema.json() === true) {
+        return ANY;
+      } 
+      return NEVER;
+    }
+    // handle case with `{}` schemas
+    if (Object.keys(schema.json()).length === 0) {
+      return ANY;
+    }
+    // handle case with `{ not: {}, ... }` schemas
+    const not = schema.not();
+    if (not && this.inferType(not) === ANY) {
+      return NEVER;
+    }
+
+    let type = this.inferType(schema);
+    if (Array.isArray(type)) {
+      return type.map(t => this.toType(t, schema)).join(' | ');
+    }
+    type = this.toType(type, schema);
+    const combinedType = this.toCombinedType(schema);
+
+    if (type && combinedType) {
+      return `${type} ${combinedType}`;
+    }
+    if (combinedType) {
+      return combinedType;
+    }
+    return type;
+  }
+
+  static toType(type: string, schema: { json?: () => boolean; isBooleanSchema?: () => any; not?: () => any; items?: any; additionalItems?: any; }) {
+    if (type === 'array') {
+      const items = schema.items();
+      if (Array.isArray(items)) {
+        const types = items.map(item => this.toSchemaType(item)).join(', ');
+        const additionalItems = schema.additionalItems();
+        if (additionalItems === true) {
+          return `tuple<${types || UNKNOWN}, ...optional<${ANY}>>`;
+        }
+        if (additionalItems === false) {
+          return `tuple<${types}>`;
+        }
+        const additionalType = this.toSchemaType(additionalItems);
+        return `tuple<${types || UNKNOWN}, ...optional<${additionalType}>>`;
+      }
+      if (!items) {
+        return `array<${ANY}>`;
+      }
+      return `array<${this.toSchemaType(items) || UNKNOWN}>`;
+    }
+    return type;
+  }
+
+  static toCombinedType(schema: { json?: () => boolean; isBooleanSchema?: () => any; not?: () => any; oneOf?: any; anyOf?: any; allOf?: any; }) {
+    const t = [];
+    if (schema.oneOf()) {
+      t.push('oneOf');
+    }
+    if (schema.anyOf()) {
+      t.push('anyOf');
+    }
+    if (schema.allOf()) {
+      t.push('allOf');
+    }
+    if (t.length === 0 || t.length > 1) {
+      return undefined;
+    }
+    return t[0];
+  }
+
+  static inferType(schema: { json: any; isBooleanSchema?: (() => any) | (() => any) | undefined; not?: (() => any) | (() => any) | undefined; type?: any; const?: any; enum?: any; oneOf?: any; anyOf?: any; allOf?: any; }) {
+    let types = schema.type();
+
+    if (types !== undefined) {
+      if (Array.isArray(types)) {
+        // if types have `integer` and `number` types, `integer` is unnecessary
+        if (types.includes('integer') && types.includes('number')) {
+          types = types.filter(t => t !== 'integer');
+        }
+        return types.length === 1 ? types[0] : types;
+      }
+      return types;
+    }
+
+    const constValue = schema.const();
+    if (constValue !== undefined) {
+      const typeOf = typeof constValue;
+      if (typeOf === 'number' && Number.isInteger(constValue)) {
+        return 'integer';
+      }
+      return typeOf;
+    }
+    const enumValue = schema.enum();
+    if (Array.isArray(enumValue) && enumValue.length) {
+      const inferredType = Array.from(new Set(enumValue.map(e => {
+        const typeOf = typeof e;
+        if (typeOf === 'number' && Number.isInteger(e)) {
+          return 'integer';
+        }
+        return typeOf;
+      })));
+      return inferredType.length === 1 ? inferredType[0] : inferredType;
+    }
+
+    const schemaKeys = Object.keys(schema.json() || {}) || [];
+    const hasInferredTypes = Object.keys(jsonSchemaKeywordTypes).some(key =>
+      schemaKeys.includes(key),
+    );
+    if (hasInferredTypes === true) {
+      return '';
+    }
+    if (this.toCombinedType(schema)) {
+      return '';
+    }
+    return ANY;
+  }
+
+  static prettifyValue(value: { toString: () => any; }) {
+    const typeOf = typeof value;
+    if (typeOf === 'string') {
+      return `"${value}"`;
+    }
+    if (typeOf === 'number' || typeOf === 'bigint' || typeOf === 'boolean') {
+      return value;
+    }
+    if (Array.isArray(value)) {
+      return `[${value.toString()}]`;
+    }
+    return JSON.stringify(value);
+  }
+
+  static humanizeConstraints(schema: { minimum: () => undefined; exclusiveMinimum: () => undefined; maximum: () => undefined; exclusiveMaximum: () => undefined; multipleOf: () => { toString: (arg0: number) => any; } | undefined; minLength: () => number | undefined; maxLength: () => undefined; uniqueItems: () => any; minItems: () => number | undefined; maxItems: () => undefined; minProperties: () => number | undefined; maxProperties: () => undefined; }) {
+    const constraints = [];
+
+    // related to number/integer
+    const numberRange = this.humanizeNumberRangeConstraint(
+      schema.minimum(),
+      schema.exclusiveMinimum(),
+      schema.maximum(),
+      schema.exclusiveMaximum(),
+    );
+    if (numberRange !== undefined) {
+      constraints.push(numberRange);
+    }
+    const multipleOfConstraint = this.humanizeMultipleOfConstraint(
+      schema.multipleOf(),
+    );
+    if (multipleOfConstraint !== undefined) {
+      constraints.push(multipleOfConstraint);
+    }
+
+    // related to string
+    const stringRange = this.humanizeRangeConstraint(
+      'characters',
+      schema.minLength(),
+      schema.maxLength(),
+    );
+    if (stringRange !== undefined) {
+      constraints.push(stringRange);
+    }
+
+    // related to array
+    const hasUniqueItems = schema.uniqueItems();
+    const arrayRange = this.humanizeRangeConstraint(
+      hasUniqueItems ? 'unique items' : 'items',
+      schema.minItems(),
+      schema.maxItems(),
+    );
+    if (arrayRange !== undefined) {
+      constraints.push(arrayRange);
+    }
+
+    // related to object
+    const objectRange = this.humanizeRangeConstraint(
+      'properties',
+      schema.minProperties(),
+      schema.maxProperties(),
+    );
+    if (objectRange !== undefined) {
+      constraints.push(objectRange);
+    }
+
+    return constraints;
+  }
+
+  static humanizeNumberRangeConstraint(
+    min: undefined,
+    exclusiveMin: undefined,
+    max: undefined,
+    exclusiveMax: undefined,
+  ) {
+    const hasExclusiveMin = exclusiveMin !== undefined;
+    const hasMin = min !== undefined || hasExclusiveMin;
+    const hasExclusiveMax = exclusiveMax !== undefined;
+    const hasMax = max !== undefined || hasExclusiveMax;
+
+    let numberRange;
+    if (hasMin && hasMax) {
+      numberRange = hasExclusiveMin ? '( ' : '[ ';
+      numberRange += hasExclusiveMin ? exclusiveMin : min;
+      numberRange += ' .. ';
+      numberRange += hasExclusiveMax ? exclusiveMax : max;
+      numberRange += hasExclusiveMax ? ' )' : ' ]';
+    } else if (hasMin) {
+      numberRange = hasExclusiveMin ? '> ' : '>= ';
+      numberRange += hasExclusiveMin ? exclusiveMin : min;
+    } else if (hasMax) {
+      numberRange = hasExclusiveMax ? '< ' : '<= ';
+      numberRange += hasExclusiveMax ? exclusiveMax : max;
+    }
+    return numberRange;
+  }
+
+  static humanizeMultipleOfConstraint(
+    multipleOf: { toString: (arg0: number) => any; } | undefined,
+  ) {
+    if (multipleOf === undefined) {
+      return;
+    }
+    const strigifiedMultipleOf = multipleOf.toString(10);
+    if (!(/^0\.0*1$/).test(strigifiedMultipleOf)) {
+      return `multiple of ${strigifiedMultipleOf}`;
+    }
+    return `decimal places <= ${strigifiedMultipleOf.split('.')[1].length}`;
+  }
+
+  static humanizeRangeConstraint(
+    description: any,
+    min: number | undefined,
+    max: undefined,
+  ) {
+    let stringRange;
+    if (min !== undefined && max !== undefined) {
+      if (min === max) {
+        stringRange = `${min} ${description}`;
+      } else {
+        stringRange = `[ ${min} .. ${max} ] ${description}`;
+      }
+    } else if (max !== undefined) {
+      stringRange = `<= ${max} ${description}`;
+    } else if (min !== undefined) {
+      if (min === 1) {
+        stringRange = 'non-empty';
+      } else {
+        stringRange = `>= ${min} ${description}`;
+      }
+    }
+    return stringRange;
+  }
+
+  static getDependentRequired(propertyName: string, schema: { dependencies: () => any; }) {
+    const dependentRequired = [];
+    const dependencies = schema.dependencies();
+    if (!dependencies) {
+      return;
+    }
+
+    for (const [prop, array] of Object.entries(dependencies)) {
+      if (Array.isArray(array) && array.includes(propertyName)) {
+        dependentRequired.push(prop);
+      }
+    }
+    return dependentRequired.length ? dependentRequired : undefined;
+  }
+
+  static getDependentSchemas(schema: { dependencies: () => any; }) {
+    const dependencies = schema.dependencies();
+    if (!dependencies) {
+      return;
+    }
+
+    const records:any = {};
+    for (const [prop, propSchema] of Object.entries(dependencies)) {
+      if (typeof propSchema === 'object' && !Array.isArray(propSchema)) {
+        records[String(prop)] = propSchema;
+      }
+    }
+    if (!Object.keys(records).length) {
+      return undefined;
+    }
+
+    const json:object = {
+      type: 'object',
+      properties: Object.entries(records).reduce(
+        (obj:any, [propertyName, propertySchema]:any[]) => {
+          obj[String(propertyName)] = Object.assign({}, propertySchema.json());
+          return obj;
+        },
+        {},
+      ),
+      [extRenderType]: false,
+      [extRenderAdditionalInfo]: false,
+    };
+    return new SchemaModel(json);
+  }
+  
+  static parametersToSchema(parameters: any[]) {
+    if (parameters.length === 0) {
+      return;
+    }
+
+    const json:object = {
+      type: 'object',
+      properties: parameters.reduce(
+        (obj, parameter) => {
+          const parameterName = parameter.id();
+          obj[String(parameterName)] = Object.assign({}, parameter.schema() === undefined ? {type: 'string'} : parameter.schema().json());
+          obj[String(parameterName)].description =
+            parameter.description() || obj[String(parameterName)].description;
+          obj[String(parameterName)][extParameterLocation] = parameter.location();
+          return obj;
+        },
+        {},
+      ),
+      required: parameters.map(parameter => parameter.id()),
+      [extRenderType]: false,
+      [extRenderAdditionalInfo]: false,
+    };
+    return new SchemaModel(json);
+  }
+  static jsonFieldToSchema(value: any): object {
+    if (value === undefined || value === null) {
+      return {
+        type: 'string',
+        const: value === undefined ? '' : 'NULL',
+        [extRawValue]: true,
+        [extRenderType]: false,
+      };
+    }
+    if (typeof value !== 'object') {
+      const str =
+        typeof value.toString === 'function' ? value.toString() : value;
+      return {
+        type: 'string',
+        const: str,
+        [extRawValue]: true,
+        [extRenderType]: false,
+      };
+    }
+    if (this.isJSONSchema(value)) {
+      return value;
+    }
+    if (Array.isArray(value)) {
+      return {
+        type: 'array',
+        items: value.map(v => this.jsonFieldToSchema(v)),
+        [extRenderType]: false,
+        [extRenderAdditionalInfo]: false,
+      };
+    }
+    return {
+      type: 'object',
+      properties: Object.entries(value).reduce((obj:any, [k, v]) => {
+        obj[String(k)] = this.jsonFieldToSchema(v);
+        return obj;
+      }, {}),
+      [extRenderType]: false,
+      [extRenderAdditionalInfo]: false,
+    };
+  }
+
+  static jsonToSchema(value: any): SchemaModel {
+    if (value && typeof value.json === 'function') {
+      value = value.json();
+    }
+    const json = this.jsonFieldToSchema(value) as object;
+    return new SchemaModel(json);
+  }
+
+  private static isJSONSchema(value: any): boolean {
+    if (
+      value &&
+      typeof value === 'object' &&
+      (jsonSchemaTypes.includes(value.type) ||
+        (Array.isArray(value.type) &&
+          value.type.some((t: string) => !jsonSchemaTypes.includes(t))))
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  static getCustomExtensions(item: any): Record<string, any> {
+    try {
+      const extensions = item.extensions().all();
+      return extensions.reduce((acc: { [x: string]: any; }, ext: { id: () => any; value: () => any; }) => {
+        const extName = ext.id();
+        if (
+          !extName.startsWith('x-parser-') &&
+          !extName.startsWith('x-schema-private-')
+        ) {
+          acc[String(extName)] = ext.value();
+        }
+        return acc;
+      }, {});
+    } catch (err) {
+      return {};
+    }
+  }
+}
+
+class ServerHelper {
+  static securityType(value: string) {
+    switch (value) {
+    case 'apiKey':
+      return 'API key';
+    case 'oauth2':
+      return 'OAuth2';
+    case 'openIdConnect':
+      return 'Open ID';
+    case 'http':
+      return 'HTTP';
+    case 'userPassword':
+      return 'User/Password';
+    case 'X509':
+      return 'X509';
+    case 'symmetricEncryption':
+      return 'Symmetric Encription';
+    case 'asymmetricEncryption':
+      return 'Asymmetric Encription';
+    case 'httpApiKey':
+      return 'HTTP API key';
+    case 'scramSha256':
+      return 'ScramSha256';
+    case 'scramSha512':
+      return 'ScramSha512';
+    case 'gssapi':
+      return 'GSSAPI';
+    case 'plain':
+      return 'PLAIN';
+    default:
+      return 'API key';
+    }
+  }
+
+  static flowName(value: string) {
+    switch (value) {
+    case 'implicit':
+      return 'Implicit';
+    case 'password':
+      return 'Password';
+    case 'clientCredentials':
+      return 'Client credentials';
+    case 'authorizationCode':
+      return 'Authorization Code';
+    default:
+      return 'Implicit';
+    }
+  }
+
+  static getKafkaSecurity(protocol: string, securitySchema: { type: () => any; }) {
+    let securityProtocol;
+    let saslMechanism;
+    if (protocol === 'kafka') {
+      if (securitySchema) {
+        securityProtocol = 'SASL_PLAINTEXT';
+      } else {
+        securityProtocol = 'PLAINTEXT';
+      }
+    } else if (securitySchema) {
+      securityProtocol = 'SASL_SSL';
+    } else {
+      securityProtocol = 'SSL';
+    }
+    if (securitySchema) {
+      switch (securitySchema.type()) {
+      case 'plain':
+        saslMechanism = 'PLAIN';
+        break;
+      case 'scramSha256':
+        saslMechanism = 'SCRAM-SHA-256';
+        break;
+      case 'scramSha512':
+        saslMechanism = 'SCRAM-SHA-512';
+        break;
+      case 'oauth2':
+        saslMechanism = 'OAUTHBEARER';
+        break;
+      case 'gssapi':
+        saslMechanism = 'GSSAPI';
+        break;
+      case 'X509':
+        securityProtocol = 'SSL';
+        break;
+      }
+    }
+
+    return { securityProtocol, saslMechanism };
+  }
+}
+
+class MessageHelper {
+  static getPayloadExamples(message: { examples: () => { (): any; new(): any; all: { (): any; new(): any; }; }; payload: () => any; }) {
+    const examples = message.examples().all();
+    if (Array.isArray(examples) && examples.some(e => e.payload())) {
+      const messageExamples = examples
+        .map(e => {
+          if (!e.payload()) {return;}
+          return {
+            name: e.name(),
+            summary: e.summary(),
+            example: e.payload(),
+          };
+        })
+        .filter(Boolean);
+  
+      if (messageExamples.length > 0) {
+        return messageExamples;
+      }
+    }
+  
+    const payload = message.payload();
+    if (payload?.examples()) {
+      return payload.examples().map((example: any) => ({ example }));
+    }
+  }
+  
+  static getHeadersExamples(message: { examples: () => { (): any; new(): any; all: { (): any; new(): any; }; }; headers: () => any; }) {
+    const examples = message.examples().all();
+    if (Array.isArray(examples) && examples.some(e => e.headers())) {
+      const messageExamples = examples
+        .map(e => {
+          if (!e.headers()) {return;}
+          return {
+            name: e.name(),
+            summary: e.summary(),
+            example: e.headers(),
+          };
+        })
+        .filter(Boolean);
+  
+      if (messageExamples.length > 0) {
+        return messageExamples;
+      }
+    }
+  
+    const headers = message.headers();
+    if (headers?.examples()) {
+      return headers.examples().map((example: any) => ({ example }));
+    }
+  }
+
+  static generateExample(value: any, options: any) {
+    return JSON.stringify(sample(value, options || {}) || '', null, 2);
+  }
+}
+
+export default async function info(asyncapi:AsyncAPIDocumentInterface, context: vscode.ExtensionContext) {
+    
+    
+    const info = asyncapi.info();
+    const templatePath = path.join(context.extensionPath,'dist', 'components','Asyncapi.ejs');
+
+    return await ejs.renderFile(templatePath, {
+        info: {
+            title: info.title(),
+            version: info.version(),
+            defaultContentType: asyncapi.defaultContentType(),
+            specId: info.id(),
+            termsOfService: info.termsOfService(),
+            license: info.license(),
+            contact: info.contact(),
+            externalDocs: info.externalDocs(),
+            extensions: info.extensions(),
+            hasDescription: info.hasDescription(),
+            description: md.render(info.description() || ""),
+            tags: info.tags(),
+            
+        },
+        servers:{
+            servers: asyncapi.servers(),
+            schemaHelper: SchemaHelper,
+            serverHelper: ServerHelper,
+            md
+        },
+        operations:{
+          channels: asyncapi.channels(),
+          isV3: asyncapi.version().split('.')[0] === '3',
+          schemaHelper: SchemaHelper,
+          serverHelper: ServerHelper,
+          messageHelper: MessageHelper,
+          allServersLength: asyncapi.servers().all().length,
+          md
+        },
+        path:{
+            infoPath: path.join(context.extensionPath,'dist', 'components','Info.ejs'),
+            tagsPath: path.join(context.extensionPath,'dist', 'components','Tags.ejs'),
+            serversPath: path.join(context.extensionPath,'dist', 'components','Servers.ejs'),
+            securityPath: path.join(context.extensionPath,'dist', 'components','Security.ejs'),
+            bindingsPath: path.join(context.extensionPath,'dist', 'components','Bindings.ejs'),
+            extensionsPath: path.join(context.extensionPath,'dist', 'components','Extensions.ejs'),
+            schemaPath: path.join(context.extensionPath,'dist', 'components','Schema.ejs'),
+            operationsPath: path.join(context.extensionPath,'dist', 'components','Operations.ejs'),
+            messagePath: path.join(context.extensionPath,'dist', 'components','Message.ejs')
+        }
+    });
+}  
\ No newline at end of file
diff --git a/src/PreviewMarkdown.ts b/src/PreviewMarkdown.ts
index 0d002f7..fbf2805 100644
--- a/src/PreviewMarkdown.ts
+++ b/src/PreviewMarkdown.ts
@@ -1,27 +1,26 @@
 import * as vscode from 'vscode';
 import * as path from 'path';
 import { isAsyncAPIFile } from './PreviewWebPanel';
-import * as Markdownit from 'markdown-it';
+
 import { Parser, fromFile, AsyncAPIDocumentInterface } from '@asyncapi/parser';
-import Info from './components/Info';
-import MermaidDiagram from './components/MermaidDiagram';
+import Asyncapi from './Asyncapi';
+
 
-const md = Markdownit('commonmark');
 const parser = new Parser();
 
-function buildMarkdown(document:AsyncAPIDocumentInterface | undefined){
+
+async function buildMarkdown(document:AsyncAPIDocumentInterface | undefined, context: vscode.ExtensionContext){
+
 
   let content = '';
 
   if(document !== undefined){
     
-    content = `
-      ${Info(document)}
-      ${MermaidDiagram(document)}
-    `;
+    content = await Asyncapi(document, context);
   }
 
-  return md.render(content);
+  return content;
+
 }
 
 export function previewMarkdown(context: vscode.ExtensionContext) {
@@ -56,7 +55,8 @@ export async function openAsyncAPIMarkdown(context: vscode.ExtensionContext, uri
     });
 
   const { document } = await fromFile(parser, uri.fsPath).parse();   
-  let result =  buildMarkdown(document); 
+  let result =  await buildMarkdown(document, context); 
+
 
   panel.title = path.basename(uri.fsPath);
   panel.webview.html = getWebviewContent(context, panel.webview, uri, result);
@@ -93,25 +93,181 @@ function getWebviewContent(context: vscode.ExtensionContext, webview: vscode.Web
   <html>
     <head>
       <style> 
-      html{
-        scroll-behavior: smooth;
-      }
-      body {
-        color: #121212;
-        background-color: #fff;
-        word-wrap: break-word;
-      }
-      h1 {
-        color: #121212;
-      }
+        html{
+          scroll-behavior: smooth;
+        }
+        body {
+          color: #121212;
+          background-color: #efefef;
+          word-wrap: break-word;
+          margin: 0;
+          padding: 0;
+          display: flex;
+          flex-direction: column;
+          height: 100vh;
+        }
+        h1 {
+          color: #121212;
+        }
+        .container {
+          display: flex;
+          overflow-x: hidden;
+        }
+        .section {
+          flex: 0 0 100%;
+          box-sizing: border-box;
+          padding: 20px;
+          aspect-ratio:1;
+          overflow-y: auto;
+          height:calc(100vh - 60px);;
+        }
+        .button-container {
+          display: flex;
+          justify-content: center;
+          margin: 10px;
+        }
+        .button {
+          padding: 10px 20px;
+          margin: 0px 10px;
+          border-radius: .5rem;
+          color: #444;
+          font-size: 1rem;
+          font-weight: 700;
+          letter-spacing: .1rem;
+          cursor: pointer;
+          flex:1;
+          border: none;
+          outline: none;
+          transition: .2s ease-in-out;
+          box-shadow: -6px -6px 14px rgba(255, 255, 255, .7),
+                      -6px -6px 10px rgba(255, 255, 255, .5),
+                      6px 6px 8px rgba(255, 255, 255, .075),
+                      6px 6px 10px rgba(0, 0, 0, .15);
+          }
+          button:hover {
+            box-shadow: -2px -2px 6px rgba(255, 255, 255, .6),
+                        -2px -2px 4px rgba(255, 255, 255, .4),
+                        2px 2px 2px rgba(255, 255, 255, .05),
+                        2px 2px 4px rgba(0, 0, 0, .1);
+          }
+          button:active {
+            box-shadow: inset -2px -2px 6px rgba(255, 255, 255, .7),
+                        inset -2px -2px 4px rgba(255, 255, 255, .5),
+                        inset 2px 2px 2px rgba(255, 255, 255, .075),
+                        inset 2px 2px 4px rgba(0, 0, 0, .15);
+          }
+        .table-container{
+          overflow-x:auto;
+        }
+        table {
+          width: 100%;
+          border-collapse: collapse;
+          margin-top: 20px;
+        }
+        th, td {
+          padding: 12px;
+          text-align: left;
+          border-bottom: 1px solid #ddd;
+        }
+        th {
+          background-color: black;
+          color: white;
+        }
+        tr:nth-child(even) {
+          background-color: #fefefe;
+        }
+        code {
+          display: block;
+          padding: 10px;
+          background-color: #282c34;
+          color: #abb2bf;
+          border-radius: 5px;
+          margin-bottom: 20px;
+          margin-top: 20px;
+          white-space: pre-wrap;
+        }
+        blockquote {
+          border-left: 4px solid #61dafb;
+          margin: 0;
+          margin-top: 20px;
+          padding: 10px 20px;
+          background-color: #fff;
+          color: #333;
+        }
+        a {
+          text-decoration: none;
+          color: #3498db;
+          font-weight: bold;
+          transition: color 0.3s ease-in-out;
+        }
+        a:hover {
+          color: #1abc9c;
+        }
+    
+        @media screen and (max-width: 600px) {
+          table {
+            display: block;
+          }
+    
+          thead, tbody, th, td, tr {
+            display: block;
+          }
+    
+          th {
+            position: absolute;
+            top: -9999px;
+            left: -9999px;
+          }
+    
+          td {
+            border: none;
+            position: relative;
+            padding-left: 50%;
+            white-space: nowrap;
+          }
+    
+          td:before {
+            position: absolute;
+            top: 12px;
+            left: 6px;
+            width: 45%;
+            padding-right: 10px;
+            white-space: nowrap;
+            content: attr(data-th) ": ";
+            font-weight: bold;
+          }
+          code {
+            font-size: 14px;
+          }
+    
+          blockquote {
+            font-size: 16px;
+          }
+        }
       </style>
     </head>
     <body x-timestamp="${Date.now()}">
+
+      <div class="container">
+        <div class="section" id="section1">${result}</div>
+        <div class="section" id="section2">Section 2</div>
+        <div class="section" id="section3">Section 3</div>
+      </div>
+
+      <div class="button-container">
+        <button class="button" onclick="moveToSection('section1')">Markdown</button>
+        <button class="button" onclick="moveToSection('section2')">Flowchart</button>
+        <button class="button" onclick="moveToSection('section3')">Class Diagram</button>
+      </div>
+      
       
-      ${result}
       <script src="${mermaidJs}"></script>
       <script>
         mermaid.initialize({ startOnLoad: true });  
+        function moveToSection(sectionId) {
+          const sectionElement = document.getElementById(sectionId);
+          sectionElement.scrollIntoView({ behavior: 'smooth' });
+        }
       </script>
   
     </body>
diff --git a/src/components/Asyncapi.ejs b/src/components/Asyncapi.ejs
new file mode 100644
index 0000000..983bdf1
--- /dev/null
+++ b/src/components/Asyncapi.ejs
@@ -0,0 +1,3 @@
+<%- include(path.infoPath,{...info,tagsPath: path.tagsPath}) %>
+<%- include(path.serversPath,{...servers, ...path}) %>
+<%- include(path.operationsPath,{...operations, ...path}) %>
\ No newline at end of file
diff --git a/src/components/Bindings.ejs b/src/components/Bindings.ejs
new file mode 100644
index 0000000..419eb2a
--- /dev/null
+++ b/src/components/Bindings.ejs
@@ -0,0 +1,5 @@
+<% if (!bindings.isEmpty()) { %>
+    <% for(let binding of bindings.all()){ %>
+        <%- include(schemaPath,{ schemaName:`${binding.protocol().charAt(0).toUpperCase() + binding.protocol().slice(1)} ${name}`, schema: schemaHelper.jsonToSchema(binding), hideTitle: false, schemaHelper, md, path:"" }) %>
+    <% } %>    
+<%  } %>
\ No newline at end of file
diff --git a/src/components/Extensions.ejs b/src/components/Extensions.ejs
new file mode 100644
index 0000000..b678539
--- /dev/null
+++ b/src/components/Extensions.ejs
@@ -0,0 +1,3 @@
+<% if (Object.keys(schemaHelper.getCustomExtensions(extensions) || {}).length !== 0) { %>
+    <%- include(schemaPath,{ schemaName:name, schema: schemaHelper.jsonToSchema(extensions), hideTitle: false, schemaHelper, md, path:"" }) %>
+<% } %>
\ No newline at end of file
diff --git a/src/components/Info.ejs b/src/components/Info.ejs
new file mode 100644
index 0000000..a4d499c
--- /dev/null
+++ b/src/components/Info.ejs
@@ -0,0 +1,55 @@
+<h1><%= title %> <%= version %> documentation</h1>
+<% if(extensions && extensions.has('x-logo')) { %>
+    <img src="<%= (extensions.get('x-logo').value()) %>" alt=" logo" />
+<% } %>
+<ul>
+    <%  if (specId) { %>
+        <li>
+            Specification ID: <%= specId %>
+        </li>
+        <% } %>
+        <%  if (license) { %>
+            <% if (license.url()) { %>
+                <li>
+                    License: <a href="<%= license.url() %>"> <%= license.name() %> </a>
+                </li>
+            <% }else { %>
+                <li>
+                    License: <a href="#"> <%= license.name() %> </a>
+                </li>
+            <% } %>   
+        <% } %>  
+        <%  if (termsOfService) { %>
+            <li>
+                Terms of service: <%= termsOfService %>
+            </li>
+        <% } %>
+        <%  if (defaultContentType) { %>
+            <li>
+                Default content type: <a href="https://www.iana.org/assignments/media-types/<%= defaultContentType %>"> <%= defaultContentType %> </a>
+            </li>
+        <% } %>
+        <%  if (contact) { %>
+            <%  if (contact.url()) { %>
+                <li>
+                    Support: <a href="<%= contact.url() %>"> <%= contact.name() || 'Link' %> </a>
+                </li>
+            <% } %>
+            <%  if (contact.email()) { %>
+                <li>
+                    Email support: <a href="<%= contact.email() %>"> <%= contact.email() %> </a>
+                </li>
+            <% } %>
+        <% } %>
+   
+</ul>
+
+<% if(externalDocs) { %>
+    <a href="<%= externalDocs.url() %>"> <%= externalDocs.description() || 'Find more info here.' %> </a>
+<% } %>
+
+<% if(hasDescription) { %>
+      <%- description %>
+<% } %>
+
+<%- include(tagsPath,{ name:"Specification Tags", tags }) %>
\ No newline at end of file
diff --git a/src/components/Message.ejs b/src/components/Message.ejs
new file mode 100644
index 0000000..7986a83
--- /dev/null
+++ b/src/components/Message.ejs
@@ -0,0 +1,109 @@
+<% if (message) { 
+    const messageId = message.id();
+    const headers = message.headers();
+    const payload = message.payload();
+    const correlationId = message.correlationId();
+    const contentType = message.contentType();
+    const externalDocs = message.externalDocs();
+    const showInfoList = contentType || externalDocs;
+
+    let header = 'Message';
+    if (message.title()) {
+        header += ` ${message.title()}`;
+    }
+    const id = message.name() || messageId;
+    if (id) {
+        header += ` <code>${id}</code>`;
+    } %>
+
+    <h4><%- header %></h4>
+
+      <% if(message.summary()) { %>
+          <%- md.render(`*${message.summary()}*`) %>
+      <% } %>
+
+      <% if(showInfoList) { %>
+        <div>
+            <% if(messageId) { %>
+                <li>Message ID: <%= messageId %></li>
+            <% } %>
+          <% if(contentType) { %>
+            <li>
+              Content type: <%- `<a href='https://www.iana.org/assignments/media-types/${contentType}'>${contentType}</a>` %>
+            </li>
+          <% } %>
+          <% if(correlationId) { %>
+            <ul>
+              <li>
+                Correlation ID: <%= correlationId.location() %>
+              </li>
+              <% if(correlationId.hasDescription()) { %>
+                  <br />
+                  <%- md.render(correlationId.description()) %>
+              <% } %>
+            </ul>
+          <% } %>
+        </div>
+    <% } %>
+    <% if(message.hasDescription()) { %>
+        <%- md.render(message.description()) %>
+    <% } %>
+  
+    <% if(externalDocs) { %> 
+        <a href='<%= externalDocs.url() %>'>
+            <%- md.render(externalDocs.description() || 'Find more info here.') %>
+        </a>
+    <% } %>
+  
+    <% if(headers) { %>
+        <h5>Headers</h5>
+        <%- include(schemaPath,{schema:headers,schemaName:"", hideTitle:true, schemaHelper, md, path:""}) %>
+        <% const ex = messageHelper.getHeadersExamples(message);
+        if (ex) { %>
+            <blockquote>Examples of headers</blockquote>
+            <% if (ex.length !== 0) {
+                    examples.map((e, idx) => { %>
+                    <p><%= e.name && e.name %></p>
+                    <%- e.summary && md.render(e.summary) %>
+                    <code><%= JSON.stringify(e.example, null, 2) %></code>
+                    <% }); %>
+                <% } %>
+        <% }else {
+            const headers = message.headers();
+            if (headers) { %>
+                <blockquote>Examples of headers _generated_</blockquote>
+                <code><%- md.render(messageHelper.generateExample(headers.json())) %></code>
+            <% } %>
+        <% } %> 
+
+    <% } %>
+  
+        <% if(payload) { %>
+            <h5>Payload</h5>
+            <%- include(schemaPath,{schema:payload, schemaName:"", hideTitle:true, schemaHelper, md, path:""}) %>
+            <% const examples = messageHelper.getPayloadExamples(message);
+            if (examples) { %>
+                    <blockquote>Examples of payload</blockquote>
+                    <% if (examples.length !== 0) {
+                        examples.map((ex, idx) => { %>
+                        <p><%= ex.name && ex.name %></p>
+                        <%- ex.summary && md.render(ex.summary) %>
+                        <code><%- md.render(JSON.stringify(ex.example, null, 2)) %></code>
+                        <% }); %>
+                   <% } %>
+            <% }else { 
+                const payload = message.payload();
+                if (payload) { %>
+                    <blockquote>Examples of payload _generated_</blockquote>
+                    <code><%- md.render(messageHelper.generateExample(payload.json())) %></code>
+                <% } %>
+    
+            <% } %>
+
+        <% } %>
+  
+        <%- include(bindingsPath,{name:"Message specific information", bindings:message.bindings(), schemaHelper, schemaPath}) %>
+        <%- include(extensionsPath,{name:"Message extensions", extensions:message.extensions(), schemaHelper, schemaPath}) %>
+        <%- include(tagsPath,{name:"Message tags", tags:message.tags()}) %>
+<% } %>
+
diff --git a/src/components/Operations.ejs b/src/components/Operations.ejs
new file mode 100644
index 0000000..fc7c6b7
--- /dev/null
+++ b/src/components/Operations.ejs
@@ -0,0 +1,125 @@
+<% if(!channels.isEmpty()) { %>
+    <h2>Operations</h2>
+    <% for(let channel of channels.all()) { %>
+        <% for(let operation of  channel.operations().all()) { %>
+            <% if(operation && channel) { %>
+                <% let type; 
+                   const applyToAllServers = allServersLength === channel.servers().all().length;
+                   const servers = applyToAllServers ? [] : channel.servers().all(); 
+                   const showInfoList = operation.operationId() || (servers && servers.length);
+                 if (operation.isSend()) { 
+                     if (operation.reply() !== undefined) { 
+                     type = 'request'; 
+                     } else { 
+                     type = 'send'; 
+                     } 
+                 } else if (operation.isReceive()) { 
+                     if (operation.reply() !== undefined) { 
+                     type = 'reply';
+                     } else { 
+                     type = 'receive'; 
+                     } 
+                 } %>
+                <%-  md.render(`${getRenderedTypeForOperation({type})} \`${channel.address()}\` Operation`) %>
+                <% if(operation.summary()) { %>
+                    <%- md.render(`*${operation.summary().trim()}*`) %> 
+                <% } %>
+                <% if(showInfoList) { %>
+                    <ul>
+                        <% if(operation.operationId()) { %>
+                            <li>Operation ID: <%= operation.operationId() %></li>
+                            <% if(servers && servers.length) { %>
+                                <li>Available Only on Server:
+                                     <%= servers.map(s => {
+                                        const serverId = s.id();
+                                        const slug = FormatHelpers.slugify(serverId);
+                                        return `[${serverId}](#${slug}-server)`;
+                                        }).join(', ') %>
+                                </li>
+                            <% } %>
+                        <% } %>
+                    </ul>
+                <% } %>
+                <% if(channel.hasDescription()) { %>
+                    <%- md.render(channel.description()) %>
+                <% } %>
+                <% if(operation.hasDescription()) { %>
+                    <%- md.render(operation.description()) %>
+                <% } %>
+                <% if(operation.externalDocs()) { %>
+                      <a href={operation.externalDocs().url()}><%= (operation.externalDocs().description() || 'Find more info here.') %></a>
+                <% } %>
+
+                <%- include(tagsPath,{ name:"Operation tags", tags: operation.tags() }) %>
+
+                <% const parameters = schemaHelper.parametersToSchema(channel.parameters().all()); %>
+                <% if(parameters) { %>
+                    <h4>Parameters</h4>
+                    <%- include(schemaPath,{ schema: parameters, schemaName: "Parameters", hideTitle: true, schemaHelper, md, path:"" }) %>
+                <% } %>
+
+                <%- include(securityPath,{ header:'Additional security requirements', protocol: null, security: operation.security(), serverHelper, md }) %>
+
+
+                <%- include(bindingsPath,{ name:"Channel specific information", bindings: channel.bindings(), schemaHelper, schemaPath, md }) %>
+                <%- include(bindingsPath,{ name:"Operation specific information", bindings: operation.bindings(), schemaHelper, schemaPath, md  }) %>
+                <%- include(extensionsPath,{ name:"Channel extensions", extensions: channel.extensions(), schemaHelper, schemaPath, md  }) %>
+                <%- include(extensionsPath,{ name:"Operation extensions", extensions: operation.extensions(), schemaHelper, schemaPath, md  }) %>
+
+
+                <% const messages = operation.messages().all(); %>
+                <% if (messages.length !== 0) { %>
+                    <% const messageText = getOperationMessageText({type}); %>
+                    <% if(messages.length > 1) { %>
+                        <p><%- md.render(messageText) %></p>
+                    <% } %>
+                    <% for(let message of messages) { %>
+                        <%- include(messagePath,{message, bindingsPath, extensionsPath, schemaHelper, schemaPath, md, messageHelper}) %>
+                    <% } %>
+                <% } %>
+
+            <% } %>
+        <% } %>    
+    <% } %>
+<% } %>
+
+
+
+<% function getRenderedTypeForOperation({type}) { 
+   if (isV3) { 
+       switch (type) { 
+       case 'request': 
+        return 'REQUEST';
+       case 'send': 
+        return 'SEND'; 
+       case 'reply': 
+        return 'REPLY'; 
+       case 'receive': 
+        return 'RECEIVE'; 
+       } 
+     } 
+     switch (type) {
+     case 'send':  
+      return 'SUB'; 
+     case 'receive': 
+      return 'PUB'; 
+     } 
+    
+     return 'UNKNOWN'; 
+ } 
+
+ function getOperationMessageText({type}) {
+  let messagesText = 'Accepts **one of** the following messages:';
+  if (isV3) {
+    if (type === 'send') {
+      messagesText = 'Sending **one of** the following messages:';
+    } else if (type === 'request') {
+      messagesText = 'Request contains **one of** the following messages:';
+    } else if (type === 'receive') {
+      messagesText = 'Receive **one of** the following messages:';
+    } else if (type === 'reply') {
+      messagesText = 'Request contains **one of** the following messages:';
+    }
+  }
+  return messagesText;
+ } %>
\ No newline at end of file
diff --git a/src/components/Schema.ejs b/src/components/Schema.ejs
new file mode 100644
index 0000000..8b9f2a0
--- /dev/null
+++ b/src/components/Schema.ejs
@@ -0,0 +1,421 @@
+<% if(schemaName && hideTitle === false ) { %>
+    <h4><%= schemaName %></h4>
+<% } %>
+<div class="table-container">
+<Table>
+  <thead>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Description</th>
+        <th>Value</th>
+        <th>Constraints</th>
+        <th>Notes</th>
+    </tr>
+  </thead>
+  <tbody>
+    <% if ( schema && !(schemaName.indexOf('x-parser-')> -1 || schemaName.indexOf('x-schema-private-') > -1) ) {
+        const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(schema, schemaName, 'root'); %>
+          <tr>
+              <td data-th="Name"><%- (renderedName || '-') %> </td>
+              <td data-th="Type"><%- (schemaType || '-') %></td>
+              <td data-th="Description"><%- (md.render(description) || '-') %></td>
+              <td data-th="Value"><%- (values || '-') %></td>
+              <td data-th="Constraints"><%- (constraints || '-') %></td>
+              <td data-th="Notes"><%- (notes || '-') %></td>
+          </tr>
+          <% const dependentSchemas = schemaHelper.getDependentSchemas(schema);
+          const extensions = schemaHelper.getCustomExtensions(schema);
+          const extensionsSchema = (extensions || Object.keys(extensions).length)? schemaHelper.jsonToSchema(extensions) : null;
+          const properties = schema.properties() || {};
+          if (Object.keys(properties)) { 
+            const required = schema.required() || [];
+            const patternProperties = schema.patternProperties() || {}; 
+            for(let [propertyName, property] of Object.entries(properties) ) { %>
+                <% if ( property && !(propertyName.indexOf('x-parser-')> -1 || propertyName.indexOf('x-schema-private-') > -1) ) {
+                    const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(property, propertyName, required.includes(propertyName), schemaHelper.getDependentRequired(propertyName,schema), buildPath((path || schemaName), propertyName)); %>
+                    <tr>
+                        <td data-th="Name"><%- (renderedName || '-') %> </td>
+                        <td data-th="Type"><%- (schemaType || '-') %></td>
+                        <td data-th="Description"><%- (md.render(description) || '-') %></td>
+                        <td data-th="Value"><%- (values || '-') %></td>
+                        <td data-th="Constraints"><%- (constraints || '-') %></td>
+                        <td data-th="Notes"><%- (notes || '-') %></td>
+                    </tr>
+                    <% } %>
+            <% } %>
+            <% for(let [propertyName, property] of Object.entries(patternProperties) ) { %>
+                <% if ( property && !(propertyName.indexOf('x-parser-')> -1 || propertyName.indexOf('x-schema-private-') > -1) ) {
+                    const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(property, propertyName, false, [], buildPath((path || schemaName), propertyName), 'pattern property'); %>
+                    <tr>
+                        <td data-th="Name"><%- (renderedName || '-') %> </td>
+                        <td data-th="Type"><%- (schemaType || '-') %></td>
+                        <td data-th="Description"><%- (md.render(description) || '-') %></td>
+                        <td data-th="Value"><%- (values || '-') %></td>
+                        <td data-th="Constraints"><%- (constraints || '-') %></td>
+                        <td><%- (notes || '-') %></td>
+                    </tr>
+                <% } %>
+            <% } %>
+
+            <% const type = schema.type();
+            const types = Array.isArray(type) ? type : [type];
+            if (!(type !== undefined && !types.includes('array'))) { 
+              const items = schema.items();
+              if (items && !Array.isArray(items) && Object.keys(items.properties() || {}).length) {
+                const properties = items.properties() || {};
+                if (Object.keys(properties)) { 
+                  const required = items.required() || [];
+                  const patternProperties = items.patternProperties() || {}; 
+                  for(let [propertyName, property] of Object.entries(properties) ) { %>
+                      <% if ( property && !(propertyName.indexOf('x-parser-')> -1 || propertyName.indexOf('x-schema-private-') > -1) ) {
+                          const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(property, propertyName, required.includes(propertyName), schemaHelper.getDependentRequired(propertyName,items), buildPath((path || ""), propertyName)); %>
+                          <tr>
+                              <td data-th="Name"><%- (renderedName || '-') %> </td>
+                              <td data-th="Type"><%- (schemaType || '-') %></td>
+                              <td data-th="Description"><%- (md.render(description) || '-') %></td>
+                              <td data-th="Value"><%- (values || '-') %></td>
+                              <td data-th="Constraints"><%- (constraints || '-') %></td>
+                              <td data-th="Notes"><%- (notes || '-') %></td>
+                          </tr>
+                          <% } %>
+                  <% } %>
+                  <% for(let [propertyName, property] of Object.entries(patternProperties) ) { %>
+                      <% if ( property && !(propertyName.indexOf('x-parser-')> -1 || propertyName.indexOf('x-schema-private-') > -1) ) {
+                          const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(property, propertyName, false, [], path, 'Single Item'); %>
+                          <tr>
+                              <td data-th="Name"><%- (renderedName || '-') %> </td>
+                              <td data-th="Type"><%- (schemaType || '-') %></td>
+                              <td data-th="Description"><%- (md.render(description) || '-') %></td>
+                              <td data-th="Value"><%- (values || '-') %></td>
+                              <td data-th="Constraints"><%- (constraints || '-') %></td>
+                              <td data-th="Notes"><%- (notes || '-') %></td>
+                          </tr>
+                      <% } %>
+                  <% } %>
+                  <% } %>
+              <% } else if (Array.isArray(items)) { %>
+
+                <% items.map((item, idx) => {
+                   if ( item ) {
+                          const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(item, "", false, [], buildPath(path || "", idx), 'index'); %>
+                          <tr>
+                              <td data-th="Name"><%- (renderedName || '-') %> </td>
+                              <td data-th="Type"><%- (schemaType || '-') %></td>
+                              <td data-th="Description"><%- (md.render(description) || '-') %></td>
+                              <td data-th="Value"><%- (values || '-') %></td>
+                              <td data-th="Constraints"><%- (constraints || '-') %></td>
+                              <td data-th="Notes"><%- (notes || '-') %></td>
+                          </tr>
+                      <% } %>
+                  <% }) %>
+            
+              <% }else { %>
+                <% if ( items ) {
+                          const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(items, "", false, [], path, 'Single Item'); %>
+                          <tr>
+                              <td data-th="Name"><%- (renderedName || '-') %> </td>
+                              <td data-th="Type"><%- (schemaType || '-') %></td>
+                              <td data-th="Description"><%- (md.render(description) || '-') %></td>
+                              <td data-th="Value"><%- (values || '-') %></td>
+                              <td data-th="Constraints"><%- (constraints || '-') %></td>
+                              <td data-th="Notes"><%- (notes || '-') %></td>
+                          </tr>
+                <% } %>
+              <% } %>
+              
+            <% } %>
+
+          <% } %> 
+          <% schema.oneOf() && schema.oneOf().map((s, idx) => { 
+             if ( s && !(idx.indexOf('x-parser-')> -1 || idx.indexOf('x-schema-private-') > -1) ) {
+                          const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(s, idx, false, [], buildPath(path || schemaName, idx), 'oneOf item'); %>
+                          <tr>
+                              <td data-th="Name"><%- (renderedName || '-') %> </td>
+                              <td data-th="Type"><%- (schemaType || '-') %></td>
+                              <td data-th="Description"><%- (md.render(description) || '-') %></td>
+                              <td data-th="Value"><%- (values || '-') %></td>
+                              <td data-th="Constraints"><%- (constraints || '-') %></td>
+                              <td data-th="Notes"><%- (notes || '-') %></td>
+                          </tr>
+              <% } %>
+          <% }) %>
+          <% schema.anyOf() && schema.anyOf().map((s, idx) => { 
+             if ( s && !(idx.indexOf('x-parser-')> -1 || idx.indexOf('x-schema-private-') > -1) ) {
+                          const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(s, idx, false, [], buildPath(path || schemaName, idx), 'anyOf item'); %>
+                          <tr>
+                              <td data-th="Name"><%- (renderedName || '-') %> </td>
+                              <td data-th="Type"><%- (schemaType || '-') %></td>
+                              <td data-th="Description"><%- (md.render(description) || '-') %></td>
+                              <td data-th="Value"><%- (values || '-') %></td>
+                              <td data-th="Constraints"><%- (constraints || '-') %></td>
+                              <td data-th="Notes"><%- (notes || '-') %></td>
+                          </tr>
+            <% } %>
+          <% }) %>
+          <% schema.allOf() && schema.allOf().map((s, idx) => {
+             if ( s && !(idx.indexOf('x-parser-')> -1 || idx.indexOf('x-schema-private-') > -1) ) {
+                          const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(s, idx, false, [], buildPath(path || schemaName, idx), 'allOf item'); %>
+                          <tr>
+                              <td data-th="Name"><%- (renderedName || '-') %> </td>
+                              <td data-th="Type"><%- (schemaType || '-') %></td>
+                              <td data-th="Description"><%- (md.render(description) || '-') %></td>
+                              <td data-th="Value"><%- (values || '-') %></td>
+                              <td data-th="Constraints"><%- (constraints || '-') %></td>
+                              <td data-th="Notes"><%- (notes || '-') %></td>
+                          </tr>
+            <% } %>
+          <% }) %>
+            <% if ( schema.not() ) {
+                          const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(schema.not(), "", false, [], path,'not', false); %>
+                          <tr>
+                              <td data-th="Name"><%- (renderedName || '-') %> </td>
+                              <td data-th="Type"><%- (schemaType || '-') %></td>
+                              <td data-th="Description"><%- (md.render(description) || '-') %></td>
+                              <td data-th="Value"><%- (values || '-') %></td>
+                              <td data-th="Constraints"><%- (constraints || '-') %></td>
+                              <td data-th="Notes"><%- (notes || '-') %></td>
+                          </tr>
+            <% } %>
+            <% if ( schema.propertyNames() ) {
+                          const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(schema.propertyNames(), "", false, [], path,'property names', false); %>
+                          <tr>
+                              <td data-th="Name"><%- (renderedName || '-') %> </td>
+                              <td data-th="Type"><%- (schemaType || '-') %></td>
+                              <td data-th="Description"><%- (md.render(description) || '-') %></td>
+                              <td data-th="Value"><%- (values || '-') %></td>
+                              <td data-th="Constraints"><%- (constraints || '-') %></td>
+                              <td data-th="Notes"><%- (notes || '-') %></td>
+                          </tr>
+            <% } %>
+            <% if ( schema.contains() ) {
+                          const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(schema.contains(), "", false, [], path,'contains', false); %>
+                          <tr>
+                              <td data-th="Name"><%- (renderedName || '-') %> </td>
+                              <td data-th="Type"><%- (schemaType || '-') %></td>
+                              <td data-th="Description"><%- (md.render(description) || '-') %></td>
+                              <td data-th="Value"><%- (values || '-') %></td>
+                              <td data-th="Constraints"><%- (constraints || '-') %></td>
+                              <td data-th="Notes"><%- (notes || '-') %></td>
+                          </tr>
+            <% } %>
+            <% if ( schema.if() ) {
+                          const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(schema.if(), "", false, [], path,'if', false); %>
+                          <tr>
+                              <td data-th="Name"><%- (renderedName || '-') %> </td>
+                              <td data-th="Type"><%- (schemaType || '-') %></td>
+                              <td data-th="Description"><%- (md.render(description) || '-') %></td>
+                              <td data-th="Value"><%- (values || '-') %></td>
+                              <td data-th="Constraints"><%- (constraints || '-') %></td>
+                              <td data-th="Notes"><%- (notes || '-') %></td>
+                          </tr>
+            <% } %>
+            <% if ( schema.then() ) {
+                          const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(schema.then(), "", false, [], path,'then', false); %>
+                          <tr>
+                              <td data-th="Name"><%- (renderedName || '-') %> </td>
+                              <td data-th="Type"><%- (schemaType || '-') %></td>
+                              <td data-th="Description"><%- (md.render(description) || '-') %></td>
+                              <td data-th="Value"><%- (values || '-') %></td>
+                              <td data-th="Constraints"><%- (constraints || '-') %></td>
+                              <td data-th="Notes"><%- (notes || '-') %></td>
+                          </tr>
+            <% } %>
+            <% if ( schema.else() ) {
+                          const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(schema.else(), "", false, [], path,'else', false); %>
+                          <tr>
+                              <td data-th="Name"><%- (renderedName || '-') %> </td>
+                              <td data-th="Type"><%- (schemaType || '-') %></td>
+                              <td data-th="Description"><%- (md.render(description) || '-') %></td>
+                              <td data-th="Value"><%- (values || '-') %></td>
+                              <td data-th="Constraints"><%- (constraints || '-') %></td>
+                              <td data-th="Notes"><%- (notes || '-') %></td>
+                          </tr>
+            <% } %>
+            <% if ( dependentSchemas ) {
+                          const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(dependentSchemas, "", false, [], path,'dependant schemas'); %>
+                          <tr>
+                              <td data-th="Name"><%- (renderedName || '-') %> </td>
+                              <td data-th="Type"><%- (schemaType || '-') %></td>
+                              <td data-th="Description"><%- (md.render(description) || '-') %></td>
+                              <td data-th="Value"><%- (values || '-') %></td>
+                              <td data-th="Constraints"><%- (constraints || '-') %></td>
+                              <td data-th="Notes"><%- (notes || '-') %></td>
+                          </tr>
+            <% } %>
+            <% if ( extensionsSchema ) {
+                          const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(extensionsSchema, "", false, [], path); %>
+                          <tr>
+                              <td data-th="Name"><%- (renderedName || '-') %> </td>
+                              <td data-th="Type"><%- (schemaType || '-') %></td>
+                              <td data-th="Description"><%- (md.render(description) || '-') %></td>
+                              <td data-th="Value"><%- (values || '-') %></td>
+                              <td data-th="Constraints"><%- (constraints || '-') %></td>
+                              <td data-th="Notes"><%- (notes || '-') %></td>
+                          </tr>
+            <% } %>
+            <% const ext = schema.extensions();
+              if (ext.get('x-schema-private-render-additional-info')?.value() === true) {
+                const type = schema.type();
+                const types = Array.isArray(type) ? type : [type];
+                if (!(type !== undefined && !types.includes('object'))) {
+                  const additionalProperties = schema.additionalProperties();
+                  if (!(additionalProperties === true || additionalProperties === undefined || additionalProperties === false)) {
+                     if ( additionalProperties ) {
+                        const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(additionalProperties, "", false, [], path,'additional properties', false); %>
+                        <tr>
+                            <td data-th="Name"><%- (renderedName || '-') %> </td>
+                            <td data-th="Type"><%- (schemaType || '-') %></td>
+                            <td data-th="Description"><%- (md.render(description) || '-') %></td>
+                            <td data-th="Value"><%- (values || '-') %></td>
+                            <td data-th="Constraints"><%- (constraints || '-') %></td>
+                            <td data-th="Notes"><%- (notes || '-') %></td>
+                        </tr>
+                    <% } %>
+                 <% } %>
+               <% } %>
+            <% } %>
+            <% if (ext.get('x-schema-private-render-additional-info')?.value() === true) {
+                const type = schema.type();
+                const types = Array.isArray(type) ? type : [type];
+                if (!(type !== undefined && !types.includes('array'))) {
+                  if (Array.isArray(schema.items())) {
+                    const additionalItems = schema.additionalItems();
+                    if (!(additionalItems === true || additionalItems === undefined || additionalItems === false)) {
+                       if ( additionalItems ) {
+                        const [renderedName, schemaType, description, values, constraints, notes] = schemaPropRow(additionalItems, "", false, [], path,'additional items', false); %>
+                        <tr>
+                            <td data-th="Name"> <%- (renderedName || '-') %> </td>
+                            <td data-th="Type"><%- (schemaType || '-') %></td>
+                            <td data-th="Description"><%- (md.render(description) || '-') %></td>
+                            <td data-th="Value"><%- (values || '-') %></td>
+                            <td data-th="Constraints"><%- (constraints || '-') %></td>
+                            <td data-th="Notes"><%- (notes || '-') %></td>
+                        </tr>
+                    <% } %>
+                   <% } %>
+                 <% } %>
+              <% } %>
+            <% } %>               
+                      
+<% } %>
+  </tbody>
+</Table>
+</div>
+<% function schemaPropRow( schema, schemaName, required = false, dependentRequired = [], path = '', nameNote = '',tryRenderAdditionalNotes = true) {
+    const isCircular = schema.isCircular() || false;
+    const extensions = schema.extensions();
+    const renderType = extensions.get('x-schema-private-render-type')?.value() !== false;
+    const rawValue = extensions.get('x-schema-private-raw-value')?.value() === true;
+    const name = tree(path) || schemaName;
+    const schemaType = renderType && schemaHelper.toSchemaType(schema);
+    let description = (schema.description() || '').replace(new RegExp('\S*\r?\n','g'), ' ');
+    const externalDocs = schema.externalDocs();
+    description = externalDocs ? `${!description.endsWith('.') ? `${description}.` : description} [${externalDocs.description() || 'Documentation'}](${externalDocs.url()})` : description;
+    description = description.trim();
+    const values = rawValue ? `\`${schemaHelper.prettifyValue(schema.const())}\`` : schemaValues(schema);
+    const constraints = schemaConstraints(schema);
+    const notes = schemaNotes({ schema, required, dependentRequired, isCircular, tryRenderAdditionalNotes });
+    
+    let renderedName = '';
+    if (nameNote) {
+        renderedName = name ? `${name} (${nameNote})` : `(${nameNote})`;
+    } else {
+        renderedName = name;
+    }
+    return [renderedName, schemaType, description, values, constraints, notes];        
+} 
+
+function tree(path = '') {
+  path = String(path);
+  const filteredPaths = path.split('.').filter(Boolean);
+  return filteredPaths.join('.');
+}
+
+function buildPath(path = '', field = '') {
+  console.log(path,field);
+  if (!path) return field;
+  return `${path}.${field}`;
+}
+
+function schemaValues(schema) {
+  if (!schema) return null;
+  const values = [];
+
+  if (schema.default()) values.push(`default (\`${schemaHelper.prettifyValue(schema.default())}\`)`);
+  if (schema.const()) values.push(`const (\`${schemaHelper.prettifyValue(schema.const())}\`)`);
+  if (schema.enum()) {
+    const allowed = schema.enum().map(v => `\`${schemaHelper.prettifyValue(v)}\``).join(', ');
+    values.push(`allowed (${allowed})`);
+  }
+  if (schema.examples()) {
+    const examples = schema.examples().map(v => `\`${schemaHelper.prettifyValue(v)}\``).join(', ');
+    values.push(`examples (${examples})`);
+  }
+
+  return values.join(', ');
+}
+
+function schemaConstraints(schema) {
+  if (!schema) return null;
+  const constraints = [];
+
+  if (schema.format()) constraints.push(`format (\`${schema.format()}\`)`);
+  if (schema.pattern()) constraints.push(`pattern (\`${schema.pattern()}\`)`);
+  if (schema.contentMediaType()) constraints.push(`media type (\`${schema.contentMediaType()}\`)`);
+  if (schema.contentEncoding()) constraints.push(`encoding (\`${schema.contentEncoding()}\`)`);
+
+  return constraints.concat(schemaHelper.humanizeConstraints(schema)).join(', ');
+}
+
+function schemaNotes({ schema, required = false, dependentRequired = [], isCircular = false, tryRenderAdditionalNotes }) {
+  if (!schema) return null;
+  const notes = [];
+
+  if (schema.deprecated()) notes.push('<b>deprecated</b>');
+
+  if (required) notes.push('<b>required</b>');
+  if (dependentRequired.length) {
+    const deps = dependentRequired.map(v => `\`${v}\``).join(', ');
+    notes.push(`<b>required when defined (${deps})</b>`);
+  }
+  const extensions = schema.extensions();
+  const parameterLocation = extensions.get('x-schema-private-parameter-location');
+  if (parameterLocation?.value()) {
+    notes.push(`<b>parameter location (${parameterLocation.value()})</b>`);
+  }
+
+  if (isCircular) notes.push('<b>circular</b>');
+  if (schema.writeOnly()) notes.push('<b>write-only</b>');
+  if (schema.readOnly()) notes.push('<b>read-only</b>');
+  if (extensions.get('x-schema-private-render-additional-info')?.value() !== false) {
+    const type = schema.type();
+    const types = Array.isArray(type) ? type : [type];
+    if (
+      (type === undefined && tryRenderAdditionalNotes) ||
+      types.includes('object')
+    ) {
+      const additionalProperties = schema.additionalProperties();
+      if (additionalProperties === true || additionalProperties === undefined) {
+        notes.push('<b>additional properties are allowed</b>');
+      } else if (additionalProperties === false) {
+        notes.push('<b>additional properties are NOT allowed</b>');
+      }
+    }
+    if (
+      (
+        (type === undefined && tryRenderAdditionalNotes) ||
+        types.includes('array')
+      ) && 
+      Array.isArray(schema.items())
+    ) {
+      const additionalItems = schema.additionalItems();
+      if (additionalItems === true || additionalItems === undefined) {
+        notes.push('<b>additional items are allowed</b>');
+      } else if (additionalItems === false) {
+        notes.push('<b>additional items are NOT allowed</b>');
+      }
+    }
+  }
+  return notes.join(', ');
+} %>
\ No newline at end of file
diff --git a/src/components/Security.ejs b/src/components/Security.ejs
new file mode 100644
index 0000000..53eeb15
--- /dev/null
+++ b/src/components/Security.ejs
@@ -0,0 +1,119 @@
+<% let renderedRequirements; %>
+<% if(security?.length) { %>
+    <% renderedRequirements = security.map((requirement, idx) => {return { requirement, idx }}).filter(Boolean); %>    
+<% }else if(protocol == 'kafka' || protocol == 'kafka-secure') { %>
+    <% renderedRequirements = {requirement: null}; %>
+<% } %>   
+<% if(renderedRequirements) { %>
+    <% if(security?.length && renderedRequirements.length !== 0) { %>
+        <div>
+            <h4><%= (header || "Security") %></h4>
+            <% for(let { requirement, idx } of renderedRequirements) { %>
+                <% let renderedServerSecurities; %>
+                <% if(!requirement && (protocol == 'kafka' || protocol == 'kafka-secure')) { %>
+                    <% renderedServerSecurities = {securitySchema: null}; %>
+                <% }else if(requirement) { %>
+                    <% renderedServerSecurities = requirement.all().map(requirementItem =>{return {securitySchema: requirementItem.scheme(), requiredScopes: requirementItem.scopes(), key: requirementItem.scheme().type()}} ).filter(Boolean); %>
+                <% } %> 
+                <% if(renderedServerSecurities) { %>
+                    <% if(requirement && renderedServerSecurities.length !== 0) { %>
+                        <h5>Security Requirement</h5>
+                        <% for(let {securitySchema, requiredScopes, key} of renderedServerSecurities) { 
+                             let schemas = []; 
+                             renderSecuritySchemasBasic({ securitySchema, schemas }); 
+                             renderSecuritySchemasKafka({ protocol, securitySchema, schemas }); 
+                             renderSecuritySchemasFlows({ securitySchema, requiredScopes, schemas }); 
+                             schemas.filter(Boolean); 
+                             const type = securitySchema?.type() && serverHelper.securityType(securitySchema.type()); %>
+                            <ul>
+                                <% if(type) { %>
+                                    <li>Type: <%= type %></li>
+                                <% } %>
+                                <% if(schemas.length > 0) { %>
+                                    <% for(let schema of schemas) { %>                                     
+                                        <% if(schema.split('_')[0] == 'OpenID') { %>
+                                            <li>OpenID Connect URL: <a href="<%= schema.split('_')[1] %>"><%= schema.split('_')[2] %></a></li>
+                                        <% }else if(schema.split('_')[0] == 'RequiredScopes'){ %>
+                                            <li>Required Scopes: <%= schema.split('_')[1]? schema.split('_')[1]: 'Nil' %></li>
+                                            <div class="table-container">
+                                            <Table>
+                                                <thead>
+                                                  <tr>
+                                                    <th>Flow</th>
+                                                    <th>Auth URL</th>
+                                                    <th>Token URL</th>
+                                                    <th>Refresh URL</th>
+                                                    <th>Scopes</th>
+                                                  </tr>
+                                                </thead>
+                                                <tbody>
+                                                  <% for(let entry of JSON.parse(schema.split('_')[2])){ %>
+                                                    <tr>
+                                                      <td data-th="Flow"><%= entry[0] %></td>
+                                                      <td data-th="Auth URL"><a href="<%= entry[1] %>"><%= entry[1] %></a></td>
+                                                      <td data-th="Token URL"><a href="<%= entry[2] %>"><%= entry[2] %></a></td>
+                                                      <td data-th="Refresh URL"><a href="<%= entry[3] %>"><%= entry[3] %></a></td>
+                                                      <td data-th="Scopes"><%= entry[4] %></td>
+                                                    </tr>
+                                                  <% } %>
+                                                </tbody>
+                                              </Table>
+                                              </div>
+                                        <% }else { %>
+                                            <li><%= schema %></li>
+                                        <% } %>  
+                                    <% } %>
+                                <% } %>
+                            </ul>
+                            <% if(securitySchema?.hasDescription()) { %>
+                                <%- md.render(securitySchema.description()) %>
+                            <% } %>
+                        <% } %>
+                    <% } %>
+                <% } %>
+            <% } %>
+        </div>
+    <% } %>
+<% } %>
+
+<% function renderSecuritySchemasBasic({ securitySchema, schemas }) { 
+     if (securitySchema) { 
+       if (securitySchema.name()) { 
+         schemas.push(`Name: ${securitySchema.name()}`);
+       } 
+       if (securitySchema.in()) { 
+         schemas.push(`In: ${securitySchema.in()}`); 
+       } 
+       if (securitySchema.scheme()) { 
+         schemas.push(`Scheme: ${securitySchema.scheme()}`); 
+       } 
+       if (securitySchema.bearerFormat()) { 
+         schemas.push(`Bearer format: ${securitySchema.bearerFormat()}`); 
+       } 
+       if (securitySchema.openIdConnectUrl()) { 
+         schemas.push(`OpenID_${securitySchema.openIdConnectUrl()}_${securitySchema.openIdConnectUrl()}`); 
+       } 
+     } 
+   } 
+  
+   function renderSecuritySchemasKafka({ protocol, securitySchema, schemas }) { 
+     const isKafkaProtocol = protocol === 'kafka' || protocol === 'kafka-secure'; 
+     if (!isKafkaProtocol) { return; } 
+  
+     const { securityProtocol, saslMechanism } = serverHelper.getKafkaSecurity(protocol,securitySchema); 
+  
+     if (securityProtocol) { schemas.push(`security.protocol: ${securityProtocol}`); } 
+     if (saslMechanism) { schemas.push(`sasl.mechanism: ${saslMechanism}`); } 
+   } 
+  
+
+    function flowsRenderer([flowName, flow]) { 
+      return [serverHelper.flowName(flowName) || '-', (flow?.authorizationUrl() ? flow.authorizationUrl() : '-'), (flow?.tokenUrl() ? flow.tokenUrl() : '-'), (flow?.refreshUrl() ? flow.refreshUrl() : '-'), Object.keys(flow?.scopes() || {}).length ? Object.keys(flow.scopes()).map(v => `\`${v}\``).join(', ') : '-' ]; 
+    } 
+   function renderSecuritySchemasFlows({ securitySchema, requiredScopes, schemas }) { 
+     const flows = securitySchema?.flows(); 
+     if (!flows) { return; } 
+  
+     const flowsData = Object.entries({authorizationCode: flows.authorizationCode(),clientCredentials: flows.clientCredentials(),implicit: flows.implicit(),password: flows.password()}); 
+     schemas.push( `RequiredScopes_${ requiredScopes.map(v => `\`${v}\``).join(', ')}_${JSON.stringify(flowsData.map(entry => flowsRenderer(entry)))}` ); 
+   } %>
diff --git a/src/components/Servers.ejs b/src/components/Servers.ejs
new file mode 100644
index 0000000..286481b
--- /dev/null
+++ b/src/components/Servers.ejs
@@ -0,0 +1,54 @@
+<% if (!servers.isEmpty()) { %>
+    <h3> Servers </h3>
+    <% for(let server of servers.all()){ %>
+        <div>
+            <h3><%= server.id().charAt(0).toUpperCase() + server.id().slice(1) %> Server</h3>
+                <p>
+                    <ul>
+                      <li>URL: <%= server.url() %></li>
+                      <li>Protocol: <%= server.protocol() %> <%= server.protocolVersion() ? server.protocolVersion() : '' %></li>
+                    </ul>
+                    <% if(server.hasDescription()) { %>
+                           <%- md.render(`Description: ${server.description()}`) %>
+                    <% } %>
+                </p>
+            <h4>URL Variables</h4>
+            <div class="table-container">
+            <Table>
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Description</th>
+                    <th>Default value</th>
+                    <th>Allowed values</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <% for(let entry of server.variables().all()){ %>
+                    <tr>
+                      <td data-th="Name"><%= entry.id() %></td>
+                      <td data-="Description"><%= entry.description() %></td>
+                      <% if(entry.hasDefaultValue()){ %>
+                        <td data-th="Default value"><%= entry.defaultValue() %></td>
+                      <% }else { %>
+                        <td data-th="Default value">_None_</td>
+                      <% } %>
+                      <% if(entry.hasAllowedValues()){ %>
+                        <td data-th="Allowed values"><%= entry.allowedValues().map(value => value).join(', ') %></td>
+                      <% }else { %>
+                        <td data-th="Allowed values">_Any_</td>
+                      <% } %>
+                    </tr>
+                  <% } %>
+                </tbody>
+              </Table>
+              </div>
+            <%- include(securityPath,{ header:null, protocol: server.protocol(), security: server.security(), serverHelper, md }) %>
+            <%- include(tagsPath,{ name:"Tags", tags: server.tags() }) %>
+
+            <%- include(bindingsPath,{ name:"Server specific information", bindings: server.bindings(), schemaHelper, schemaPath }) %>
+            <%- include(extensionsPath,{ name:"Server extensions", extensions: server.extensions(), schemaHelper, schemaPath }) %>
+
+        </div>
+    <% } %>
+<% } %>
\ No newline at end of file
diff --git a/src/components/Tags.ejs b/src/components/Tags.ejs
new file mode 100644
index 0000000..47e077c
--- /dev/null
+++ b/src/components/Tags.ejs
@@ -0,0 +1,28 @@
+<% if(tags && !tags.isEmpty()) { %>
+  <h5><%= name %></h5>
+  <div class="table-container">
+  <Table>
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Description</th>
+        <th>Documentation</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% for(let entry of tags.all()){ %>
+        <tr>
+          <td data-th="Name"><%= entry.name() %></td>
+          <td data-th="Description"><%= entry.description() %></td>
+          <% if(entry.externalDocs()){ %>
+            <td data-th="Documentation"><a href="<%= entry.externalDocs().url() %>" ><%= entry.externalDocs() && entry.externalDocs().hasDescription() ? entry.externalDocs().description() : 'Find more info here' %></a></td>
+          <% }else { %>
+            <td data-th="Documentation">-</td>
+          <% } %>
+        </tr>
+      <% } %>
+    </tbody>
+  </Table>
+  </div>
+<% } %>  
+  
diff --git a/src/components/classDiagram.ejs b/src/components/classDiagram.ejs
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/flowchart.ejs b/src/components/flowchart.ejs
new file mode 100644
index 0000000..e69de29
diff --git a/webpack.config.js b/webpack.config.js
index 6f182cc..efee6b9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,7 +3,7 @@
 'use strict';
 
 const path = require('path');
-const CopyPlugin = require('copy-webpack-plugin');
+const copyPlugin = require('copy-webpack-plugin');
 
 //@ts-check
 /** @typedef {import('webpack').Configuration} WebpackConfig **/
@@ -39,6 +39,10 @@ const extensionConfig = {
           },
         ],
       },
+      {
+        test: /\.ejs$/,
+        loader: 'ejs-loader'
+      }
     ],
   },
   devtool: 'nosources-source-map',
@@ -46,7 +50,7 @@ const extensionConfig = {
     level: 'log', // enables logging required for problem matchers
   },
   plugins: [
-    new CopyPlugin({
+    new copyPlugin({
       patterns: [
         {
           from: 'node_modules/@asyncapi/react-component/browser/standalone/index.js',
@@ -57,9 +61,14 @@ const extensionConfig = {
           to: 'node_modules/@asyncapi/react-component/styles/default.min.css',
         },
         {
-          from: '/node_modules/mermaid/dist/mermaid.min.js',
-          to: '/node_modules/mermaid/dist/mermaid.min.js',
+          from: 'node_modules/mermaid/dist/mermaid.min.js',
+          to: 'node_modules/mermaid/dist/mermaid.min.js',
         },
+        {
+          from: 'src/components',
+          to: 'components'
+        } 
+
       ],
     }),
   ],