From qe-framework
Generates software diagrams using Mermaid syntax including class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, state diagrams, Git graphs, and Gantt charts.
How this skill is triggered — by the user, by Claude, or both
Slash command
/qe-framework:Qmermaid-diagramsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create professional software diagrams with Mermaid's text-based syntax. Mermaid renders diagrams from simple text definitions, making them version-controllable and easy to maintain alongside code.
Create professional software diagrams with Mermaid's text-based syntax. Mermaid renders diagrams from simple text definitions, making them version-controllable and easy to maintain alongside code.
All Mermaid diagrams follow this pattern:
diagramType
definition content
Core principles:
classDiagram, sequenceDiagram, flowchart)%%classDiagram
Title -- Genre
Title *-- Season
Title *-- Review
User --> Review : creates
class Title {
+string name
+int releaseYear
+play()
}
class Genre {
+string name
+getTopTitles()
}
sequenceDiagram
participant User
participant API
participant Database
User->>API: POST /login
API->>Database: Query credentials
Database-->>API: Return user data
alt Valid credentials
API-->>User: 200 OK + JWT token
else Invalid credentials
API-->>User: 401 Unauthorized
end
flowchart TD
Start([User visits site]) --> Auth{Authenticated?}
Auth -->|No| Login[Show login page]
Auth -->|Yes| Dashboard[Show dashboard]
Login --> Creds[Enter credentials]
Creds --> Validate{Valid?}
Validate -->|Yes| Dashboard
Validate -->|No| Error[Show error]
Error --> Login
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : includes
USER {
int id PK
string email UK
string name
datetime created_at
}
ORDER {
int id PK
int user_id FK
decimal total
datetime created_at
}
%%.mmd files alongside code---
config:
theme: base
themeVariables:
primaryColor: "#ff6b6b"
---
flowchart LR
A --> B
Available themes: default, forest, dark, neutral, base
Layout: layout: dagre (default), layout: elk (for complex diagrams)
Look: look: classic (default), look: handDrawn (sketch style)
Native support: GitHub/GitLab, VS Code (Mermaid extension), Notion, Obsidian, Confluence
Export options:
npm install -g @mermaid-js/mermaid-cli → mmdc -i input.mmd -o output.png{} in labels; use proper escapingAlways use: starting a new project/feature, documenting complex systems, explaining architecture decisions, designing DB schemas, planning refactoring, onboarding
npx claudepluginhub inho-team/qe-framework --plugin qe-frameworkCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.