Add themed Mermaid diagrams

[bryantgillespie]

Summary

• Add themed Mermaid diagrams with zoom, pan, and downloads
• Add a playground and component tests

Tests

• pnpm test:mermaid
• pnpm build

TODO

• We'll need to remove the playground before going live with this

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview	Aug 19, 2026 7:02pm

[Copilot]

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.vue with themed rendering, pan/zoom controls, and SVG/PNG downloads.
• Adds a component test suite and a dedicated pnpm test:mermaid script.
• 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.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 9 changed files in this pull request and generated no new comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

Suppressed comments (2)

content/mermaid-playground.md:5

• The PR description notes the Mermaid playground should be removed before going live, but this page will be deployed if the PR is merged (it’s a routable /mermaid-playground content page even with navigation: false). Consider removing it from this PR, or moving it somewhere non-routable (e.g. under content/_partials/) / otherwise gating it so it can’t ship to production.

---
stableId: 04c88d97-65b0-4cf0-a5eb-1a046f034207
title: Mermaid Playground
description: Test the themed Mermaid component, navigation controls, and diagram exports.
navigation: false

nuxt.config.ts:176

• vite.optimizeDeps.include = ['debug'] introduces a global dev-time bundling override, but there are no direct imports of debug in this repo. If this was added to work around a dependency issue (likely via beautiful-mermaid/elkjs), please add a short inline comment explaining the rationale (and ideally reference the error/issue). Otherwise, consider removing this config to avoid carrying an unexplained global Vite tweak.

	vite: {
		optimizeDeps: {
			include: ['debug'],
		},
	},