Summary
FlowMaster generates Mermaid diagrams with default (light) styling. Many developers use dark-themed editors and documentation sites. The generated diagrams should support a dark mode color scheme.
What needs to happen
- Define a dark mode color palette for diagram elements:
- Node fill colors (dark backgrounds with light text)
- Edge/arrow colors (visible on dark backgrounds)
- Subgraph background colors
- Add a theme toggle instruction in the skill file (e.g., a parameter or flag for dark/light)
- Use Mermaid's built-in theming system where possible:
- `%%{init: {"theme": "dark"}}%%` directive
- Custom `themeVariables` for FlowMaster-specific styling
- Ensure all node types remain distinguishable in dark mode
Acceptance criteria
- Diagrams render correctly on dark backgrounds (GitHub dark mode, VS Code dark themes)
- All node type colors have sufficient contrast in dark mode
- Light mode remains the default (no regression)
- User can request dark mode via a clear instruction
Getting started
- Review Mermaid theming docs: https://mermaid.js.org/config/theming.html
- Test current FlowMaster output with `%%{init: {"theme": "dark"}}%%`
- Identify which node styles need color overrides
Summary
FlowMaster generates Mermaid diagrams with default (light) styling. Many developers use dark-themed editors and documentation sites. The generated diagrams should support a dark mode color scheme.
What needs to happen
Acceptance criteria
Getting started