slidev-mermaid

仓库: yoanbernabeu/slidev-skills
安装量: 46
排名: #16007

安装

npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-mermaid

This skill covers creating visual diagrams using Mermaid syntax in Slidev presentations. Mermaid allows you to create flowcharts, sequence diagrams, class diagrams, and many other diagram types using simple text.

When to Use This Skill

  • Creating flowcharts and process diagrams

  • Showing system architecture

  • Visualizing sequences and workflows

  • Creating class and entity diagrams

  • Building organizational charts

  • Displaying timelines and Gantt charts

Basic Syntax

Use a code block with mermaid language:

```mermaid
graph TD
    A[Start] --> B[Process]
    B --> C[End]

## Flowcharts

### Top-Down Flow

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

### Left-Right Flow

graph LR
    A[Input] --> B[Process] --> C[Output]

### Node Shapes

graph TD
    A[Rectangle]
    B(Rounded)
    C([Stadium])
    D[[Subroutine]]
    E[(Database)]
    F((Circle))
    G>Asymmetric]
    H{Diamond}
    I{{Hexagon}}
    J[/Parallelogram/]
    K[\Parallelogram Alt\]

### Arrow Types

graph LR
    A --> B
    C --- D
    E -.-> F
    G ==> H
    I --text--> J
    K ---|text| L

## Sequence Diagrams

### Basic Sequence

sequenceDiagram
    participant U as User
    participant S as Server
    participant D as Database

    U->>S: Request
    S->>D: Query
    D-->>S: Result
    S-->>U: Response

### With Activation

sequenceDiagram
    participant C as Client
    participant S as Server

    C->>+S: Login Request
    S->>S: Validate
    S-->>-C: Token

    C->>+S: API Call
    S-->>-C: Data

### Notes and Loops

sequenceDiagram
    participant A as Alice
    participant B as Bob

    Note over A: Alice thinks
    A->>B: Hello Bob!
    Note over A,B: Shared note

    loop Every minute
        A->>B: Are you there?
    end

    alt Success
        B-->>A: Yes!
    else Failure
        B-->>A: No response
    end

## Class Diagrams

### Basic Class

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

    class Dog {
        +String breed
        +bark()
    }

    class Cat {
        +meow()
    }

    Animal <|-- Dog
    Animal <|-- Cat

### Relationships

classDiagram
    classA --|> classB : Inheritance
    classC --* classD : Composition
    classE --o classF : Aggregation
    classG --> classH : Association
    classI -- classJ : Link
    classK ..> classL : Dependency
    classM ..|> classN : Realization

## State Diagrams

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: Start
    Processing --> Success: Complete
    Processing --> Error: Fail
    Success --> [*]
    Error --> Idle: Retry

### Nested States

stateDiagram-v2
    [*] --> Active

    state Active {
        [*] --> Idle
        Idle --> Running: Start
        Running --> Paused: Pause
        Paused --> Running: Resume
        Running --> Idle: Stop
    }

    Active --> [*]: Shutdown

## Entity Relationship Diagrams

erDiagram
    USER ||--o{ ORDER : places
    USER {
        int id PK
        string name
        string email
    }
    ORDER ||--|{ LINE_ITEM : contains
    ORDER {
        int id PK
        date created
        string status
    }
    PRODUCT ||--o{ LINE_ITEM : includes
    PRODUCT {
        int id PK
        string name
        float price
    }
    LINE_ITEM {
        int quantity
    }

## Gantt Charts

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD

    section Planning
    Requirements    :a1, 2024-01-01, 7d
    Design         :a2, after a1, 5d

    section Development
    Backend        :b1, after a2, 14d
    Frontend       :b2, after a2, 14d

    section Testing
    QA             :c1, after b1, 7d
    UAT            :c2, after c1, 3d

## Pie Charts

pie title Language Usage
    "JavaScript" : 45
    "Python" : 25
    "TypeScript" : 20
    "Other" : 10

## Git Graphs

gitGraph
    commit
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    merge feature
    commit

## Mind Maps

mindmap
    root((Slidev))
        Features
            Markdown
            Vue Components
            Animations
        Tech Stack
            Vite
            Vue 3
            UnoCSS
        Export
            PDF
            PPTX
            SPA

## Timeline

timeline
    title History of Slidev
    2020 : Project Started
    2021 : v0.1 Released
         : Theme System Added
    2022 : Monaco Editor
         : Magic Move
    2023 : v0.40
         : Improved Animations
    2024 : v0.50
         : Browser Export

## Styling Diagrams

### Theme Option

```mermaid {theme: 'neutral'} graph TD A --> B --> C

Available themes: default, neutral, dark, forest, base

Scale Option

```mermaid {scale: 0.8}
graph TD
    A --> B --> C

### Combined Options

```mermaid {theme: 'neutral', scale: 0.7} graph LR A --> B --> C --> D

Custom Styling

Node Classes

```mermaid
graph TD
    A[Important]:::important --> B[Normal]
    B --> C[Warning]:::warning

    classDef important fill:#f96,stroke:#333,stroke-width:2px
    classDef warning fill:#ff0,stroke:#333

### Link Styling

graph LR
    A --> B
    B --> C
    linkStyle 0 stroke:#f00,stroke-width:2px
    linkStyle 1 stroke:#0f0,stroke-width:2px

## Configuration

### Global Mermaid Config

Create `setup/mermaid.ts`:

import { defineMermaidSetup } from '@slidev/types'

export default defineMermaidSetup(() => { return { theme: 'neutral', themeVariables: { primaryColor: '#3b82f6', primaryTextColor: '#fff', primaryBorderColor: '#2563eb', lineColor: '#64748b', secondaryColor: '#f1f5f9', }, } })

## Best Practices

### 1. Keep Diagrams Simple

❌ **Too complex**

20+ nodes, crossing lines everywhere

✓ **Clear and focused**

5-10 nodes, logical flow

### 2. Use Meaningful Labels

❌ **Vague labels**

graph TD A --> B --> C

✓ **Descriptive labels**

graph TD Request[HTTP Request] --> Auth[Authentication] Auth --> Response[JSON Response]

### 3. Choose Right Diagram Type

| Process flow 
| Flowchart 

| API calls 
| Sequence 

| Data models 
| Class/ER 

| Project timeline 
| Gantt 

| Distribution 
| Pie 

| Hierarchy 
| Mind map 

### 4. Consider Animation

Use v-click to reveal diagram parts:


graph TD
    A --> B


graph TD
    A --> B --> C


## Common Patterns

### System Architecture

graph TB
    subgraph Client
        UI[Web App]
        Mobile[Mobile App]
    end

    subgraph Backend
        API[API Gateway]
        Auth[Auth Service]
        Core[Core Service]
    end

    subgraph Data
        DB[(PostgreSQL)]
        Cache[(Redis)]
    end

    UI --> API
    Mobile --> API
    API --> Auth
    API --> Core
    Core --> DB
    Core --> Cache

### Request Flow

sequenceDiagram
    actor User
    participant FE as Frontend
    participant BE as Backend
    participant DB as Database

    User->>FE: Click Button
    FE->>BE: POST /api/action
    BE->>DB: INSERT
    DB-->>BE: OK
    BE-->>FE: 201 Created
    FE-->>User: Success Toast

## Output Format

When creating diagrams:

DIAGRAM PURPOSE: [What it illustrates] DIAGRAM TYPE: [flowchart/sequence/class/etc.]

```mermaid {[options]} [diagram code]

KEY ELEMENTS:

- Node A: [represents...]

- Node B: [represents...]

- Arrow X->Y: [means...]

STYLING NOTES:

- Theme: [chosen theme]

- Scale: [if adjusted]

- Custom classes: [if any]

```

← 返回排行榜