HTML+Tailwind CSSで図解を生成。「HTMLで図を作って」「アーキテクチャ図」「フロー図」「関係図を作成」と言われたら使う。
技術ブログ・ドキュメント用のHTML図解を生成する。
| パターン | 用途 |
|---|---|
| アーキテクチャ図 | レイヤード、マイクロサービス、イベント駆動 |
| フロー図 | プロセス、データ、ユーザーフロー |
| 関係図 | ER図、クラス図、依存関係 |
| 比較図 | Before/After、オプション比較 |
| コンポーネント図 | システム構成、デプロイメント |
| 同心円図 | 階層構造、ベン図 |
| ディレクトリツリー図 | ファイル構成、フォルダ階層 |
| タイムライン図 | プロジェクト進行、マイルストーン |
<!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,[email protected],100..700,0..1,-50..200" />
</head>
<body class="w-[1280px] h-[720px] m-0 p-0 overflow-hidden bg-[背景色]">
<div class="w-full h-full flex items-center justify-center p-10"
role="img" aria-label="[説明]">
<!-- 図解内容 -->
</div>
</body>
</html>
w-[1280px] h-[720px] 必須p-8 または p-10gap-4 以上text-sm (14px) 以上| 用途 | Class |
|---|---|
| Primary | bg-blue-500, text-blue-900 |
| Secondary | bg-green-500, text-green-900 |
| Accent | bg-orange-500, text-orange-900 |
| ダーク背景 | bg-slate-900, bg-gray-900 |
| ライト背景 | bg-white, bg-gray-50 |
Material Icons:
<span class="material-symbols-outlined text-4xl text-[色]">smart_toy</span>
SVGロゴ（GitHub, Discord等）は直接埋め込む。
# Playwright使用
npx playwright screenshot file.html file.png --viewport-size=1280,720
# または html-screenshot CLI
uv run html-screenshot --file file.html --output file.png
詳細なパターン例: examples.md
<!DOCTYPE html> 宣言<body> に固定サイズクラスp-8 または p-10role="img" と aria-label 設定