Adding Mermaid diagram support #168

[Octavi00]

Co-authored-by: Hien T Ly hien.ly@sjsu.edu
Co-authored-by: Jaime Serrano Acevedo xilverscott@gmail.com

Resolves -> Adding Mermaid Diagram Support #168

Changes

• Installed astro-mermaid package for diagram rendering.
• Inside src/content/contributor-docs/en/webgl_mode_architecture.mdx, the Mermaid diagram didn’t need to be modified after the install.
• In astro.config.mjs, imported mermaid from astro mermaid. Added mermaid in the integrations section, with autotheme as an option.

Notes:

• package.json was modified by the installation of astro-mermaid.
• Mermaid installation was also successfully tested for rendering other diagrams, apart from class diagrams, within the /workspaces/groupE-mermaid-p5.js-website/src/content/contributor-docs/en/webgl_mode_architecture.mdx file.

Screenshots of the diagram below

--- Before the changes ---

In git hub:

--- After the fix ---

Mermaid diagram in dark mode:

In git gub:

[ksen0]

Thank you for your work on this!

The dark mode not showing up I think is not a major blocker; this can be a follow up issue.

Alternatively, if you have capacity to investigate further, you could see if it's possible to add an invert filter? Either as a style filter:invert(100%) as I checked below:

Or, preferably, using the invert-in-dark class which is intended for this use:

p5.js-website/styles/global.scss

Line 412 in 760d903

.dark-theme .invert-in-dark {

cc @davepagurek

[H13NL]

Hi @ksen0, thanks for your reply.
I was able to add invert filter for the diagrams by adding a few line in global.scss.
I tested with some other type of diagrams and it seem to be working.