What problem does it solve? Mermaid diagrams often render incorrectly or look inconsistent in dark-mode panels — nodes land in the wrong subgraph, subgraph titles with punctuation break the whole diagram, and colors fail to distinguish current versus fixed flows. This Skill provides the exact patterns to author diagrams that render correctly. ## Core Features & Use Cases - Panel coloring rules: Documents how flowchart subgraphs and sequence diagram rect blocks receive palette colors by declaration order, so you can control visual grouping. - Syntax pitfalls and fixes: Covers node-to-subgraph assignment, quoted subgraph titles for punctuation, label line breaks, and arrow conventions for calls versus responses. - Diagram type selection: Includes a decision table mapping scenarios (processes, interactions, schemas, timelines) to flowchart, sequence, ERD, state, class, C4, git graph, gantt, and pie diagrams. - Use Case: When writing a design doc comparing a broken code path to a fixed one, use the two-subgraph flowchart pattern so the panel colors the current path cyan and the fixed path red automatically. ## Quick Start Use the pavilio-mermaid-chart skill to write a flowchart with subgraphs showing the current broken flow versus the fixed flow for my design doc.
