slides-generator

slides-generator

Markdown コンテンツから Hummingbot ブランドのプレゼンテーションスライドを PDF 形式で作成します。技術アーキテクチャやフローチャート向けの 2 カラムレイアウトと Mermaid 図のレンダリングを備えています。

ワークフロー

ステップ 1: Markdown コンテンツを取得する

ユーザーに Markdown ファイルを提供するか、Markdown コンテンツを貼り付けるよう依頼します。コンテンツは次の形式に従う必要があります:

# Presentation Title

## 1. First Slide Title

Content for the first slide. Can include:
- Bullet points
- **Bold text** and *italic text*
- Code blocks

## 2. Second Slide Title

More content here.

## 3. Third Slide Title

And so on...

形式のルール:

• # Title = プレゼンテーションのタイトル（任意、タイトルスライドになります）
• ## N. Slide Title = 新しいスライド（N はスライド番号）
• 各 ## 見出しの下のコンテンツがスライドの内容になります
• Markdown の書式をサポート: リスト、太字、斜体、コードブロック、リンク

ステップ 2: 解析して確認する

PDF を生成する前に、Markdown を解析してユーザーに概要を表示します:

📊 Slide Outline:

1. First Slide Title
2. Second Slide Title
3. Third Slide Title
...

Total: X slides

Please confirm to proceed with PDF generation, or provide edits.

続行する前にユーザーの確認を待ちます。

ステップ 3: PDF を生成する

生成スクリプトを実行します:

bash <(curl -s https://raw.githubusercontent.com/hummingbot/skills/main/skills/slides-generator/scripts/generate_slides.sh) \
  --input "<markdown_file_or_content>" \
  --output "<output_pdf_path>"

または、ユーザーがインラインコンテンツを提供した場合は、まず一時ファイルに保存します:

# Save content to temp file
cat > /tmp/slides_content.md << 'SLIDES_EOF'
<markdown_content_here>
SLIDES_EOF

# Generate PDF
bash <(curl -s https://raw.githubusercontent.com/hummingbot/skills/main/skills/slides-generator/scripts/generate_slides.sh) \
  --input /tmp/slides_content.md \
  --output ~/slides_output.pdf

ステップ 4: 結果を渡す

生成後、ユーザーに次のことを伝えます:

• PDF ファイルの場所
• 生成されたスライドの数
• 必要に応じて PDF を開く／表示することを提案する

既存のスライドを編集する

以前に生成された PDF のスライドをユーザーが編集したい場合:

1. 元の Markdown を読む（利用可能な場合）、または PDF を表示する て現在の内容を把握します
2. ユーザーにどのような変更を加えたいか尋ねます:
   • 特定のスライドの内容を編集する
   • 新しいスライドを追加する
   • スライドを削除する
   • スライドの順序を変更する
3. Markdown に変更を適用します
4. PDF を再生成します

すべてを再生成せずに特定のスライドを更新するには、--edit フラグを使用します:

bash <(curl -s https://raw.githubusercontent.com/hummingbot/skills/main/skills/slides-generator/scripts/generate_slides.sh) \
  --input "<updated_markdown>" \
  --output "<same_pdf_path>" \
  --edit

図

ユーザーは mermaid: 構文を使って自然言語で図を記述できます。PDF を生成する前に、これらの記述を Mermaid コードに変換する必要があります。

ユーザー入力の形式

ユーザーは次のような記述を書きます:

mermaid: A flowchart showing User Interface connecting to Condor and MCP Agents,
both connecting to Hummingbot API (highlighted), then to Client, then to Gateway

Mermaid への変換

記述を適切な Mermaid 構文に変換します:

\`\`\`mermaid
flowchart TB
    A[User Interface] --> B[Condor]
    A --> C[MCP Agents]
    B --> D[Hummingbot API]
    C --> D
    D --> E[Hummingbot Client]
    E --> F[Gateway]
    style D fill:#00D084,color:#fff
\`\`\`

図の種類

• flowchart TD - 上から下へのフローチャート
• flowchart LR - 左から右へのフローチャート
• sequenceDiagram - API およびインタラクションの流れ
• classDiagram - オブジェクト指向設計
• erDiagram - データベーススキーマ

ハイライト

Hummingbot グリーンのハイライトには style NodeName fill:#00D084,color:#fff を使用します。

要件

Mermaid 図には Mermaid CLI が必要です:

npm install -g @mermaid-js/mermaid-cli

コードブロック

ASCII アート、コードスニペット、または整形済みテキストには、通常の \``` コードブロックを使用します:

\`\`\`
Price
  ^
  |  [BUY] --- Level 3
  |  [BUY] --- Level 2
  |  [BUY] --- Level 1
  +-------------------> Time
\`\`\`

コードブロックは等幅フォントで灰色の背景にレンダリングされます。

2 カラムレイアウト

スライドに箇条書きと図の両方がある場合、自動的に 2 カラムでレンダリングされます:

• 左カラム: テキストコンテンツ
• 右カラム: 図

## 4. How It Works

Key features:
- Automated order placement
- Dynamic position management
- Risk-controlled execution
- Real-time monitoring

mermaid: flowchart showing Market Data to Strategy to Orders

翻訳後:

## 4. How It Works

Key features:
- Automated order placement
- Dynamic position management
- Risk-controlled execution
- Real-time monitoring

\`\`\`mermaid
flowchart TD
    A[Market Data] --> B[Strategy]
    B --> C[Orders]
    style B fill:#00D084,color:#fff
\`\`\`

Markdown の例

# Q4 Product Update

## 1. Overview

Today we'll cover:
- Product milestones
- Key metrics
- Roadmap preview

## 2. Architecture

Our system components:
- User-facing interfaces
- Core API layer
- Exchange connectivity

mermaid: flowchart showing UI to API (highlighted) to Gateway

## 3. Key Metrics

| Metric | Q3 | Q4 | Change |
|--------|----|----|--------|
| Users | 10K | 15K | +50% |
| Revenue | $100K | $150K | +50% |

## 4. Q1 Roadmap

1. Mobile app launch
2. Enterprise tier
3. International expansion

## 5. Questions?

Thank you!

Contact: [email protected]

mermaid: の記述を翻訳した後:

## 2. Architecture

Our system components:
- User-facing interfaces
- Core API layer
- Exchange connectivity

\`\`\`mermaid
flowchart TD
    A[UI] --> B[API]
    B --> C[Gateway]
    style B fill:#00D084,color:#fff
\`\`\`

依存関係

スクリプトは必要に応じて確認し、インストールします:

• Python 3
• fpdf2 Python パッケージ（PDF 生成用）

トラブルシューティング

問題	解決策
「Python not found」	Python 3 をインストール: brew install python3（macOS）または apt install python3（Linux）
「fpdf2 not installed」	実行: pip3 install fpdf2
「Permission denied」	出力ディレクトリの書き込み権限を確認する
「Empty PDF」	Markdown 形式が ## N. Title パターンに従っているか確認する

スクリプト

スクリプト	目的
generate_slides.sh	メインの PDF 生成スクリプト