Add themed Mermaid diagrams - #806
Draft
bryantgillespie wants to merge 3 commits into
Draft
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new Nuxt Content Mermaid component to render themed Mermaid diagrams (including interactivity and export), plus supporting dependencies and tests for the docs site.
Changes:
- Introduces
app/components/content/Mermaid.vuewith themed rendering, pan/zoom controls, and SVG/PNG downloads. - Adds a component test suite and a dedicated
pnpm test:mermaidscript. - Adds a Mermaid playground content page and updates dependencies/build config to support the new renderer and font embedding.
Reviewed changes
Copilot reviewed 7 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
app/components/content/Mermaid.vue |
New interactive Mermaid renderer component with export support. |
tests/components/Mermaid.test.ts |
New Vitest coverage for rendering, interactions, and downloads. |
content/mermaid-playground.md |
New content page to exercise Mermaid rendering/features. |
package.json |
Adds test:mermaid script and new dependencies. |
pnpm-lock.yaml |
Locks new dependencies (beautiful-mermaid, @fontsource-variable/inter, transitive deps). |
nuxt.config.ts |
Adds Vite dep optimization include for debug. |
AGENTS.md |
Adds repository guidance (commands/architecture/docs tone). |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+224
to
+231
| function download(blob: Blob, extension: 'svg' | 'png') { | ||
| const url = URL.createObjectURL(blob); | ||
| const link = document.createElement('a'); | ||
| link.href = url; | ||
| link.download = `${props.filename}.${extension}`; | ||
| link.click(); | ||
| URL.revokeObjectURL(url); | ||
| } |
Comment on lines
+1
to
+6
| --- | ||
| stableId: 04c88d97-65b0-4cf0-a5eb-1a046f034207 | ||
| title: Mermaid Playground | ||
| description: Test the themed Mermaid component, navigation controls, and diagram exports. | ||
| navigation: false | ||
| --- |
Comment on lines
+435
to
+440
| v-else | ||
| class="relative min-h-80 touch-none overflow-hidden outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset" | ||
| role="img" | ||
| :aria-label="`${title}. Use arrow keys to pan, plus and minus to zoom, and zero to reset.`" | ||
| tabindex="0" | ||
| :class="dragging ? 'cursor-grabbing' : 'cursor-grab'" |
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.
Summary
Tests
pnpm test:mermaidpnpm buildTODO