Repository navigation
post(blog): promote mermaid-diagram-gallery from QA draft to public reference - #35
Conversation
…eference
The old qa-mermaid-stress-test.mdx was written in private-QA voice
('Internal verification page', 'If anything renders broken, the issue
is upstream...'). Reframe as a public reference post that complements
the debug-arc post and let it surface in the blog listing.
Changes:
- File rename: qa-mermaid-stress-test.mdx -> mermaid-diagram-gallery.mdx
(the new slug reads better in nav and in inbound links)
- Frontmatter:
- title: 'A reference gallery: every Mermaid diagram type the blog supports'
- description: rewritten as user-facing 'copy-paste reference'
- tags: 'qa' -> 'reference'
- draft: true -> false
- Body rewritten:
- Intro pivots from 'internal QA' to 'live reference + companion to debug-arc'
- Each section reframes 'should render with --muted/0.4 cluster bg' as
'cluster backgrounds get a subtle muted tint so they read as a group'
(descriptive, not normative)
- Adds notes that explain WHY each section exists from the reader's
perspective (when would they want a stadium? a classDef? a state diagram?)
- Closes with an 'open an issue if you hit a broken edge case' invite
- Old URL had no inbound links; no redirect needed.
Verified: bun run build green, all 6 mermaid blocks compile.
🚀 Preview deployedURL: https://2383254d-codeseys-personal-website.codeseys.workers.dev Updated on every push to this PR. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 594a20a247
ℹ️ 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".
| Mermaid emits `classDef` styles as inline `style="..."` attributes on | ||
| the rendered nodes. Inline styles beat the site's class-scoped theme, | ||
| so your custom colors win — exactly what you want. |
There was a problem hiding this comment.
This newly public reference says classDef colors pass through untouched, but the blog theme currently forces node fills/strokes with !important selectors in src/pages/blog/[slug].astro (for both light and dark modes). CSS !important declarations override Mermaid's normal inline style attributes, so the Critical/Async nodes in this example render with the site theme instead of the red/blue colors users are told to expect and copy. Either exempt classed nodes from the theme overrides or avoid presenting classDef tinting as supported here.
Useful? React with 👍 / 👎.
Reframes the QA stress-test post as a permanent public reference gallery for every mermaid diagram type the blog supports.
qa-mermaid-stress-test.mdx->mermaid-diagram-gallery.mdxdraft: true->falsePairs with
/blog/mermaid-theme-debug-arcas the evergreen 'what does it look like' companion to that post's 'how the theming actually works'.