🎯

mermaid-diagram

🎯Skill

from ntaksh42/agents

What it does

Generates Mermaid diagrams like flowcharts, sequence, and class diagrams from text-based markdown notation.

📦

Part of

ntaksh42/agents(78 items)

mermaid-diagram

Installation

📋 No install commands found in docs. Showing default command. Check GitHub for actual instructions.

Quick InstallInstall with npx

npx skills add ntaksh42/agents --skill mermaid-diagram

Need more details? View full documentation on GitHub →

2Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Generate Mermaid diagrams including flowcharts, sequence diagrams, and class diagrams. Use when creating visual diagrams in documentation.

Overview

# Mermaid Diagram Skill

Mermaid記法でダイアグラムを生成するスキルです。

概要

フローチャート、シーケンス図、ガントチャート等をテキストから生成します。

主な機能

フローチャート: プロセスフロー
シーケンス図: インタラクション
クラス図: UML クラス図
ER図: データベース設計
ガントチャート: プロジェクト管理
パイチャート: 割合表示
状態遷移図: ステートマシン
ジャーニーマップ: ユーザージャーニー

使用方法

```

以下のプロセスのフローチャートをMermaidで作成：

ユーザー登録
メール検証
プロフィール設定

```

ダイアグラムタイプ

フローチャート

```mermaid

graph TD

A[開始] --> B{条件分岐}

B -->|Yes| C[処理A]

B -->|No| D[処理B]

C --> E[終了]

D --> E

```

graph TD

A[開始] --> B{条件分岐}

B -->|Yes| C[処理A]

B -->|No| D[処理B]

C --> E[終了]

D --> E

```

シーケンス図

```mermaid

sequenceDiagram

participant User

participant Frontend

participant Backend

participant Database

User->>Frontend: ログイン

Frontend->>Backend: POST /api/login

Backend->>Database: SELECT user

Database-->>Backend: User data

Backend-->>Frontend: JWT token

Frontend-->>User: ログイン成功

```

sequenceDiagram

participant User

participant Frontend

participant Backend

participant Database

User->>Frontend: ログイン

Frontend->>Backend: POST /api/login

Backend->>Database: SELECT user

Database-->>Backend: User data

Backend-->>Frontend: JWT token

Frontend-->>User: ログイン成功

```

クラス図

```mermaid

classDiagram

class User {

+String id

+String name

+String email

+login()

+logout()

}

class Order {

+String id

+Date date

+Float total

+addItem()

+removeItem()

}

User "1" --> "*" Order : places

```

classDiagram

class User {

+String id

+String name

+String email

+login()

+logout()

}

class Order {

+String id

+Date date

+Float total

+addItem()

+removeItem()

}

User "1" --> "*" Order : places

```

ER図

```mermaid

erDiagram

USER ||--o{ ORDER : places

ORDER ||--|{ ORDER_ITEM : contains

PRODUCT ||--o{ ORDER_ITEM : "ordered in"

USER {

int id PK

string name

string email

}

ORDER {

int id PK

int user_id FK

date created_at

}

ORDER_ITEM {

int order_id FK

int product_id FK

int quantity

}

PRODUCT {

int id PK

string name

decimal price

}

```

erDiagram

USER ||--o{ ORDER : places

ORDER ||--|{ ORDER_ITEM : contains

PRODUCT ||--o{ ORDER_ITEM : "ordered in"

USER {

int id PK

string name

string email

}

```

ガントチャート

```mermaid

gantt

title プロジェクトスケジュール

dateFormat YYYY-MM-DD

section フェーズ1

要件定義 :a1, 2024-01-01, 30d

設計 :a2, after a1, 20d

section フェーズ2

開発 :b1, after a2, 60d

テスト :b2, after b1, 30d

section デプロイ

リリース準備 :c1, after b2, 10d

本番リリース :milestone, c2, after c1, 1d

```

gantt

title プロジェクトスケジュール

dateFormat YYYY-MM-DD

section フェーズ1

要件定義 :a1, 2024-01-01, 30d

設計 :a2, after a1, 20d

```

状態遷移図

```mermaid

stateDiagram-v2

[*] --> Draft

Draft --> Review : Submit

Review --> Approved : Approve

Review --> Draft : Reject

Approved --> Published : Publish

Published --> [*]

```

stateDiagram-v2

[*] --> Draft

Draft --> Review : Submit

Review --> Approved : Approve

Review --> Draft : Reject

Approved --> Published : Publish

Published --> [*]

```

パイチャート

```mermaid

pie title 売上構成

"製品A" : 42

"製品B" : 30

"製品C" : 18

"その他" : 10

```

pie title 売上構成

"製品A" : 42

"製品B" : 30

"製品C" : 18

"その他" : 10

```

ユーザージャーニー

```mermaid

journey

title ユーザー登録のジャーニー

section 発見

ランディングページ訪問: 5: User

機能を確認: 4: User

section 登録

サインアップクリック: 3: User

情報入力: 2: User

メール認証: 3: User

section 利用開始

チュートリアル: 4: User

初回利用: 5: User

```

HTMLへの埋め込み

```html

graph TD

A[開始] --> B[処理]

B --> C[終了]

```

ベストプラクティス

明確なラベル: ノード名を分かりやすく
方向性: TD（上下）、LR（左右）を適切に選択
色分け: 重要な部分を強調
コメント: 複雑な図には説明を追加

バージョン情報

スキルバージョン: 1.0.0
最終更新: 2025-01-22

More from this repository10

🎯

document-summarizer🎯Skill

Generates concise summaries of documents by extracting key information and condensing text into a more digestible format.

🎯

algorithmic-art🎯Skill

Generates creative algorithmic art using p5.js, creating unique visual designs with patterns, fractals, and dynamic animations.

🎯

sql-query-helper🎯Skill

Generates, optimizes, and explains SQL queries with best practices, providing intelligent database query solutions across multiple database platforms.

🎯

plantuml-diagram🎯Skill

Generates PlantUML diagrams (class, sequence, component) to visually represent system architecture and UML models.

🎯

azure-pipelines-generator🎯Skill

Generates Azure Pipelines YAML configurations automatically for CI/CD workflows, supporting multi-stage builds and deployments across different environments.

🎯

kubernetes-helper🎯Skill

Assists Kubernetes users by generating, validating, and explaining Kubernetes manifests and configurations with AI-powered insights.

🎯

using-git-worktrees🎯Skill

Creates isolated Git worktrees with smart directory selection and safety verification for feature work and branch management.

🎯

dependency-analyzer🎯Skill

Analyzes project dependencies, identifies potential conflicts, and provides insights into library compatibility and version management.

🎯

brainstorming🎯Skill

Collaboratively refines rough ideas into fully-formed designs through systematic questioning, alternative exploration, and incremental validation.

🎯

azure-boards-helper🎯Skill

Manages Azure Boards work items by creating, querying, and automating work item workflows using WIQL and comprehensive templates.