Make Pulumi Mermaid theme a portable module with full diagram coverage

[jeffmerrick]

Updates to the mermaid theme for most diagrams/charts (a couple minor ones aren't possible to style, but we aren't using them anyhow).

Next up is to add the theme to the brand guidelines and into the slidev theme.

---

Proposed changes

Extracts the Mermaid renderer out of head.html into a dedicated mermaid.html partial (loaded lazily, only on pages with diagrams) and moves the Pulumi-brand theme into a portable, dependency-free module (static/js/pulumi-mermaid-theme.js) that can be dropped into other codebases, slide decks, or notebooks. The theme is expanded from flowchart/sequence coverage to all Mermaid v11 diagram types (git, journey, timeline, xychart, radar, treemap, ER, kanban, packet, mindmap, etc.), with every color sourced from a Pulumi brand token. Each diagram now resolves its light/dark theme from the nearest data-theme ancestor and diagrams render in theme-grouped sequential batches to avoid Mermaid's shared-state races. Also fixes flex-based centering in _code.scss that broke Mermaid's container-width measurement (notably gantt) and stops global content p styling from bleeding into diagram labels.

[github-actions]

Pre-merge Review — Last updated 2026-06-26T18:09:56Z

Tip

Summary: This is an infrastructure refactor that extracts the inline Mermaid renderer from head.html into a reusable partial (mermaid.html) and a portable, dependency-free Pulumi-brand theme module (static/js/pulumi-mermaid-theme.js), plus a SCSS fix that swaps flex centering for a block layout so Mermaid can measure container width correctly. The kind of wrongness that would bite here is a broken module import path, a rendering regression (theme not applying, diagrams racing/corrupting, or hidden/tabbed diagrams never rendering), or the new pre.mermaid p overrides leaking into or out of diagram labels — none of which surfaced in review. The Mermaid CDN import URLs were fact-checked (3/3 verified against the official Mermaid v11 docs); the JS/SCSS logic was read for correctness.

Review confidence:

Dimension	Level	Notes
mechanics	HIGH
facts	HIGH

Investigation log

• Cross-sibling reads: not run (not in a templated section)
• External claim verification: 3 of 3 claims verified (0 unverifiable, 0 contradicted) · 4 specialists (numerical, cross-reference, capability, framing); 0 cross-specialist corroborations · routed: 0 inline, 0 Pass 1, 0 Pass 2, 3 Pass 3 (verified 3, contradicted 0, unverifiable 0).
• Cited-claim spot-checks: not run (no cited claims)
• Frontmatter sweep: not run (no frontmatter in diff)
• Temporal-trigger sweep: ran (recency words present in diff; spot-check in-review)
• Code execution: not run (no static/programs/ change)
• Code-examples checks: not run (no fenced code blocks in content files)
• Editorial-balance pass: not run (not under content/blog/)

🚨 Outstanding	⚠️ Low-confidence	💡 Pre-existing	✅ Resolved
0	0	0	0

🔍 Verification trail

3 claims extracted · 3 verified · 0 unverifiable · 0 contradicted

• L7 in layouts/partials/mermaid.html "import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';" → ✅ verified (framing: strengthened — official mermaid docs recommend the versioned form (e.g. mermaid@11), but the unversioned path used in the claim is also valid and resolves to…; evidence: The URL https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs is a valid jsDelivr CDN path for the mermaid ESM module. The official mermaid docs and multiple sources confirm this file exists at this path (with or without a pinned…; source: https://simplemermaid.com/blog/mermaid-js-beginners-guide.html)
• L9 in layouts/partials/mermaid.html "import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';" → ✅ verified (evidence: The official Mermaid docs at mermaid.js.org/intro/ show exactly: "import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';" as the recommended CDN import.; source: https://mermaid.js.org/intro/)
• L7 in static/js/pulumi-mermaid-theme.js "* import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';" → ✅ verified (evidence: The official Mermaid documentation confirms this exact URL: import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'; is the canonical CDN import path for Mermaid v11.; source: https://mermaid.ai/open-source/config/usage.html)

🚨 Outstanding in this PR

No outstanding findings in this PR.

⚠️ Low-confidence

No low-confidence findings.

💡 Pre-existing issues in touched files (optional)

No pre-existing issues in touched files.

✅ Resolved since last review

No items resolved since the last review.

📜 Review history

• 2026-06-26T18:09:56Z — Reviewed Mermaid theme/partial refactor; CDN import URLs verified, no blockers (9d81641)

---

Need a re-review? Want to dispute a finding? Mention @claude and include #update-review.
(For ad-hoc questions or fixes, just @claude — no hashtag.)

[pulumi-bot]

Your site preview for commit 9d81641 is ready! 🎉

http://www-testing-pulumi-docs-origin-pr-19904-9d816418.s3-website.us-west-2.amazonaws.com

[pulumi-bot]

Lighthouse Performance Report

Commit: 9d81641 | Metric definitions

Page	Device	Score	FCP	LCP	TBT	CLS	SI
Homepage	Mobile	🟡 55	3.0s	3.9s	948ms	0.012	6.9s
Homepage	Desktop	🟡 80	0.8s	1.1s	263ms	0.040	2.8s
Install Pulumi	Mobile	🟡 61	5.5s	8.0s	117ms	0.028	5.5s
Install Pulumi	Desktop	🟡 81	1.3s	1.9s	0ms	0.005	3.0s
AWS Get Started	Mobile	🟡 59	5.3s	7.8s	92ms	0.092	5.3s
AWS Get Started	Desktop	🟡 86	1.3s	1.9s	0ms	0.023	1.6s

[CamSoper]

This looks great! Someone was just asking me the other day about our Mermaid support.