mcpField
S
slidev-mermaid

slidev-mermaid

github.com/yoanbernabeuドキュメント41222 回インストール39 週間前に更新
リポジトリ

slidev-mermaid について

slidev-mermaidは、SlidevのプレゼンテーションでMermaid図を作成するためのガイドです。図の構文やスタイル設定に加え、図の選び方や簡潔にまとめる方法も扱います。

主な機能

  1. 01Mermaidのテキスト構文で図を作成
  2. 02フローチャートとシーケンス図の作成
  3. 03クラス図・状態図・ER図の作成
  4. 04ガントチャート・タイムライン・マインドマップの作成
  5. 05テーマ・拡大率・図のスタイル設定

活用シーン

  1. 01スライドでシステム構成を示す
  2. 02リクエストの流れや相互作用を説明
  3. 03データモデルやエンティティ関係を提示
  4. 04プロジェクト日程やタイムラインを作成

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/slidev-mermaidを入力して読み込まれたか確認します。

詳細

Slidev の Mermaid ダイアグラム

このスキルでは、Slidev プレゼンテーションで Mermaid 構文を使って視覚的なダイアグラムを作成する方法を扱います。Mermaid を使うと、シンプルなテキストでフローチャート、シーケンス図、クラス図など、さまざまな種類のダイアグラムを作成できます。

このスキルを使う場面

  • フローチャートやプロセス図を作成する
  • システムアーキテクチャを示す
  • シーケンスやワークフローを可視化する
  • クラス図やエンティティ図を作成する
  • 組織図を作成する
  • タイムラインやガントチャートを表示する

基本構文

mermaid 言語を指定したコードブロックを使います。

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

フローチャート

上から下へのフロー
```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
```
左から右へのフロー
```mermaid
graph LR
    A[Input] --> B[Process] --> C[Output]
```
ノードの形状
```mermaid
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\]
```
矢印の種類
```mermaid
graph LR
    A --> B
    C --- D
    E -.-> F
    G ==> H
    I --text--> J
    K ---|text| L
```

シーケンス図

基本的なシーケンス
```mermaid
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
```
アクティベーション付き
```mermaid
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
```
注釈とループ
```mermaid
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
```

クラス図

基本的なクラス
```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }

    class Dog {
        +String breed
        +bark()
    }

    class Cat {
        +meow()
    }

    Animal <|-- Dog
    Animal <|-- Cat
```
関係
```mermaid
classDiagram
    classA --|> classB : Inheritance
    classC --* classD : Composition
    classE --o classF : Aggregation
    classG --> classH : Association
    classI -- classJ : Link
    classK ..> classL : Dependency
    classM ..|> classN : Realization
```

状態図

```mermaid
stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: Start
    Processing --> Success: Complete
    Processing --> Error: Fail
    Success --> [*]
    Error --> Idle: Retry
```
入れ子になった状態
```mermaid
stateDiagram-v2
    [*] --> Active

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

    Active --> [*]: Shutdown
```

エンティティ関係図

```mermaid
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
    }
```

ガントチャート

```mermaid
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
```

円グラフ

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

Git グラフ

```mermaid
gitGraph
    commit
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    merge feature
    commit
```

マインドマップ

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

タイムライン

```mermaid
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
```

ダイアグラムのスタイル設定

テーマオプション
```mermaid {theme: 'neutral'}
graph TD
    A --> B --> C
```

使用可能なテーマ：default、neutral、dark、forest、base

スケールオプション
```mermaid {scale: 0.8}
graph TD
    A --> B --> C
```
オプションの組み合わせ
```mermaid {theme: 'neutral', scale: 0.7}
graph LR
    A --> B --> C --> D
```

カスタムスタイル

ノードクラス
```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
```
リンクのスタイル設定
```mermaid
graph LR
    A --> B
    B --> C
    linkStyle 0 stroke:#f00,stroke-width:2px
    linkStyle 1 stroke:#0f0,stroke-width:2px
```

設定

Mermaid のグローバル設定

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',
    },
  }
})

ベストプラクティス

1. ダイアグラムはシンプルにする

❌ 複雑すぎる例

20+ nodes, crossing lines everywhere

✓ 明確で焦点が絞られた例

5-10 nodes, logical flow
2. 意味のあるラベルを使う

❌ 曖昧なラベル

graph TD
    A --> B --> C

✓ 説明的なラベル

graph TD
    Request[HTTP Request] --> Auth[Authentication]
    Auth --> Response[JSON Response]
3. 適切なダイアグラムの種類を選ぶ
内容ダイアグラムの種類
プロセスフローフローチャート
API 呼び出しシーケンス図
データモデルクラス図／ER 図
プロジェクトのタイムラインガントチャート
分布円グラフ
階層マインドマップ
4. アニメーションを検討する

v-click を使ってダイアグラムの各部分を表示します。

<v-click>

```mermaid
graph TD
    A --> B
```

</v-click>

<v-click>

```mermaid
graph TD
    A --> B --> C
```

</v-click>

よくあるパターン

システムアーキテクチャ
```mermaid
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
```
リクエストフロー
```mermaid
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
```

出力形式

ダイアグラムを作成する場合：

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]

コメント

Markdown 対応