Add Mermaid MDX component and docs for diagram rendering

[Clickin]

Motivation

• Provide a way to manage diagrams as code in MDX posts using Mermaid instead of shipping image files.
• Ensure diagrams respect the site's light/dark theme and re-render when the theme changes.
• Document how to use the Mermaid MDX component for authors.

Description

• Add a new client-side component src/components/Mermaid.astro that imports mermaid, renders .mermaid blocks, initializes with the current theme, and watches document.documentElement.class to reset and re-render charts on theme changes.
• Add the mermaid dependency to package.json to enable bundling and runtime use in the browser.
• Update README.md with a usage example showing how to import and use the Mermaid component in an MDX post and note that mermaid is managed as an npm dependency.

Testing

• No automated tests were executed for this change.

---

Codex Task

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: c7ed68ee21

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Use textContent when resetting Mermaid source

Resetting the chart with node.innerHTML = source re-parses Mermaid text as HTML during theme changes, which corrupts valid diagram syntax containing <... sequences (for example B-->|x<y|C gets truncated by the HTML parser) and can cause re-rendered diagrams to break or render incorrectly after toggling dark/light mode. This restore path should write plain text (textContent) so the original Mermaid source is preserved exactly.

Useful? React with 👍 / 👎.