Mermaid Diagram
by ntaksh42
Generate Mermaid diagrams including flowcharts, sequence diagrams, and class diagrams. Use when creating visual diagrams in documentation.
Skill Details
Repository Files
1 file in this skill directory
name: mermaid-diagram description: Generate Mermaid diagrams including flowcharts, sequence diagrams, and class diagrams. Use when creating visual diagrams in documentation.
Mermaid Diagram Skill
Mermaid記法でダイアグラムを生成するスキルです。
概要
フローチャート、シーケンス図、ガントチャート等をテキストから生成します。
主な機能
- フローチャート: プロセスフロー
- シーケンス図: インタラクション
- クラス図: UML クラス図
- ER図: データベース設計
- ガントチャート: プロジェクト管理
- パイチャート: 割合表示
- 状態遷移図: ステートマシン
- ジャーニーマップ: ユーザージャーニー
使用方法
以下のプロセスのフローチャートをMermaidで作成：
1. ユーザー登録
2. メール検証
3. プロフィール設定
ダイアグラムタイプ
フローチャート
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
シーケンス図
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: ログイン成功
クラス図
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図
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
}
ガントチャート
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
状態遷移図
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 --> [*]
パイチャート
pie title 売上構成
"製品A" : 42
"製品B" : 30
"製品C" : 18
"その他" : 10
pie title 売上構成
"製品A" : 42
"製品B" : 30
"製品C" : 18
"その他" : 10
ユーザージャーニー
journey
title ユーザー登録のジャーニー
section 発見
ランディングページ訪問: 5: User
機能を確認: 4: User
section 登録
サインアップクリック: 3: User
情報入力: 2: User
メール認証: 3: User
section 利用開始
チュートリアル: 4: User
初回利用: 5: User
HTMLへの埋め込み
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({ startOnLoad: true });</script>
</head>
<body>
<div class="mermaid">
graph TD
A[開始] --> B[処理]
B --> C[終了]
</div>
</body>
</html>
ベストプラクティス
- 明確なラベル: ノード名を分かりやすく
- 方向性: TD（上下）、LR（左右）を適切に選択
- 色分け: 重要な部分を強調
- コメント: 複雑な図には説明を追加
バージョン情報
- スキルバージョン: 1.0.0
- 最終更新: 2025-01-22
Related Skills
Team Composition Analysis
This skill should be used when the user asks to "plan team structure", "determine hiring needs", "design org chart", "calculate compensation", "plan equity allocation", or requests organizational design and headcount planning for a startup.
Startup Financial Modeling
This skill should be used when the user asks to "create financial projections", "build a financial model", "forecast revenue", "calculate burn rate", "estimate runway", "model cash flow", or requests 3-5 year financial planning for a startup.
Dbt Transformation Patterns
Master dbt (data build tool) for analytics engineering with model organization, testing, documentation, and incremental strategies. Use when building data transformations, creating data models, or implementing analytics engineering best practices.
Startup Metrics Framework
This skill should be used when the user asks about "key startup metrics", "SaaS metrics", "CAC and LTV", "unit economics", "burn multiple", "rule of 40", "marketplace metrics", or requests guidance on tracking and optimizing business performance metrics.
Market Sizing Analysis
This skill should be used when the user asks to "calculate TAM", "determine SAM", "estimate SOM", "size the market", "calculate market opportunity", "what's the total addressable market", or requests market sizing analysis for a startup or business opportunity.
Clinical Decision Support
Generate professional clinical decision support (CDS) documents for pharmaceutical and clinical research settings, including patient cohort analyses (biomarker-stratified with outcomes) and treatment recommendation reports (evidence-based guidelines with decision algorithms). Supports GRADE evidence grading, statistical analysis (hazard ratios, survival curves, waterfall plots), biomarker integration, and regulatory compliance. Outputs publication-ready LaTeX/PDF format optimized for drug develo
Anndata
This skill should be used when working with annotated data matrices in Python, particularly for single-cell genomics analysis, managing experimental measurements with metadata, or handling large-scale biological datasets. Use when tasks involve AnnData objects, h5ad files, single-cell RNA-seq data, or integration with scanpy/scverse tools.
Geopandas
Python library for working with geospatial vector data including shapefiles, GeoJSON, and GeoPackage files. Use when working with geographic data for spatial analysis, geometric operations, coordinate transformations, spatial joins, overlay operations, choropleth mapping, or any task involving reading/writing/analyzing vector geographic data. Supports PostGIS databases, interactive maps, and integration with matplotlib/folium/cartopy. Use for tasks like buffer analysis, spatial joins between dat
Market Research Reports
Generate comprehensive market research reports (50+ pages) in the style of top consulting firms (McKinsey, BCG, Gartner). Features professional LaTeX formatting, extensive visual generation with scientific-schematics and generate-image, deep integration with research-lookup for data gathering, and multi-framework strategic analysis including Porter's Five Forces, PESTLE, SWOT, TAM/SAM/SOM, and BCG Matrix.
Plotly
Interactive scientific and statistical data visualization library for Python. Use when creating charts, plots, or visualizations including scatter plots, line charts, bar charts, heatmaps, 3D plots, geographic maps, statistical distributions, financial charts, and dashboards. Supports both quick visualizations (Plotly Express) and fine-grained customization (graph objects). Outputs interactive HTML or static images (PNG, PDF, SVG).