Adding Mermaid diagram support #168 (#1044)

* Installed astro mermaid

* Fixed title for mermaid by adding jsx line to print title above diagram

* Trying to split single line title into three lines hoping github will understand them

* This is my third attempt, trying to use a html solution without font size but rather h4<small>, because git doesnt recognize font size either

* Try #4, adding a space between title and mermaid text

* Revert "Installed astro mermaid"

This reverts commit e32991e.

* Installed astro mermaid

* Removed html fix for title, and use mermaid's class chart built in title support

* Removed Html Line from Main branch (unneeded for current install)

* Revert "Merge branch 'main' into hien"

This reverts commit 1b67d8f, reversing
changes made to 4b9274c.

* installed astro mermaid

* removed some typo

* removed some typo

* The MDX file includes two Mermaid diagrams—one for light mode and one for dark—because Mermaid diagrams are rendered at build time and can’t switch themes dynamically. Each version is wrapped in its own container using a html script, and CSS rules in global.scss hide or show the appropriate diagram depending on whether the .dark-theme class is active. This ensures users always see a diagram that matches their current theme

* Dark Diagram deleted and diagram set to default options

* Deleted css options for the dark mode diagram

* Undid unnecessary changes to these 2 files

* Trying to remove changes on web_gl file

* added invert filter for darkmode diagrams

---------

Co-authored-by: Hien-Ly <151255536+H13NL@users.noreply.github.com>
Co-authored-by: Jaime Serrano Acevedo <xilverscott@gmail.com>

Author: 3 people

astro.config.mjs

@@ -4,6 +4,7 @@ import mdx from "@astrojs/mdx";
 import tailwind from "@astrojs/tailwind";
 import serviceWorker from "astrojs-service-worker";
 import fast from "./src/scripts/fast-compress";
+import mermaid from 'astro-mermaid';
 
 // Allow skipping compression step for faster test build times
 // DO NOT SKIP COMPRESSION FOR DEPLOYMENT!
@@ -20,6 +21,7 @@ export default defineConfig({
   site: 'https://p5js.org',
   compressHTML: false,
   integrations: [
+    mermaid({autoTheme: true}),
     preact({
       compat: true,
     }),