Render Mermaid diagrams on the website - #378
Merged
Merged
Conversation
Mermaid fences in docs/architecture.md (flowchart TB) and docs/web/console-server.md (flowchart LR) were shown as code. They now render as diagrams in the browser, follow the colour theme and fall back to their source without JavaScript.
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Automations to automatically generate PRs for you. |
This branch was successfully deployed
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
1 participant
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.
Summary
The website showed the Mermaid diagrams in
docs/architecture.md(flowchart TB) anddocs/web/console-server.md(flowchart LR) as plain code blocks.website/.vitepress/mermaid.mtsturns```mermaidfences into a<Mermaid>component at build time; other fences are unchanged.Mermaid.vuelazy-loadsmermaidin the browser (strict security level), waits for the web font so labels are measured correctly, keeps documentation paragraph styles out of the HTML labels (they clipped label text), uses the site palette and redraws when the colour theme changes. Without JavaScript, or if a diagram fails, the source is shown.docs/changes.Verification
make check-website: build plus 13 tests, including a new check thatdocs/architecturerenders a diagram and nolanguage-mermaidblock.make check-names check-ciwith the new files tracked.Need help on this PR? Tag
@codesmith-botwith what you need. Autofix is disabled.