mermaid-architectlisted
Install: claude install-skill smicolon/ai-kit
# Mermaid Architect
Specialized skill for creating robust, syntactically correct Mermaid.js diagrams for Markdown documentation, PR descriptions, and architectural blueprints.
## Syntax Best Practices
1. **Quote Node Labels**: Always quote labels containing special characters, brackets, or parentheses:
```mermaid
graph TD
A["Client (Browser / Mobile)"] --> B["API Gateway (Hono / Next.js)"]
```
2. **Cardinality in ERDs**:
- `||--||` : Exactly one to one
- `||--o{` : One to zero-or-more
- `||--|{` : One to one-or-more
- `}o--o{` : Zero-or-more to zero-or-more
---
## Supported Diagram Types
### 1. Entity Relationship Diagram (ERD)
```mermaid
erDiagram
USER ||--o{ POST : writes
USER {
uuid id PK
string email UK
datetime created_at
}
POST {
uuid id PK
uuid author_id FK
string title
text content
}
```
### 2. Sequence Diagram (Auth & API Flow)
```mermaid
sequenceDiagram
autonumber
actor User
participant Client as Client App
participant Auth as Better Auth Server
participant DB as Database
User->>Client: Click Login with Google
Client->>Auth: Redirect to /api/auth/sign-in/social
Auth-->>Client: OAuth consent redirect
User->>Auth: Approve scopes
Auth->>DB: Upsert User & Session
Auth-->>Client: Set HttpOnly session cookie
Client-->>User: Redirect to /dashboard
```
### 3. C4 / System Topology Flowchart
```mermaid
flowchart TD
subgraph Client Tier
Web["Next.js Web App"]
Mobile["Flut