mermaid-local
Installation
SKILL.md
Mermaid Skill
1. mmdc vs revealjs Rendering Difference
%%{init}%% themeVariables work in mmdc PNG but are overridden by revealjs
CSS at render time. Quarto revealjs injects CSS vars via
mermaid-init.js defaultCSS:
| CSS variable | Targets | Default value |
|---|---|---|
--mermaid-edge-color |
signal text, loop text | #999 (gray) |
--mermaid-label-fg-color |
actor names | #2a76dd (blue) |
--mermaid-node-fg-color |
alt/else labels | #000 (black) |
Result: mmdc shows black text; revealjs shows faint/colored text.
2. Fix: Black Text in revealjs
Add CSS override to YAML include-in-header in .qmd file:
Related skills