Instruction file imported from Pukujan/design-bakery (.cursor/rules/blog-mermaid.mdc). Copyright stays with the author.

Blog Mermaid

Name: blog-mermaid
Author: Pukujan

Before editing Mermaid init, MermaidDiagram, or .blog-mermaid-chart CSS, read:

guidelines/agent-devlog-mermaid.md
Index: guidelines/agent-devlog-index.md

Quick rules (full history in that file)

Use: theme: 'default', startOnLoad: false, mermaid.render() per chart, wrapper class blog-mermaid-chart
Do not: theme: 'base', contentLoaded(), post-render SVG JS, #mermaid-* CSS selectors
Dark arrows: edge-only themeVariables via configureMermaid(isDark) in MermaidDiagram.tsx (re-render on theme toggle)
Colors: change hex in globals.css under .blog-mermaid-chart only
Loading: .blog-mermaid-viewport--loading reserves min-height: min(70vh, 520px) until SVG measures; do not zero chartSize unless chart text changed
Test: http://localhost:5300/endtoend-engineer/blogs/1 (use port from Vite log if 5300 is busy)

{ "ocm": "1", "id": "pukujan-design-bakery-blog-mermaid-rule", "kind": "skill", "name": "blog-mermaid", "description": "Blog Mermaid — read agent devlog before styling or render changes", "publisher": "Pukujan", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "github-cursor-rules" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "Blog Mermaid — read agent devlog before styling or render changes" ], "primary": false, "metadata": { "source": { "provider": "github-cursor-rules", "repository": "https://github.com/Pukujan/design-bakery", "path": ".cursor/rules/blog-mermaid.mdc", "ref": "201aa6a1d5caa9fb6068c29efe2cab6a08965d57", "url": "https://github.com/Pukujan/design-bakery/blob/201aa6a1d5caa9fb6068c29efe2cab6a08965d57/.cursor/rules/blog-mermaid.mdc", "key": "Pukujan/design-bakery/.cursor/rules/blog-mermaid.mdc" }, "applies_to": "frontend/src/app/modules/blog/render/**,frontend/src/app/modules/blog/public/detail/**,frontend/src/styles/globals.css,guidelines/agent-devlog-mermaid.md" }, "instructions": "# Blog Mermaid\n\n**Before editing Mermaid init, `MermaidDiagram`, or `.blog-mermaid-chart` CSS, read:**\n\n`guidelines/agent-devlog-mermaid.md` \n**Index:** `guidelines/agent-devlog-index.md`\n\n## Quick rules (full history in that file)\n\n- **Use:** `theme: 'default'`, `startOnLoad: false`, `mermaid.render()` per chart, wrapper class `blog-mermaid-chart`\n- **Do not:** `theme: 'base'`, `contentLoaded()`, post-render SVG JS, `#mermaid-*` CSS selectors\n- **Dark arrows:** edge-only `themeVariables` via `configureMermaid(isDark)` in `MermaidDiagram.tsx` (re-render on theme toggle)\n- **Colors:** change h", "cost": { "context_tokens": 228 } }

blog-mermaid

About

Blog Mermaid

Quick rules (full history in that file)

Use it

Manifest

Reviews