feat(markdown): add mermaid diagram rendering

[baanish]

Summary

• Adds inline mermaid diagram rendering for ```mermaid fenced code blocks inside markdown artifacts
• Mermaid library is dynamically imported on first encounter (no initial bundle impact)
• Theme-aware rendering (light/dark), strict security level, graceful fallback to raw source on error
• Updates skill docs (SKILL.md), AGENTS.md, architecture, payload-format, and dependency-notes to document the new capability

Test plan

• Verify mermaid fenced code blocks render as SVG diagrams in markdown artifacts
• Verify theme toggle (light/dark) re-renders diagrams with correct theme
• Verify invalid mermaid syntax shows fallback with raw source and error message
• Verify non-mermaid fenced code blocks still render via CodeMirror as before
• Verify initial bundle size is not affected (mermaid loads only on demand)
• Run npm run lint, npm run test, npm run typecheck — all pass

🤖 Generated with Claude Code

[coderabbitai]

Warning

Rate limit exceeded

@baanish has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 5 minutes and 9 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 5 minutes and 9 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1e7b28ed-78db-40ec-b695-9c030f7c73c0

📥 Commits

Reviewing files that changed from the base of the PR and between 798d069 and 14ee878.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (9)

• AGENTS.md
• docs/architecture.md
• docs/dependency-notes.md
• docs/payload-format.md
• package.json
• skills/agent-render-linking/SKILL.md
• src/app/globals.css
• src/components/renderers/markdown-renderer.tsx
• src/components/renderers/mermaid-block.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/mermaid-diagram-rendering

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cloudflare-workers-and-pages]

Deploying agent-render with    Cloudflare Pages

Latest commit:	14ee878
Status:	⚡️  Build in progress...

View logs

[kilo-code-bot]

CRITICAL: CSS variable --surface-primary is not defined anywhere in :root or .dark. The mermaid frame will have no background color, falling back to transparent. Based on existing naming conventions (--surface, --surface-strong, --surface-elevated, --surface-code), this should likely be --surface-strong to match other artifact containers.

Suggested change

	background: var(--surface-primary);
	background: var(--surface-strong);

[kilo-code-bot]

WARNING: CSS variable --text-danger is not defined in the design system. The codebase defines --danger (line 22/57) for danger-colored elements. The fallback #e53e3e will work in light mode but won't respond to dark theme changes.

Suggested change

	color: var(--text-danger, #e53e3e);
	color: var(--danger);

[kilo-code-bot]

Code Review Summary

Status: 2 Issues Found | Recommendation: Address before merge

Overview

Severity	Count
CRITICAL	1
WARNING	1

Issue Details (click to expand)

CRITICAL

File	Line	Issue
src/app/globals.css	905	--surface-primary CSS variable is undefined — mermaid frame will have no background

WARNING

File	Line	Issue
src/app/globals.css	927	--text-danger CSS variable is undefined — error message color won't respond to dark theme

Files Reviewed (10 files)

• src/components/renderers/mermaid-block.tsx (new) — clean implementation, good security posture (securityLevel: "strict"), dynamic import, proper cleanup
• src/components/renderers/markdown-renderer.tsx — correct integration of MermaidBlock via dynamic import with mermaid language dispatch
• src/app/globals.css — 2 undefined CSS variables
• package.json — mermaid added as production dependency
• package-lock.json — lockfile update (noted but not reviewed in detail)
• AGENTS.md — documentation aligned
• docs/architecture.md — documentation aligned
• docs/dependency-notes.md — license and notes updated
• docs/payload-format.md — documentation aligned
• skills/agent-render-linking/SKILL.md — skill contract updated with mermaid example

Notes

• The mermaid-block.tsx component has onReady in the useEffect dependency array. The parent always creates a new arrow function reference per render, which will re-trigger the effect on every parent render. This won't cause visible bugs (the cancelled flag handles cleanup), but it's wasteful — consider memoizing the callback or removing onReady from the deps.
• mermaid.initialize() is called on every render inside the effect. Moving it to a module-level singleton or checking if already initialized would avoid redundant configuration.

---

_{Reviewed by mimo-v2-pro-20260318 · 1,073,533 tokens}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 845b933882

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Clear Mermaid error state after successful re-render

When a diagram render fails once, error becomes non-null and the component renders only the fallback (no containerRef). On later renders (for example after switching to a different markdown artifact with valid mermaid syntax but the same component position), mermaid.render() can succeed but this guard returns early because containerRef.current is still null, so setError(null) never runs and the component stays stuck in the error view until unmount. This creates a persistent false failure state across artifact changes.

Useful? React with 👍 / 👎.