L1 Mermaid Diagram Styling Skill

This skill standardizes Mermaid rendering in L1 posts where WordPress filters and theme CSS can override native Mermaid visuals.

Skill Scope

The skill targets Mermaid diagrams embedded in L1 blocks, especially wrappers like:

• <div class="kant-arg-block arg-terms diagram-container">
• descendants under .diagram-container .mermaid

It provides a repeatable rule set for:

• Arrowhead and connector stroke color stability
• Edge label background transparency and text offset
• Mermaid init theme variables
• Link stroke defaults
• Preserving rect.basic fill behavior (no forced fill override)

Canonical Selector Rules

Inject this <style> block before the diagram-container wrapper:

<style>
.diagram-container .mermaid *[id^="arrowhead"] path,
.diagram-container .mermaid marker path {
  fill: #cccccc !important;
  stroke: #cccccc !important;
}

.diagram-container .mermaid .edgeLabel,
.diagram-container .mermaid .edgeLabel rect {
  background-color: transparent !important;
  fill: transparent !important;
}

.diagram-container .mermaid .edgeLabel text {
  transform: translateY(-20px);
}
</style>

Mermaid Init + Color Rules

Use this init preamble in Mermaid blocks:

%%{init: {
  "theme": "base",
  "themeVariables": {
    "fontFamily": "'IBM Plex Serif', 'IBM Plex Sans', serif",
    "textColor": "#e2e8f0",
    "lineColor": "#cccccc",
    "edgeLabelBackground": "transparent"
  }
}}%%

Use a default link style:

linkStyle default stroke:#cccccc,stroke-width:1.5px,color:#cccccc

rect.basic Behavior Rule

rect.basic fill color should stay Mermaid-driven (theme/palette controlled), not force-overridden by global CSS.

Allowed:

• Connector/arrow stroke overrides
• Edge label transparency overrides

Disallowed:

• rect.basic { fill: ... }
• broad node fill overrides that flatten Mermaid node palette

Skill Script

Registered executable script:

• /var/www/html/vania-novikau.me/ai-scripts/check/check_l1_mermaid_diagram_styles.js

Capabilities:

• validate: checks required selectors/init/linkStyle and rect.basic constraints
• apply: injects missing canonical style block and removes forbidden rect.basic fill overrides

Deployment + Cache Steps

After applying style fixes locally:

1. Sync scripts/docs to remote server
2. Flush WordPress cache
3. Rebuild/redeploy documentation if docs were changed
4. Reindex RAG docs

Typical operational sequence:

• rsync local ai-scripts/ to /var/www/html/ai-scripts/
• rsync local docs to /var/www/html/rag-source/docs/
• wp cache flush --allow-root
• Reindex documentation in RAG service

Verification Checklist

• L1 page renders Mermaid connectors in #cccccc
• Edge label backgrounds are transparent
• Edge label text is vertically offset to avoid overlap
• rect.basic nodes keep palette diversity (no forced flat fill)
• Documentation page is visible under /documentation/docs/ops/workflow/l1-mermaid-diagram-styles