技術図の作成に手間取っていませんか。Mermaid の構文を覚え、draw.io でパーツを手作業で並べても、思い通りの図にならないことがほとんどです。
この記事でわかること:
– fireworks-tech-graph がどんな問題を解決するか
– 7 つのビジュアルスタイルと 14 種のダイアグラムタイプ
– Claude Code へのインストール手順と具体的な使い方
– AI/Agent 設計向けの専用ドメイン知識とは何か
Mermaid と draw.io には限界がある
技術系ドキュメントを作るとき、アーキテクチャ図や UML ダイアグラムの作成が壁になります。Mermaid は構文を一から覚える必要があり、複雑な図になるほど記述が膨らみます。draw.io は直感的に操作できる反面、要素の整列やスタイル統一を手作業でやるのは時間がかかります。
LLM に「構成図を描いて」と依頼しても、ASCII アートや中途半端な Mermaid 定義が返ってくることが多いです。LLM は SVG の描画ルールや図形の意味論をもとから持っていないためです。
自然言語から本番品質の図を生成する
fireworks-tech-graph は、自然言語の一文から本番品質の SVG＋PNG 技術図を生成する Claude Code スキルです。2026 年 4 月 10 日の公開から 2 週間足らずで GitHub スター数が 4,500 を超えています。
https://github.com/yizhiyanhua-ai/fireworks-tech-graph
使い方はシンプルです。Claude Code 上で「Mem0 メモリアーキテクチャをダークスタイルで描いて」と伝えるだけ。スキルがダイアグラムの種類とスタイルを自動で判定し、SVG ファイルと 1920px の PNG を出力します。PNG は rsvg-convert を使って書き出されるため、テキストや線のエッジが潰れない高品質な仕上がりになります。
7 つのスタイルで見た目を使い分ける
プロンプトにスタイル番号を指定するだけで、図のデザインを切り替えられます。
| スタイル | 背景 | 用途 |
|---|---|---|
| Style 1 — Flat Icon | 白 | 技術ドキュメント・公式資料 |
| Style 2 — Dark Terminal | 黒 + ネオン | CTO への説明・発表資料 |
| Style 3 — Blueprint | 深青 + グリッド | インフラ設計書 |
| Style 4 — Notion Clean | 白・単色 | チーム内共有メモ |
| Style 5 — Glassmorphism | ダークグラデーション | スライド・登壇資料 |
| Style 6 — Claude Official | クリーム (#f8f6f3) | Anthropic ブランドに合わせた資料 |
| Style 7 — OpenAI Official | 純白 | OpenAI ブランドに合わせた資料 |
各スタイルはプロンプト例（Stable Prompt Recipes）とともにリポジトリに収録されており、再現性の高い出力が期待できます。
14 種の UML と AI/Agent 専用パターン
対応するダイアグラムは全 14 種の UML タイプを網羅しています。クラス図・コンポーネント図・シーケンス図・ステートマシン・ER 図・デプロイメント図などが含まれます。
加えて、AI/Agent 設計向けの専用パターンが組み込まれています。RAG パイプライン、Agentic Search、Mem0 メモリレイヤー、Multi-Agent Orchestration、ツールコールフローなどは、スキルに内蔵されたドメイン知識をもとに正確な図が生成されます。たとえば「LLM」は二重枠の角丸矩形、「Agent」は六角形、「Vector Store」はリング付きシリンダーといった形状語彙が決まっており、図の意味が一目で伝わります。
OpenAI・Anthropic・Google Gemini・Pinecone・Kafka・PostgreSQL など 40 種以上のプロダクトアイコンも内蔵されているため、システム構成図に企業ロゴを手配置する手間もありません。
インストール手順
Claude Code がインストール済みであれば、1 コマンドで使えます。
npx skills add yizhiyanhua-ai/fireworks-tech-graph
PNG 出力には rsvg-convert が必要です。macOS では brew install librsvg、Ubuntu/Debian では sudo apt install librsvg2-bin でインストールできます。
最新版に更新したい場合は --force オプションを付けて再実行します。
npx skills add yizhiyanhua-ai/fireworks-tech-graph --force -g -y
インストール後は Claude Code に対して通常の指示を出すだけです。「Multi-Agent の構成図を Blueprint スタイルで描いて」のように、何を描くかとスタイルを自然言語で伝えると、SVG と PNG が出力されます。
Mermaid との違いと使い分け
Mermaid は記述ベースで再現性が高く、Git 管理との相性も優れています。一方、視覚的なスタイルを細かく制御したい場合や、AI/Agent 系の専用ドメイン知識が必要な場合は fireworks-tech-graph の方が適しています。
シンプルなフローやクラス図は Mermaid、資料として配布する本番品質の構成図や AI アーキテクチャ図には fireworks-tech-graph——という使い分けが自然でしょう。ライセンスは MIT で、商用利用も可能です。