Ryunosuke-Tanaka-sti/diagram-generator-html.md

## diagram-generator-html.md

      
    Raw
  

              diagram-generator-html.md
            
          
    name
    diagram-generator-html
  
  
    description
    技術ブログ記事用のHTML図解を生成しPNG画像に変換するスキル。Tailwind CSS・Material Icons使用、6つのデザインパターンをサポート。
  
  
    allowed-tools
    Read, Write, Bash
  
  
Diagram Generator HTML Skill

技術ブログ記事用のHTML図解を生成し、PNG画像に変換します。Tailwind CSS・Material Icons使用、6つのデザインパターンをサポートします。
When to Use

以下の場合にこのスキルを使用してください：

ユーザーが技術ブログ記事用の図解をHTMLで作成したい場合
ユーザーが「HTMLで図を作って」「Tailwindで図解を生成して」などと依頼した場合
アーキテクチャ図、フロー図、関係図、比較図が必要な場合
CSS機能を活用した柔軟なレイアウトが必要な場合

Supported Diagram Patterns

1. アーキテクチャ図


レイヤードアーキテクチャ: 水平層の表現
マイクロサービス: サービス間通信の視覚化
イベント駆動: イベントフローの表現

2. フロー図


プロセスフロー: ステップバイステップの処理
データフロー: データの変換と移動
ユーザーフロー: ユーザーインタラクション

3. 関係図


エンティティ関係図: データモデル
クラス図: オブジェクト関係
シーケンス図: 時系列の相互作用

4. 比較図


Before/After: 改善前後の対比
オプション比較: 複数選択肢の並列表示
パフォーマンス比較: メトリクスの視覚化

5. コンポーネント図


システム構成: コンポーネント間の依存関係
デプロイメント図: 物理的な配置

6. 概念図


コンセプトマップ: 概念間の関係
ツリー構造: 階層的な情報

Design Specifications

サイズとフォーマット


固定サイズ: 1280 x 720 px (16:9)
フォーマット: HTML5 + Tailwind CSS
最終出力: PNG画像
保存先: docs/article/[feature-name]/images/

保存先の例:

HTML: docs/article/tmp-driven-development/images/architecture-diagram.html
PNG: docs/article/tmp-driven-development/images/architecture-diagram.png

HTML作成の必須ルール

⚠️ 重要: 以下のルールを必ず守ってください

✅ 1ファイル = 1図解
✅ 固定サイズ・背景色必須: <body class="w-[1280px] h-[720px] m-0 p-0 overflow-hidden bg-[背景色]">（背景色は内側divと統一）
✅ 外側padding: p-8 (32px) または p-10 (40px) - 上下左右の余白を確保（Playwright変換で正確にレンダリング）
✅ 要素間隔: gap-4 (16px) - 標準的な間隔（縦に多くの要素がある場合は調整可能）
✅ Tailwind CDN: <script src="https://cdn.tailwindcss.com"></script>
✅ JavaScriptによる動的要素禁止
✅ アニメーション禁止: animate-*, transition-*, hover:*
✅ カスタムCSS禁止: Tailwind Utilityのみ使用
✅ 最小フォントサイズ: 14px (text-sm) 以上
✅ 高さ制限厳守: コンテンツが720pxに収まるよう、padding・gap・フォントサイズを調整

詳細は docs/features/html-to-png-converter/html-guidelines.md を参照。
アクセシビリティ要件


コントラスト比: WCAG Level AA準拠 (4.5:1以上)
セマンティックHTML: role="img", aria-label を使用
最小フォントサイズ: text-sm (14px) 以上
色依存の回避: 色 + 形状の組み合わせ

Tailwind カラーパレット

アクセシビリティを考慮した推奨配色：


用途
Tailwind Class
説明


Primary
bg-blue-500, text-blue-900
主要要素


Secondary
bg-green-500, text-green-900
補助要素


Accent
bg-orange-500, text-orange-900
強調要素


Text
text-gray-900
テキスト


Background
bg-white, bg-gray-50
背景


Border
border-gray-300
ボーダー


Material Icons 使用

図解にアイコンを使用する場合は、Google Material Iconsを利用できます。
アイコンの取得方法:

https://fonts.google.com/icons にアクセス
使用したいアイコンを検索して選択
右側パネルで "Font" を選択
"Material Symbols Outlined" フォントを選択
アイコン名（例: database, cloud, settings）をコピー

HTMLでの使用方法:
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>アイコン使用例</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Material Symbols Outlined フォント読み込み -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<body class="w-[1280px] h-[720px] m-0 p-0 overflow-hidden">
    <div class="w-full h-full bg-white flex items-center justify-center gap-8">
        <!-- データベースアイコン -->
        <div class="flex flex-col items-center">
            <span class="material-symbols-outlined text-6xl text-blue-600">database</span>
            <p class="text-sm mt-2">データベース</p>
        </div>

        <!-- クラウドアイコン -->
        <div class="flex flex-col items-center">
            <span class="material-symbols-outlined text-6xl text-green-600">cloud</span>
            <p class="text-sm mt-2">クラウド</p>
        </div>

        <!-- 設定アイコン -->
        <div class="flex flex-col items-center">
            <span class="material-symbols-outlined text-6xl text-orange-600">settings</span>
            <p class="text-sm mt-2">設定</p>
        </div>
    </div>
</body>
</html>
推奨アイコンサイズ:

小: text-2xl (24px)
中: text-4xl (36px)
大: text-6xl (60px)

よく使うアイコン例:

database - データベース
cloud - クラウド
storage - ストレージ
api - API
settings - 設定
security - セキュリティ
code - コード
terminal - ターミナル
arrow_forward - 右矢印
arrow_downward - 下矢印
check_circle - チェック
error - エラー

Usage Flow

1. ユーザーからの依頼を確認

ユーザーが以下の情報を提供しているか確認してください：

図解のタイプ (アーキテクチャ、フロー、関係、比較など)
含めるべき要素 (コンポーネント、ステップ、関係など)
特記事項 (色の好み、強調すべき部分など)

2. 不足情報の確認

必要に応じて以下を質問してください：

図解のタイトル
主要な要素とその関係
強調すべきポイント
配色の好み (あれば)
保存先記事ディレクトリ名

3. HTML生成

以下のテンプレートを使用してHTMLを生成してください：
基本テンプレート

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[図解のタイトル]</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Material Icons（アイコン使用時のみ必要） -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<body class="w-[1280px] h-[720px] m-0 p-0 overflow-hidden bg-white">
    <div class="w-full h-full bg-white flex items-center justify-center p-10" role="img" aria-label="[図解の説明]">
        <!-- 図解の内容 -->
        <!-- アイコン例: <span class="material-symbols-outlined text-4xl text-blue-600">database</span> -->
    </div>
</body>
</html>
4. HTMLファイルを保存

ユーザーに記事ディレクトリを確認してから保存：
どの記事用の図解ですか？
例: tmp-driven-development, uv-workspace など

保存先: docs/article/[feature-name]/images/[ファイル名].html
ファイル名の命名規則:

小文字とハイフンを使用
図解の内容が分かる名前
例: architecture-diagram.html, flow-user-auth.html

5. PNG変換の実行

HTMLファイル保存後、html-to-png Skillを使用してPNG変換：
uv run --package sios-tech-lab-analytics-ga4-tools html2png \
  --file docs/article/[feature-name]/images/[ファイル名].html \
  --output docs/article/[feature-name]/images/[ファイル名].png
6. ユーザーへの報告

以下の情報をユーザーに報告してください：
✅ HTML図解を生成し、PNGに変換しました。

【図解情報】
- タイプ: [パターン名]
- タイトル: [タイトル]
- サイズ: 1280 x 720 px (16:9)

【保存先】
- HTML: docs/article/[feature-name]/images/[ファイル名].html
- PNG: docs/article/[feature-name]/images/[ファイル名].png

【ファイルサイズ】
- PNG: [サイズ] KB ([200KB以下なら「推奨範囲内」])

【次のステップ】
HTMLファイルを編集して再生成する場合は、以下のコマンドを実行してください：
```bash
uv run --package sios-tech-lab-analytics-ga4-tools html2png \
  --file docs/article/[feature-name]/images/[ファイル名].html \
  --output docs/article/[feature-name]/images/[ファイル名].png \
  --force


## Design Pattern Examples

### アーキテクチャ図の例（Material Icons使用）

``````html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>レイヤードアーキテクチャ</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<body class="w-[1280px] h-[720px] m-0 p-0 overflow-hidden bg-gray-50">
    <div class="w-full h-full bg-gray-50 flex items-center justify-center p-10" role="img" aria-label="3層アーキテクチャ図">
        <div class="w-full max-w-4xl flex flex-col gap-4">
            <!-- Presentation Layer -->
            <div class="bg-blue-100 border-2 border-blue-500 rounded-lg p-6">
                <div class="flex items-center justify-center gap-3">
                    <span class="material-symbols-outlined text-5xl text-blue-600">desktop_windows</span>
                    <div class="text-center">
                        <h2 class="text-2xl font-bold text-blue-900">Presentation Layer</h2>
                        <p class="text-sm text-blue-700 mt-1">UI・ユーザーインターフェース</p>
                    </div>
                </div>
            </div>

            <!-- Arrow -->
            <div class="text-center">
                <span class="material-symbols-outlined text-5xl text-gray-400">arrow_downward</span>
            </div>

            <!-- Business Logic Layer -->
            <div class="bg-green-100 border-2 border-green-500 rounded-lg p-6">
                <div class="flex items-center justify-center gap-3">
                    <span class="material-symbols-outlined text-5xl text-green-600">settings</span>
                    <div class="text-center">
                        <h2 class="text-2xl font-bold text-green-900">Business Logic Layer</h2>
                        <p class="text-sm text-green-700 mt-1">ビジネスロジック</p>
                    </div>
                </div>
            </div>

            <!-- Arrow -->
            <div class="text-center">
                <span class="material-symbols-outlined text-5xl text-gray-400">arrow_downward</span>
            </div>

            <!-- Data Access Layer -->
            <div class="bg-orange-100 border-2 border-orange-500 rounded-lg p-6">
                <div class="flex items-center justify-center gap-3">
                    <span class="material-symbols-outlined text-5xl text-orange-600">database</span>
                    <div class="text-center">
                        <h2 class="text-2xl font-bold text-orange-900">Data Access Layer</h2>
                        <p class="text-sm text-orange-700 mt-1">データアクセス</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

フロー図の例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>認証フロー</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="w-[1280px] h-[720px] m-0 p-0 overflow-hidden bg-white">
    <div class="w-full h-full bg-white flex items-center justify-center p-8" role="img" aria-label="ユーザー認証フロー">
        <div class="flex flex-col items-center gap-4">
            <!-- Start -->
            <div class="bg-green-500 text-white rounded-full px-8 py-4 text-lg font-bold shadow-lg">
                開始
            </div>

            <!-- Arrow -->
            <div class="text-gray-400 text-4xl">↓</div>

            <!-- Process 1 -->
            <div class="bg-blue-500 text-white rounded-lg px-8 py-4 text-center shadow-lg">
                <p class="text-lg font-bold">認証情報入力</p>
                <p class="text-sm mt-1">ユーザーID・パスワード</p>
            </div>

            <!-- Arrow -->
            <div class="text-gray-400 text-4xl">↓</div>

            <!-- Process 2 -->
            <div class="bg-blue-500 text-white rounded-lg px-8 py-4 text-center shadow-lg">
                <p class="text-lg font-bold">検証処理</p>
                <p class="text-sm mt-1">認証サーバーで確認</p>
            </div>

            <!-- Arrow -->
            <div class="text-gray-400 text-4xl">↓</div>

            <!-- End -->
            <div class="bg-red-500 text-white rounded-full px-8 py-4 text-lg font-bold shadow-lg">
                完了
            </div>
        </div>
    </div>
</body>
</html>
比較図の例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Before/After比較</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="w-[1280px] h-[720px] m-0 p-0 overflow-hidden bg-gray-50">
    <div class="w-full h-full bg-gray-50 flex items-center justify-center p-10" role="img" aria-label="改善前後の比較図">
        <div class="w-full max-w-5xl flex flex-col gap-4">
            <h1 class="text-3xl font-bold text-center mb-8 text-gray-800">パフォーマンス改善</h1>

            <div class="grid grid-cols-2 gap-8">
                <!-- Before -->
                <div class="bg-red-50 border-2 border-red-300 rounded-lg p-6">
                    <h2 class="text-2xl font-bold text-red-700 mb-4">Before</h2>
                    <div class="space-y-3">
                        <div class="bg-white p-3 rounded">
                            <p class="text-sm font-semibold text-gray-700">処理時間</p>
                            <p class="text-xl font-bold text-red-600">5.2秒</p>
                        </div>
                        <div class="bg-white p-3 rounded">
                            <p class="text-sm font-semibold text-gray-700">メモリ使用量</p>
                            <p class="text-xl font-bold text-red-600">850MB</p>
                        </div>
                    </div>
                </div>

                <!-- After -->
                <div class="bg-green-50 border-2 border-green-300 rounded-lg p-6">
                    <h2 class="text-2xl font-bold text-green-700 mb-4">After</h2>
                    <div class="space-y-3">
                        <div class="bg-white p-3 rounded">
                            <p class="text-sm font-semibold text-gray-700">処理時間</p>
                            <p class="text-xl font-bold text-green-600">1.8秒 ⬇ 65%</p>
                        </div>
                        <div class="bg-white p-3 rounded">
                            <p class="text-sm font-semibold text-gray-700">メモリ使用量</p>
                            <p class="text-xl font-bold text-green-600">320MB ⬇ 62%</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
Important Notes


固定サイズ・背景色必須: <body class="w-[1280px] h-[720px] m-0 p-0 overflow-hidden bg-[背景色]"> を必ず指定
外側padding: p-8 (32px) または p-10 (40px) で上下左右の余白を確保
高さ制限: Playwright変換により自動的に固定サイズで正確にレンダリング（gap-4推奨）
Tailwind CDN必須: <script src="https://cdn.tailwindcss.com"></script> を必ず含める
JavaScript禁止: 動的要素は一切使用しない
アニメーション禁止: animate-*, transition-*, hover:* は使用しない
カスタムCSS禁止: <style> タグやインラインスタイルは使用しない
HTMLファイル保存: PNG変換前に必ずHTMLファイルを保存
ファイル指定変換: html2png --file で変換（--html は使用しない）

Validation Checklist

HTML生成時に以下を確認してください：

 <!DOCTYPE html> 宣言がある
 Tailwind CDN が読み込まれている
 <body> に w-[1280px] h-[720px] m-0 p-0 overflow-hidden bg-[背景色] クラスがある
 外側divに p-8 または p-10 が設定されている
 要素間隔に gap-4 が使用されている（Playwright変換で正確にレンダリング）
 JavaScript コードが含まれていない
 アニメーションクラス（animate-* など）が使用されていない
 カスタムCSSが含まれていない
 最小フォントサイズが text-sm (14px) 以上
 role="img" と aria-label が適切に設定されている

Troubleshooting

HTMLファイルが生成されない


保存先ディレクトリが存在するか確認
ディレクトリが存在しない場合は作成してから保存

PNG変換が失敗する


HTMLファイルが正しく保存されているか確認
html2png --file コマンドのパスが正しいか確認
--force オプションで既存ファイルを上書き

ファイルサイズが200KB超過


HTMLを簡素化（要素を減らす）
カスタムサイズで再変換:
uv run --package sios-tech-lab-analytics-ga4-tools html2png \
  --file diagram.html \
  --width 960 --height 540 \
  --output diagram.png --force


Related Skills


html-to-png: 本Skillから内部的に呼び出すHTML→PNG変換Skill
diagram-generator-svg: SVGで図解を生成する代替Skill
svg-to-png: SVG→PNG変換Skill

Related Documentation

詳細な技術情報は以下を参照：

docs/features/html-to-png-converter/html-guidelines.md: HTML作成の詳細ガイドライン
docs/features/html-to-png-converter/specification.md: 技術仕様
docs/research/blog-diagram-design-patterns.md: デザインパターン研究
Tailwind CSS: https://tailwindcss.com/docs
Material Icons: https://fonts.google.com/icons
name	diagram-generator-html
description	技術ブログ記事用のHTML図解を生成しPNG画像に変換するスキル。Tailwind CSS・Material Icons使用、6つのデザインパターンをサポート。
allowed-tools	Read, Write, Bash
用途	Tailwind Class	説明
Primary	`bg-blue-500`, `text-blue-900`	主要要素
Secondary	`bg-green-500`, `text-green-900`	補助要素
Accent	`bg-orange-500`, `text-orange-900`	強調要素
Text	`text-gray-900`	テキスト
Background	`bg-white`, `bg-gray-50`	背景
Border	`border-gray-300`	ボーダー