Swift-Selena: Skill for Claude Code

Mermaid Diagram Skill

Creates syntactically correct mermaid diagrams following official specifications and preventing common errors.

---

Overview

This skill helps you create error-free mermaid diagrams by:

• Following official mermaid syntax specifications
• Avoiding common pitfalls (special characters, reserved words, wrong note syntax)
• Providing correct structure for each diagram type
• Based on real experience: 76 diagrams fixed, 20+ iterations avoided

When to use:

• Creating flowcharts, sequence diagrams, class diagrams, etc.
• Editing existing mermaid diagrams
• Converting design ideas into visual diagrams

---

Quick Start

Flowchart Basic Syntax

flowchart TD
    Start[Start Process]
    Process[Process Data]
    Decision{Is Valid?}
    End[End]

    Start --> Process
    Process --> Decision
    Decision -->|Yes| End
    Decision -->|No| Process

Sequence Diagram Basic Syntax

sequenceDiagram
    participant A as Alice
    participant B as Bob

    A->>B: Hello Bob
    B->>A: Hi Alice

    Note right of B: Bob thinks

Class Diagram Basic Syntax

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }

    class Dog {
        +bark()
    }

    Animal <|-- Dog

---

Critical Rules (MUST FOLLOW)

Rule 1: Special Characters in Labels

Problem characters: :, (), [], {}, @, ;, ,

Solutions:

Option A: Use double quotes

flowchart LR
    A["Function: process()"]
    B["Array [1, 2, 3]"]

Option B: Use HTML entities

• : → :
• ( → (
• ) → )
• [ → [
• ] → ]
• ; → &#59;

WRONG:

flowchart LR
    A[Function: process()]  ❌ Colon breaks syntax

---

Rule 2: Reserved Words

"end" (lowercase):

flowchart TD
    Start --> End   ✅ Capitalized OK
    Start --> end   ❌ Breaks diagram
    Start --> END   ✅ All caps OK

"o" and "x" at edge start:

flowchart LR
    A --- oB  ❌ Creates circle edge
    A --- xB  ❌ Creates cross edge
    A --- oC  ✅ Add space: o B