Repository navigation
build(docs): replace vitepress-plugin-mermaid with vitepress-mermaid-viewer - #923
Merged
Merged
Conversation
…viewer - vitepress-plugin-mermaid is dormant and caps its mermaid peer at 11, which needed an npm override to run mermaid 12; drop both - vitepress-mermaid-viewer takes the same withMermaid() config, accepts mermaid >=10 and adds a zoomable fullscreen viewer - Keep wide diagrams (useMaxWidth: false) at natural size: stop the viewer's flex container from shrinking them and keep their left edge within scroll reach
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The docs site renders its Mermaid diagrams with
vitepress-plugin-mermaid. That plugin hasn’t had a release since September 2024 and only accepts mermaid 10 or 11 as a peer. To land the mermaid 12 bump in #891 we added an npm override, which this PR removes along with the plugin.vitepress-mermaid-viewerreplaces it:withMermaid()wrapper andmermaidconfig key, solook: 'handDrawn'and the per-diagram%%{init}%%settings stay as they are.mermaid >=10, so future mermaid majors won’t need an override.The viewer renders diagrams in a centered flex container. Without a CSS fix, the architecture diagram (
useMaxWidth: false) shrank to the column width but kept its full height, which made its text unreadable.custom.cssnow stops the SVG from shrinking and usesjustify-content: safe centerso all of it can be scrolled to. It also replaces the olddiv:has(> svg)selector, which matched the previous plugin’s markup.I checked the built site in a browser: the three diagrams (architecture, core concepts, docgen) render in light and dark mode, and the fullscreen viewer opens and zooms.
package-lock.jsonchanges only for the plugin swap. It leaves out the unrelated workspace version drift thatnpm installcurrently adds.