visualizing-with-mermaid_skill

Overview

This skill creates professional Mermaid diagrams with clear visual hierarchy and consistent styling. It focuses on readability, semantic color use, and purpose-driven layouts so diagrams communicate decisions and system structure quickly. Dark mode styling is used by default unless light mode is explicitly requested.

How this skill works

I inspect the diagram purpose, audience, and the kind of relationship or flow you need to show, then choose the appropriate Mermaid diagram type (flowchart, sequence, state, class, ERD, Gantt, etc.). I apply a dark-mode color palette, semantic fills, shape semantics, subgraph grouping, and typography rules to guide the eye to critical elements. I optimize layout direction (LR or TB), spacing, and grouping, and I recommend splitting complex systems into focused diagrams for clarity.

When to use it

• Documenting process flows with decisions or branching (flowchart)
• Describing time-based interactions or APIs (sequence diagram)
• Showing lifecycle states and triggers (state diagram)
• Modeling data structures, entities, and relationships (class or ERD)
• Visualizing system components, layers, and deployment boundaries (architecture)

Best practices

• Default to dark mode colors; switch to light mode only on request
• Pick the simplest diagram type that communicates the decision or flow
• Use semantic colors (3–4 max) and shape differences to convey meaning
• Group related components with subgraphs and background fills for boundaries
• Limit nodes per diagram (7–12) and break complex systems into focused views
• Ensure high contrast and readable labels; use line breaks for long text

Example use cases

• High-level architecture with subgraphs for presentation, business logic, and data layers
• API request/response sequence showing retries and error flows
• User onboarding state machine highlighting success/error transitions
• Database ERD for a service with key cardinalities and relationships
• Flowchart for an error-handling critical path in a request pipeline