Add Mermaid support to documentation

[huijing]

We would like to add Mermaid support to the Rafiki docs, currently running on Starlight.

[huijing]

We have unfortunately run into a blocker where the generated SVG has issues with attributes that contain dashes, e.g. marker-end is being generated as markerend causing the arrow heads to not render.
Am currently in the process of asking for help (remcohaszing/remark-mermaidjs#23), will continue to update this issue if it progresses.

The exact same configuration works perfectly on Web Monetization. The difference is that Web Monetization is not a monorepo and was built with bun. It also does not have the Mathjax plugins installed.

import remarkMermaid from 'remark-mermaidjs'

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkMermaid],
  }
})

Testing on a fresh Astro Starlight install built with pnpm using the same configuration as above also works correctly. The Mermaid plugin did not present any issues when used together with the Mathjax plugins.

import remarkMermaid from 'remark-mermaidjs'
import remarkMath from 'remark-math'
import rehypeMathjax from 'rehype-mathjax'

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkMath, remarkMermaid],
    rehypePlugins: [rehypeMathjax]
  },

Hui Jing is just very annoyed and confused at this point.

[BlairCurrey]

I was testing this out and found a few things.

• The arrows in the mermaid diagram in grant-interaction.mdx renders if you change it to the .md extension. I assume we need the JSX stuff though so I'm not sure that's a solution. I noticed this after seeing that the event-handlers page renders arrows just fine: http://localhost:1101/integration/event-handlers/. I thought maybe we need to add the mdx integration but it fails to parse the mdx files after installing (and it currently seems to read mdx fine anyways). Not sure why. https://docs.astro.build/en/guides/markdown-content/#mdx-only-features
• logging out the SVG from the remarkMermaid transformer shows that it returns a good svg with marker-end. Seems like its astro mangling it somewhere.
• When I look in the build folder, marker-end is actually markerEnd (then markerend in the browser because html attributes are case-insensitive). It seems like there is some logic in astro for turning kebab-case to camelCase but none of it sticks out as a likely culprit: https://github.com/search?q=repo%3Awithastro%2Fastro%20camel&type=code

[huijing]

This issue is not entirely solved, but we do have Mermaid support in .md files with the ```mermaid syntax. It does not work in .mdx yet. So leaving this open for now.

[huijing]

This has been resolved by #2237