cardiology-visual-system

循環器ビジュアルシステム

ビジュアルコンテンツのリクエストを最適なツールにインテリジェントに振り分ける、統合型メタスキルです。Napkin.ai、NotebookLM、その他のサブスクリプションを切り替える必要はありません。すべてClaude Code内で完結します。

クイックリファレンス：各ツールでできること

リクエスト	使用するツール	出力
ブログヘッダー、ライフスタイル写真、患者のシナリオ	Fal.ai	PNG画像
インフォグラフィック、解説用グラフィック、医療イラスト	Gemini	PNG/JPG画像
フローチャート、治療アルゴリズム、臨床経路	Mermaid	SVG/PNG図
スライド資料、プレゼンテーション	Marp	PPTX/PDF/HTMLスライド
データチャート、試験結果、経時的な傾向	Plotly	インタラクティブHTMLまたはPNG
インタラクティブな解説、ダッシュボード	React Artifact	インタラクティブHTML
手早く作成する可視化のプロトタイプ、探索的データ可視化	LIDA ⚠️	PNG＋コード（プロトタイプ専用）

自動振り分けロジック

ビジュアルをリクエストすると、その内容を分析して最適なツールを判断します。

→ Fal.aiに振り分け（ストック画像／人物画像）

キーワード：blog image、header、hero image、lifestyle、patient photo、stock、person、family、emotional、scenario

最適な用途：

• ブログ記事のヘッダー
• 患者の体験を描いたイラスト
• ライフスタイル／ウェルネス画像
• 感情や人物を中心にしたシーン
• 回復や希望を表す画像

**不向きな用途：**医療機器、心電図、図表、データ、テキストの多いコンテンツ

→ Geminiに振り分け（インフォグラフィックと医療イラスト）

キーワード：infographic、explainer、illustration、visual summary、concept diagram、icons、steps、process visual、simplified、educational graphic

最適な用途：

• インフォグラフィック（Napkin.aiが生成するようなもの）
• 医学的概念のイラスト
• わかりやすく簡略化した解説用グラフィック
• アイコンを使った教育用ビジュアル
• 画像内にテキストを含むコンテンツ
• 記事のビジュアル要約

→ Mermaidに振り分け（図とフローチャート）

キーワード：flowchart、algorithm、pathway、decision tree、sequence、timeline、process flow、treatment algorithm、diagnostic pathway、workflow

最適な用途：

• 臨床判断ツリー
• 治療アルゴリズム
• 診断経路
• プロセスのワークフロー
• 組織図
• シーケンス図
• タイムライン用のガントチャート

→ Marpに振り分け（スライド資料）

キーワード：slides、presentation、deck、powerpoint、lecture、talk、keynote

最適な用途：

• 学会プレゼンテーション
• 教育講演
• 患者教育用スライド
• グランドラウンドのプレゼンテーション
• CMEコンテンツ

→ Plotlyに振り分け（データ可視化）

キーワード：chart、graph、plot、data、statistics、trial results、forest plot、trends、comparison、survival curve、Kaplan-Meier、bar chart、line graph、scatter

最適な用途：

• 臨床試験の結果
• 統計的な比較
• 経時的な傾向
• フォレストプロット
• 生存曲線
• 介入前後のデータ
• 複数の研究の比較

→ React Artifactに振り分け（インタラクティブコンテンツ）

キーワード：interactive、dashboard、calculator、tool、widget、animated、explorable

最適な用途：

• リスク計算ツール
• インタラクティブな解説
• アニメーション付き図
• 患者教育ツール
• 探索しながら理解できる解説

→ LIDA によるルート（迅速なプロトタイピング）⚠️ プロトタイピング専用

キーワード：quick、prototype、exploratory、rough draft、multiple options、try、experiment、brainstorm visualization

⚠️ 重大な制限事項：

• プロトタイピング専用 ― 公開用または患者向けの資料には使用しないでください
• 品質にばらつきがあります ― 医学的な正確性を必ず確認してください
• データ列が10以下の場合に最適に動作します
• 専門的な医療用グラフ（正確なフォレストプロット、Kaplan-Meier 曲線）には対応していません
• 使用する前に、必ず手動で検証する必要があります

最適な用途：

• データをすばやく探索的に可視化する（「このデータから何が分かるか？」）
• 複数の可視化候補を生成する
• 新しいデータに適したグラフの種類をブレインストーミングする
• 内部での研究レビューのみ

使用しない用途：

• 出版可能な品質のグラフ → 代わりに Plotly を使用してください
• 患者向けの資料 → 本番用ツールを使用してください
• 規制当局への申請資料 → 絶対に使用しないでください
• 最終版のブログ記事 → Plotly または Gemini を使用してください

迷った場合は、データの可視化に LIDA ではなく Plotly を使用してください。

---

ツール 1：Fal.ai（ブログ用画像）

セットアップ

export FAL_KEY="your-fal-api-key"
# Get key from: https://fal.ai/dashboard/keys

使用方法

python scripts/fal_image.py "A 55-year-old man experiencing chest pain at work" --output hero.png

モデル

モデル	料金	最適な用途
fal-ai/recraft-v3	$0.04	デフォルト - 最高品質
fal-ai/flux-pro/v1.1	$0.04	写真のようにリアルな画像
fal-ai/flux/schnell	$0.003	すばやく安価なドラフト

生成するものと生成しないもの

✅ 生成するもの：

• 患者の症状や体験（胸痛、息切れ）
• ライフスタイルの場面（運動、健康的な料理）
• 医師と患者の会話
• 家族の支えを示す場面
• 回復を祝う場面

❌ 生成しないもの：

• 医療機器（ペースメーカー、ステント、弁）
• 臨床画像（心電図、血管造影画像、手術室の場面）
• 解剖図
• 医薬品

---

ツール 2：Gemini（インフォグラフィック）

セットアップ

export GEMINI_API_KEY="your-gemini-api-key"

使用方法

python scripts/gemini_infographic.py \
  --topic "Heart Failure Stages" \
  --style "minimalist medical" \
  --output hf_stages.jpg

医療用インフォグラフィックのプロンプト作成

プロンプトの構成：

Create a [STYLE] infographic showing [TOPIC].

Include:
- [Key point 1]
- [Key point 2]
- [Key point 3]

Style: [clean/minimalist/modern medical], use icons, clear hierarchy, 
professional color palette (blues, teals for medical), easy to read text

プロンプトの例：

1. 疾患の進行：

   "心不全の4つのステージ（A、B、C、D）を示す、ミニマルな医療用インフォグラフィックを作成してください。各ステージにはアイコンを使い、矢印で進行を示し、簡潔な説明を含めてください。すっきりとしたレイアウトで、医療用の青を基調とした配色にしてください。"

2. 治療法の比較：

   "心房細動に対する薬物療法と介入治療を比較するインフォグラフィックを作成してください。2列に分け、各アプローチにはアイコンを使い、メリットとデメリットを箇条書きにしてください。現代的な医療スタイルにしてください。"

3. 危険因子の要約：

   "心疾患における変更可能な7つの危険因子を視覚的にまとめてください。各因子にはアイコンを付け、すっきりとしたグリッドレイアウトにし、具体的な対策を提示してください。プロフェッショナルな医療イラストのスタイルにしてください。"

---

ツール 3：Mermaid（図）

Mermaid Chart MCP が接続されています。構造化された図に使用してください。

よく使われる循環器系の図の種類

1. 治療アルゴリズム：

flowchart TD
    A[Acute Chest Pain] --> B{STEMI?}
    B -->|Yes| C[Primary PCI < 90 min]
    B -->|No| D{High-risk NSTEMI?}
    D -->|Yes| E[Early invasive < 24h]
    D -->|No| F[Ischemia-guided strategy]

2. 臨床経路：

flowchart LR
    A[Diagnosis] --> B[Risk Stratification]
    B --> C[Treatment Selection]
    C --> D[Follow-up Protocol]

3. 診断用決定木：

flowchart TD
    A[Dyspnea] --> B{BNP elevated?}
    B -->|Yes| C{Echo findings?}
    B -->|No| D[Consider other causes]
    C -->|HFrEF| E[GDMT initiation]
    C -->|HFpEF| F[Diuretics + address comorbidities]

4. タイムライン（ガントチャート）：

gantt
    title Post-MI Care Timeline
    dateFormat  YYYY-MM-DD
    section Acute
    Hospital stay        :a1, 2024-01-01, 5d
    section Recovery
    Cardiac rehab        :a2, after a1, 12w
    section Long-term
    Medication titration :a3, after a1, 6m

---

ツール 4：Marp（スライド）

セットアップ

npm install -g @marp-team/marp-cli

使用方法

1. Marp の構文で Markdown を作成します
2. presentation.md として保存します
3. 変換します：

marp presentation.md --pptx           # PowerPoint
marp presentation.md --pdf            # PDF
marp presentation.md -o slides.html   # HTML

医療用スライドの Marp テンプレート

---
marp: true
theme: default
paginate: true
backgroundColor: #ffffff
color: #333333
---

# Heart Failure Management
## Modern Approaches in 2024

Dr. [Your Name]
Interventional Cardiology

---

# Agenda

1. Current Guidelines
2. New Therapies
3. Case Discussion

---

# Key Statistics

- 6.7 million Americans with HF
- 50% mortality at 5 years
- $30.7 billion annual cost

![bg right:40%](path/to/chart.png)

---

# Treatment Algorithm

```mermaid
flowchart TD
    A[HFrEF Diagnosis] --> B[GDMT Initiation]
    B --> C[Titrate to target doses]

---

重要なポイント

1. 早期の治療開始が重要です
2. 4剤併用療法が標準治療です
3. 適切な患者にはデバイス治療を行います

---

ご質問はありますか？

お問い合わせ先：[email protected]

---

## Tool 5: Plotly (Data Visualization)

### Setup
```bash
pip install plotly kaleido pandas --break-system-packages

よく使われる医療用の可視化

1. 棒グラフ（試験結果）：

import plotly.express as px

data = {
    'Treatment': ['Drug A', 'Drug B', 'Placebo'],
    'Event Rate (%)': [12.3, 15.1, 18.7]
}
fig = px.bar(data, x='Treatment', y='Event Rate (%)',
             title='Primary Endpoint: Major Cardiovascular Events',
             color='Treatment')
fig.write_html('trial_results.html')
fig.write_image('trial_results.png')

2. フォレストプロット形式：

import plotly.graph_objects as go

studies = ['PARADIGM-HF', 'DAPA-HF', 'EMPEROR-Reduced']
hr = [0.80, 0.74, 0.75]
lower = [0.73, 0.65, 0.65]
upper = [0.87, 0.85, 0.86]

fig = go.Figure()
for i, study in enumerate(studies):
    fig.add_trace(go.Scatter(
        x=[lower[i], upper[i]], y=[study, study],
        mode='lines', line=dict(color='gray', width=2)
    ))
    fig.add_trace(go.Scatter(
        x=[hr[i]], y=[study],
        mode='markers', marker=dict(size=12, color='navy')
    ))

fig.add_vline(x=1.0, line_dash="dash", line_color="red")
fig.update_layout(title='Hazard Ratios for Heart Failure Trials',
                  xaxis_title='Hazard Ratio (95% CI)')

3. 時間経過に伴う傾向：

import plotly.express as px

fig = px.line(df, x='Year', y='Mortality Rate', 
              color='Treatment Era',
              title='Heart Failure Mortality Trends 1990-2024')
fig.write_html('trends.html')

---

ツール 6：LIDA（迅速なプロトタイピング）⚠️ プロトタイピング専用

⚠️ 重要な警告

LIDA はプロトタイピング専用のツールです。次の用途には使用しないでください：

• 出版可能な品質の可視化
• 患者向けの資料
• 規制当局への申請資料
• 最終版のブログ記事やソーシャルメディア投稿

本番用の可視化には、以下を使用してください：

• Plotly（データグラフ）
• Gemini（インフォグラフィック）
• Fal.ai（画像）

セットアップ

# Install LIDA
pip install lida llmx openai --break-system-packages

# Set API key (choose one)
export OPENAI_API_KEY="your-key"      # Recommended
export GOOGLE_API_KEY="your-key"      # Free tier (Gemini)
export ANTHROPIC_API_KEY="your-key"   # Claude

LIDA の機能

LIDA（自動可視化生成）は、LLM を使用して次のことを行います。

1. データ構造を分析する
2. 自然言語から可視化コードを生成する
3. 複数の可視化候補を作成する
4. 複数のライブラリ（Plotly、Matplotlib、Seaborn、Altair）に対応する

公開: ACL 2023（Microsoft Research）

制限事項

1. 推奨は10列以下 - LLM のコンテキスト制約
2. 品質にばらつきがあります - AI 生成のため、確認が必要です
3. 専門的な医療チャートには非対応 - 本格的なフォレストプロットや Kaplan-Meier 曲線には対応していません
4. 報告されているエラー率: 3.5%未満ですが、医療上の正確性は必ず確認してください
5. 本番環境向けではありません - 探索的な用途にのみ使用してください

使用方法

基本的な使い方:

python scripts/lida_quick_viz.py "Show mortality by treatment group" trial_data.csv

複数の候補:

python scripts/lida_quick_viz.py "Compare outcomes" data.csv --candidates 3

医療用テンプレートを使用:

python scripts/lida_quick_viz.py "Trial results" data.csv --template trial_comparison

ライブラリを指定:

python scripts/lida_quick_viz.py "Trends over time" data.csv --library plotly

インタラクティブモード:

python scripts/lida_quick_viz.py --interactive data.csv

テンプレート一覧を表示:

python scripts/lida_quick_viz.py --list-templates

医療用テンプレート

テンプレート	説明	使用例
trial_comparison	治療群を比較します	主要評価項目の結果
patient_demographics	ベースライン特性	患者集団の概要
outcome_comparison	主要／副次評価項目	複数のアウトカムの比較
trend_analysis	経時的な傾向	縦断データ
survival_curve	イベント発生までの時間（簡易版）	イベント非発生生存率（本格的な KM 曲線ではありません）

ワークフローの例

1. 探索的分析（LIDA）:

# Quick exploration of new trial data
python scripts/lida_quick_viz.py \
  "Show primary endpoint by treatment arm with confidence intervals" \
  trial_results.csv \
  --template trial_comparison \
  --candidates 3

2. 候補を確認:

• 医療上の正確性を確認する
• データの解釈を検証する
• 最適な方法を選択する

3. 本番用バージョン（Plotly）:

# Recreate selected visualization in production quality
python scripts/plotly_charts.py bar --data trial_results.csv --output final_chart.png

品質検証チェックリスト

LIDA のすべての出力には、次のチェックリストが含まれます。

⚠️  QUALITY VALIDATION CHECKLIST - REVIEW BEFORE USE

Medical Accuracy:
[ ] Data interpretation is correct
[ ] Statistical measures are appropriate
[ ] Confidence intervals/error bars are correct
[ ] P-values and significance are accurate
[ ] Sample sizes are represented correctly

Visual Design:
[ ] Chart type is appropriate
[ ] Color scheme is professional
[ ] Labels are clear and complete
[ ] Legend is accurate
[ ] Title describes the content

Medical Standards:
[ ] Follows publication standards
[ ] No misleading visualizations
[ ] Appropriate precision
[ ] Context is provided
[ ] Source attribution if needed

LIDA と Plotly の使い分け

シナリオ	ツール	理由
「このデータを見せる最適な方法は？」	LIDA	探索、複数の選択肢
「試験結果を手早く見せて」	LIDA	完璧さよりスピードを優先
「チャートを3案作成して」	LIDA	複数の候補
「出版可能な品質のチャート」	Plotly	本番品質
「ブログ記事用の可視化」	Plotly	最終出力
「患者向け教育」	Plotly	正確性が重要
「規制当局への申請」	Plotly	LIDA は使用しないでください

コスト

モデル	コスト	速度	品質
OpenAI（GPT-4o-mini）	$0.60/M tokens	高速	良好
Gemini（無料枠）	無料	高速	良好
Claude（Sonnet）	変動	中速	優秀

可視化1件あたりの一般的なコスト: $0.01-0.05（ごくわずか）

例: インタラクティブセッション

python scripts/lida_quick_viz.py --interactive trial_data.csv

# In interactive mode:
> list                              # Show templates
> template trial_comparison         # Set template
> library plotly                    # Set library
> viz Show mortality by treatment   # Generate viz
> viz Compare age distribution      # Another viz
> quit

出力構造

lida_output/
├── candidate_1_code.py           # Generated Python code
├── candidate_1.png                # Rendered visualization
├── candidate_2_code.py
├── candidate_2.png
└── ...

---

統合ワークフローの例

シナリオ: 心不全治療薬についてブログ記事を書いています。

ステップ1: ヒーロー画像（Fal.ai）

python scripts/fal_image.py \
  "Elderly patient having hopeful conversation with cardiologist about new treatment options" \
  --output images/hero.png

ステップ2: 治療アルゴリズム（Mermaid）

Create a Mermaid flowchart showing HFrEF GDMT initiation:
- Start with diagnosis
- Branch to ARNI/ACEi + Beta-blocker
- Add SGLT2i + MRA
- Device consideration

ステップ3: 試験データ（Plotly）

# Compare mortality reduction across trials
trials_df = pd.DataFrame({
    'Trial': ['PARADIGM-HF', 'DAPA-HF', 'EMPEROR-Reduced'],
    'Mortality Reduction': [20, 17, 14]
})
fig = px.bar(trials_df, x='Trial', y='Mortality Reduction',
             title='Mortality Reduction in Landmark HF Trials (%)')

ステップ4: 重要な概念のインフォグラフィック（Gemini）

Create a clean medical infographic summarizing the "4 Pillars of HFrEF Therapy":
1. ARNI/ACEi - heart icon
2. Beta-blocker - heart rate icon  
3. MRA - kidney/electrolyte icon
4. SGLT2i - glucose/kidney icon

Style: modern medical, blue color scheme, minimal text, icon-focused

---

API キーチェックリスト

このシステムを使用する前に、次の項目が設定されていることを確認してください。

# Fal.ai (blog images)
export FAL_KEY="your-key"

# Gemini (infographics)
export GEMINI_API_KEY="your-key"

# LIDA (prototyping) - choose one
export OPENAI_API_KEY="your-key"      # Recommended
export GOOGLE_API_KEY="your-key"      # FREE (Gemini)
export ANTHROPIC_API_KEY="your-key"   # Claude

# Mermaid - uses MCP, no key needed
# Plotly - local, no key needed
# Marp - local, no key needed

---

コストの概要

ツール	コスト	一般的な用途
Fal.ai（Recraft）	$0.04/画像	ブログ記事1件につき3～4枚 = $0.16
Gemini	無料枠あり	インフォグラフィック
LIDA（プロトタイピング）	$0.01-0.05/可視化	手早い探索（任意）
Mermaid	無料（MCP）	図
Plotly	無料	データ可視化
Marp	無料	スライド

ブログ記事1件あたりの合計: 約$0.16-0.25（個別のサブスクリプションを利用する場合と比較）

注: LIDA は任意です。コストをかけずにプロトタイピングするには、無料の Gemini モデルを使用してください。

---

このスキルのファイル

cardiology-visual-system/
├── SKILL.md                    # This file
├── scripts/
│   ├── fal_image.py           # Fal.ai image generation
│   ├── gemini_infographic.py  # Gemini infographic generation
│   ├── plotly_charts.py       # Common chart templates
│   ├── lida_quick_viz.py      # LIDA prototyping (⚠️ prototype only)
│   └── convert_slides.sh      # Marp conversion helper
├── templates/
│   ├── marp_medical.md        # Medical slide template
│   └── plotly_medical.py      # Medical chart templates
└── references/
    └── prompt_examples.md     # Curated prompts for each tool