Skip to content

fix: render mermaid diagrams instead of raw code blocks - #33

Merged
whg517 merged 1 commit into
zncdatadev:mainfrom
whg517:fix/mermaid-rendering
Aug 24, 2026
Merged

fix: render mermaid diagrams instead of raw code blocks#33
whg517 merged 1 commit into
zncdatadev:mainfrom
whg517:fix/mermaid-rendering

Conversation

@whg517

@whg517 whg517 commented Aug 23, 2026

Copy link
Copy Markdown
Member

Summary

docs/architecture.md and its Chinese translation contain 8 ```mermaid fenced blocks, but @docusaurus/theme-mermaid was never installed and `markdown.mermaid` was never enabled. Docusaurus fell back to treating them as plain code, so the architecture diagrams added in #31/#32 currently ship to the site as raw mermaid source text.

Changes

  • Install @docusaurus/theme-mermaid@3.10.1 (pinned, matching the other @docusaurus/* deps)
  • Enable markdown.mermaid and register the theme in docusaurus.config.ts
  • Map the diagram theme to the site colour mode ({light: 'neutral', dark: 'dark'}) so diagrams do not stay light on a dark page

Testing

  • npm run build passes (both locales)
  • npx tsc --noEmit passes
  • No lines exceeding 200 characters
  • Verified in a browser: all 4 diagrams on /docs/architecture render as SVG
    • dark mode: node fill rgb(31,32,32), label rgb(227,227,227)
    • light mode: node fill rgb(238,238,238), label rgb(51,51,51)
  • Neither locale's build output contains a language-mermaid block any more (was 8, now 0)

Note

package-lock.json grows a lot because mermaid pulls in d3/cytoscape/dagre. 27 of the deleted lines are incidental "peer": true markers from an npm version difference, not a dependency change.

🤖 Generated with Claude Code

docs/architecture.md and its Chinese translation contain 8 ```mermaid
fenced blocks, but @docusaurus/theme-mermaid was never installed and
markdown.mermaid was never enabled. Docusaurus fell back to treating the
blocks as plain code, so the architecture diagrams shipped to the site as
raw mermaid source text.

Install the theme, enable markdown.mermaid, and map the diagram theme to
the site colour mode so diagrams do not stay light on a dark page.

Verified in the browser: all 4 diagrams on /docs/architecture render as
SVG in both colour modes, and neither locale's build output contains a
language-mermaid block any more.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@whg517
whg517 merged commit fa4beab into zncdatadev:main Aug 24, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant