diff --git a/public/css/mermaid.css b/public/css/mermaid.css
deleted file mode 100644
index 2928f298b3..0000000000
--- a/public/css/mermaid.css
+++ /dev/null
@@ -1,285 +0,0 @@
-/* Flowchart variables */
-/* Sequence Diagram variables */
-/* Gantt chart variables */
-.mermaid .label {
-  color: #333;
-}
-/* workaround to solve conflict bootstrap styles */
-.mermaid .label {
-  display: unset;
-  padding: unset;
-  font-size: unset;
-  font-weight: unset;
-  line-height: unset;
-  text-align: unset;
-  white-space: unset;
-  vertical-align: unset;
-  border-radius: unset;
-}
-.mermaid .node rect,
-.mermaid .node circle,
-.mermaid .node ellipse,
-.mermaid .node polygon {
-  fill: #ECECFF;
-  stroke: #CCCCFF;
-  stroke-width: 1px;
-}
-.mermaid .edgePath .path {
-  stroke: #333333;
-}
-.mermaid .edgeLabel {
-  background-color: #e8e8e8;
-}
-.mermaid .cluster rect {
-  fill: #ffffde !important;
-  rx: 4 !important;
-  stroke: #aaaa33 !important;
-  stroke-width: 1px !important;
-}
-.mermaid .cluster text {
-  fill: #333;
-}
-.mermaid .actor {
-  stroke: #CCCCFF;
-  fill: #ECECFF;
-}
-.mermaid text.actor {
-  fill: black;
-  stroke: none;
-}
-.mermaid .actor-line {
-  stroke: grey;
-}
-.mermaid .messageLine0 {
-  stroke-width: 1.5;
-  stroke-dasharray: "2 2";
-  marker-end: "url(#arrowhead)";
-  stroke: #333;
-}
-.mermaid .messageLine1 {
-  stroke-width: 1.5;
-  stroke-dasharray: "2 2";
-  stroke: #333;
-}
-.mermaid #arrowhead {
-  fill: #333;
-}
-.mermaid #crosshead path {
-  fill: #333 !important;
-  stroke: #333 !important;
-}
-.mermaid .messageText {
-  fill: #333;
-  stroke: none;
-}
-.mermaid .labelBox {
-  stroke: #CCCCFF;
-  fill: #ECECFF;
-}
-.mermaid .labelText {
-  fill: black;
-  stroke: none;
-}
-.mermaid .loopText {
-  fill: black;
-  stroke: none;
-}
-.mermaid .loopLine {
-  stroke-width: 2;
-  stroke-dasharray: "2 2";
-  marker-end: "url(#arrowhead)";
-  stroke: #CCCCFF;
-}
-.mermaid .note {
-  stroke: #aaaa33;
-  fill: #fff5ad;
-}
-.mermaid .noteText {
-  fill: black;
-  stroke: none;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 14px;
-}
-/** Section styling */
-.mermaid .section {
-  stroke: none;
-  opacity: 0.2;
-}
-.mermaid .section0 {
-  fill: rgba(102, 102, 255, 0.49);
-}
-.mermaid .section2 {
-  fill: #fff400;
-}
-.mermaid .section1,
-.mermaid .section3 {
-  fill: white;
-  opacity: 0.2;
-}
-.mermaid .sectionTitle0 {
-  fill: #333;
-}
-.mermaid .sectionTitle1 {
-  fill: #333;
-}
-.mermaid .sectionTitle2 {
-  fill: #333;
-}
-.mermaid .sectionTitle3 {
-  fill: #333;
-}
-.mermaid .sectionTitle {
-  text-anchor: start;
-  font-size: 11px;
-  text-height: 14px;
-}
-/* Grid and axis */
-.mermaid .grid .tick {
-  stroke: lightgrey;
-  opacity: 0.3;
-  shape-rendering: crispEdges;
-}
-.mermaid .grid path {
-  stroke-width: 0;
-}
-/* Today line */
-.mermaid .today {
-  fill: none;
-  stroke: red;
-  stroke-width: 2px;
-}
-/* Task styling */
-/* Default task */
-.mermaid .task {
-  stroke-width: 2;
-}
-.mermaid .taskText {
-  text-anchor: middle;
-  font-size: 11px;
-}
-.mermaid .taskTextOutsideRight {
-  fill: black;
-  text-anchor: start;
-  font-size: 11px;
-}
-.mermaid .taskTextOutsideLeft {
-  fill: black;
-  text-anchor: end;
-  font-size: 11px;
-}
-/* Specific task settings for the sections*/
-.mermaid .taskText0,
-.mermaid .taskText1,
-.mermaid .taskText2,
-.mermaid .taskText3 {
-  fill: white;
-}
-.mermaid .task0,
-.mermaid .task1,
-.mermaid .task2,
-.mermaid .task3 {
-  fill: #8a90dd;
-  stroke: #534fbc;
-}
-.mermaid .taskTextOutside0,
-.mermaid .taskTextOutside2 {
-  fill: black;
-}
-.mermaid .taskTextOutside1,
-.mermaid .taskTextOutside3 {
-  fill: black;
-}
-/* Active task */
-.mermaid .active0,
-.mermaid .active1,
-.mermaid .active2,
-.mermaid .active3 {
-  fill: #bfc7ff;
-  stroke: #534fbc;
-}
-.mermaid .activeText0,
-.mermaid .activeText1,
-.mermaid .activeText2,
-.mermaid .activeText3 {
-  fill: black !important;
-}
-/* Completed task */
-.mermaid .done0,
-.mermaid .done1,
-.mermaid .done2,
-.mermaid .done3 {
-  stroke: grey;
-  fill: lightgrey;
-  stroke-width: 2;
-}
-.mermaid .doneText0,
-.mermaid .doneText1,
-.mermaid .doneText2,
-.mermaid .doneText3 {
-  fill: black !important;
-}
-/* Tasks on the critical line */
-.mermaid .crit0,
-.mermaid .crit1,
-.mermaid .crit2,
-.mermaid .crit3 {
-  stroke: #ff8888;
-  fill: red;
-  stroke-width: 2;
-}
-.mermaid .activeCrit0,
-.mermaid .activeCrit1,
-.mermaid .activeCrit2,
-.mermaid .activeCrit3 {
-  stroke: #ff8888;
-  fill: #bfc7ff;
-  stroke-width: 2;
-}
-.mermaid .doneCrit0,
-.mermaid .doneCrit1,
-.mermaid .doneCrit2,
-.mermaid .doneCrit3 {
-  stroke: #ff8888;
-  fill: lightgrey;
-  stroke-width: 2;
-  cursor: pointer;
-  shape-rendering: crispEdges;
-}
-.mermaid .doneCritText0,
-.mermaid .doneCritText1,
-.mermaid .doneCritText2,
-.mermaid .doneCritText3 {
-  fill: black !important;
-}
-.mermaid .activeCritText0,
-.mermaid .activeCritText1,
-.mermaid .activeCritText2,
-.mermaid .activeCritText3 {
-  fill: black !important;
-}
-.mermaid .titleText {
-  text-anchor: middle;
-  font-size: 18px;
-  fill: black;
-}
-/*
-
-
-*/
-.mermaid .node text {
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 14px;
-}
-.mermaid div.mermaidTooltip {
-  position: absolute;
-  text-align: center;
-  max-width: 200px;
-  padding: 2px;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 12px;
-  background: #ffffde;
-  border: 1px solid #aaaa33;
-  border-radius: 2px;
-  pointer-events: none;
-  z-index: 100;
-}
diff --git a/public/js/extra.js b/public/js/extra.js
index 6bbe65e4a1..0a3d413567 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -1490,3 +1490,31 @@ md.use(pdfPlugin)
 export default {
   md
 }
+// Function to determine the Mermaid theme based on system or custom theme settings
+function getMermaidTheme() {
+  // Check if dark mode is preferred
+  const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  return isDarkMode ? 'dark' : 'default';  // 'dark' for dark mode, 'default' for light mode
+}
+
+// Function to initialize Mermaid with the correct theme
+function initializeMermaid() {
+  // Initialize Mermaid with the chosen theme
+  window.mermaid.initialize({
+    theme: getMermaidTheme(),
+  });
+
+  // Select Mermaid elements and re-initialize them
+  const $ele = document.querySelectorAll('.mermaid'); // Adjust selector as needed
+  $ele.forEach(ele => {
+    window.mermaid.init(undefined, ele); // Re-render each diagram
+  });
+}
+
+// Call the initialize function once the page has fully loaded
+document.addEventListener('DOMContentLoaded', initializeMermaid);
+
+// Listen for changes in the system's color scheme and re-render the diagrams accordingly
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+  initializeMermaid();  // Re-initialize with the new theme
+});
diff --git a/pupeter.js b/pupeter.js
new file mode 100644
index 0000000000..baefda2a13
--- /dev/null
+++ b/pupeter.js
@@ -0,0 +1,21 @@
+const puppeteer = require('puppeteer');
+
+(async () => {
+  const browser = await puppeteer.launch();
+  const page = await browser.newPage();
+  
+  // Replace with the URL of your HackMD document
+  await page.goto('https://hackmd.io/YOUR_DOCUMENT_URL');
+
+  // Wait for the content to be fully rendered
+  await page.waitForSelector('body'); // Adjust the selector based on the element that signals the page has loaded
+
+  // Extract the HTML
+  const html = await page.evaluate(() => document.documentElement.outerHTML);
+
+  // Save the HTML to a file or output it
+  const fs = require('fs');
+  fs.writeFileSync('protocol.html', html);
+
+  await browser.close();
+})();