Napkin AI 完全ガイド — エンジニアが技術ドキュメント図解の時間を1/5にした実践ワークフロー【2026年5月版】
Napkin AI でシステム構成図・フロー・READMEの図解を爆速生成するフリーランスエンジニアの実践レビュー。Mermaidとの比較、Claude Code連携、無料枠の使いこなし、PPT/SVGエクスポート、よくあるハマりどころまで網羅。
エンジニアのゆとです。
「システム構成図、いつも作るのめんどくさい」「READMEに図解入れたいけど時間がない」という悩み、Napkin AI でほぼ解決した。3週間使い込んだ結果、技術ドキュメント作成の時間が体感1/5になった。
ただし、これは万能ツールじゃない。「使いどころを見極めれば爆速、雑に使うとイマイチ」という典型的なAIツール。本記事では、フリーランスエンジニア視点で「どこに使えて、どこは Mermaid や Excalidraw の方が良いか」を整理する。
結論を3行で
- Napkin AI: テキストから図解を1分で生成。クライアント向け提案書・READMEの「見栄え重視」に最強
- Mermaid: コード管理する図解（CI で自動生成、Git で履歴）。技術仕様書に最強
- 使い分け: 静的な提案書・プレゼン → Napkin、動的な技術ドキュメント → Mermaid
両方使えると、図解作成時間が圧倒的に減る。
Napkin AI とは（30秒まとめ）
Napkin AI は、テキストや箇条書きを自動的に図解（フロー・マインドマップ・表・タイムライン等）に変換するツール。
特徴：
- ✅ ペーストするだけで複数の図解候補を提案
- ✅ ノード・矢印・テキストを後から自由編集
- ✅ PNG / SVG / PDF / PPT エクスポート
- ✅ Free プラン: 500 AI credits/週（1 credit ≒ 1 word）
- ✅ ファイルインポート: PPT / DOC / PDF / HTML / Markdown
- ✅ リアルタイム共同編集
ChatGPT に図解作って、と頼んでも妙な ASCII アート返ってくるが、Napkin はちゃんと「人間が見て理解できる図解」を作ってくれる。
料金プラン（2026年5月時点）
| プラン | 月額 | クレジット | エクスポート | コラボ |
|---|---|---|---|---|
| Free | $0 | 500/週 | PNG, PDF | × |
| Plus | $10/月 | 無制限 | + SVG, PPT | Teamspace |
| Pro | $24/月 | 無制限 | + 全フォーマット | + 高度コラボ |
エンジニアが個人で使う分には、Plus ($10/月) が現実的。SVG エクスポートが解放されるのが大きい。本格的に使うなら Pro。
エンジニア用途別: 使うべき場面と使わない方が良い場面
✅ 使うべき場面
1. クライアント向け提案書のシステム構成図
「このSaaSは○○と連携して、データはこう流れます」みたいな説明図、Napkin で1分。手書きや figma で30分かけてた作業が爆速化。
2. README の見出し画像 / 概念図
OSS 公開する時の README に、機能の関連図を入れたい時。Napkin で生成 → SVG エクスポート → README に貼る。
3. ブログ記事の図解
技術記事に「このフローはこうなります」を入れる時。Mermaid だと表現の自由度が低いので、Napkin の方がブログ向き。
4. プレゼン資料の図表
「アーキテクチャ概要」「組織構造」「ユーザーフロー」をスライドに入れる時。PPT エクスポートで直接貼れる。
5. 議事録から学んだ概念をまとめる
クライアントヒアリングで聞いた業務フローを、その場で図解化してチェックバックする。理解の確認に効く。
❌ 使わない方が良い場面
1. 技術仕様書のシーケンス図
PlantUML / Mermaid の方が:
- Git で差分管理できる
- CI で自動生成できる
- 表記法が業界標準
2. ER図 / クラス図
専用ツール（dbdiagram.io、Mermaid、PlantUML）の方が表現力高い。Napkin は「ざっくり概念図」向け、厳密な図解は不向き。
3. リアルタイムで進化する図解
スプリント中に頻繁に更新するなら、コードベース（Mermaid）の方が運用が楽。
4. 機密性の高い情報
クラウドにテキスト送信するので、機密案件のシステム構成図は社内ホストツールが安全。
Mermaid vs Napkin AI 徹底比較
| 観点 | Mermaid | Napkin AI |
|---|---|---|
| 学習コスト | 中（記法を覚える） | 低（テキスト貼るだけ） |
| 表現力（厳密性） | 高 | 中 |
| 表現力（見栄え） | 中 | 高 |
| Git 管理 | ○ | × |
| 編集自由度 | コード編集 | GUI編集 |
| 共同編集 | プルリク経由 | リアルタイム |
| エクスポート | SVG, PNG | PNG, SVG, PDF, PPT |
| 料金 | 完全無料 | 無料枠 + 有料 |
| 用途 | 技術仕様書 | 提案書・プレゼン |
要するに：
- コードと一緒に管理したい図解 → Mermaid
- 見栄えが大事な図解 → Napkin AI
両方使い分けるのが正解。私は同じプロジェクトで:
- 仕様書（GitHub上）: Mermaid
- 提案書（クライアント送付）: Napkin
- プレゼン: Napkin
- README概要図: Napkin
- README詳細フロー: Mermaid
という棲み分けにしている。
Claude Code との連携ワークフロー
私が常用する組み合わせ：
パターン1: コードから図解を生成
- Claude Code に「このコードベースの主要な依存関係をまとめて」と指示
- テキスト形式の整理を Napkin にペースト
- Napkin が自動でフロー / マインドマップ生成
例：
Claude Code 出力:
- API Layer: Express.js
- Auth Service: 認証管理
- User Service: ユーザー操作
- Payment Service: Stripe連携
- DB Layer: PostgreSQL
- Cache: Redis
- Queue: RabbitMQ→ これをそのまま Napkin にペースト → アーキテクチャ図完成（1分）
パターン2: 設計ドキュメントの図化
- Claude Code に「この機能の設計ドキュメントを Markdown で書いて」と指示
- 出力された Markdown を Napkin に PDF / DOC で取り込み
- 各セクションを自動図解化
パターン3: 議事録 → 業務フロー
- ヒアリング議事録を ChatGPT に「業務フローを箇条書きで整理」と指示
- 出力を Napkin にペースト
- フローチャート完成
実際に使ってみて分かった注意点
1. 日本語のレイアウトはたまに崩れる
長い日本語ラベルがノードからはみ出すことがある。短く言い換えるか、英語化すると安定。
2. AI生成は1回で完璧ではない
「Generate visuals」を押すと複数候補が出るが、最初の候補で完璧なことはほぼない。気に入ったベース選んで、手で編集 = 8割の作業時間がここ。
3. クレジット消費が地味に痛い
Free 500/週は、長文ドキュメント1個処理すると即枯渇する。本格活用なら Plus 必須。
4. SVG エクスポートは Plus 以上
Free だと PNG/PDF のみ。エンジニアとしては SVG（拡大しても綺麗、エディタで編集可）が欲しいので、ほぼ Plus 必須。
5. ブランドカラー設定はあるが限定的
Plus 以上で「ブランドカラー」を設定できるが、フリーランスのブランド統一目的にはちょっと足りない。Figma で最終調整するのが現実解。
エンジニアが Napkin で爆速化できる5つの作業
私が3週間使って「これは Napkin 一択」と感じたユースケース：
1. クライアント提案書の概要図（30分→3分）
提案フェーズで「サービスの全体像を1枚で見せたい」時。
2. README の概念図（1時間→10分）
OSS 公開時、機能の関連性を図示する作業。
3. プレゼン資料のフロー図（45分→5分）
社内勉強会のスライドで、ベスト プラクティス図解を作る時。
4. 業務ヒアリング後の業務フロー整理（60分→10分）
クライアントから業務聞いて、こちらの理解を図で示す時。
5. 学習メモの図解化（学習コンテンツ作成）
技術書を読んで自分用に整理する時、テキストだけだと頭に入らない概念を図にする。
競合ツールとの比較
| ツール | 強み | 弱み | おすすめ用途 |
|---|---|---|---|
| Napkin AI | テキストから即図解 | 厳密性△ | 提案書・プレゼン |
| Mermaid | Git管理可、無料 | 学習コスト | 技術仕様書 |
| Excalidraw | 手描き感、自由度 | 自動化× | アイデアスケッチ |
| Lucidchart | 機能豊富 | 重い、有料 | エンタープライズ |
| Whimsical | UX綺麗、フロー強い | コスト | スタートアップ全般 |
| draw.io | 完全無料、自由度 | デザイン微妙 | 業務系図解 |
各ツール得意分野が違う。エンジニアなら Mermaid + Napkin の組み合わせが、コスト・効率ともに最適だと思う。
よくある質問
Napkin AI と Whimsical / Lucidchart の違いは？
Whimsical / Lucidchart は手動で図を作るツール。Napkin はテキストから自動生成するのが本質的な違い。手動の自由度は前者、生成スピードは Napkin。
日本語で使える？
使える。日本語テキストから図解生成可能。ただし長いラベルはレイアウトが崩れることがあるので、短く整理して入れるのがコツ。
無料プランで本格的に使える？
軽い用途なら十分。ただし SVG エクスポートが必要 / 週500クレジット超える使い方をするなら Plus ($10/月) 必須。エンジニアの個人用途なら Plus が現実的。
生成したダイアグラムはどう編集する？
GUIで全要素編集可能。ノードのドラッグ、テキスト変更、矢印の追加・削除、色変更、レイアウト変更全部 GUI で完結。プログラマブル編集（コードで操作）は不可。
Mermaid と Napkin、どっちを学ぶべき？
エンジニアなら両方。Mermaid はコードベースで管理する図解、Napkin は「綺麗に見せる図解」と用途が違うので競合しない。Mermaid をベースに、提案書だけ Napkin、という使い方が一番効率的。
機密情報を含む図解を作っていい？
Napkin はクラウドサービスなので、テキストはサーバー送信される。機密性高い案件のシステム構成は、社内ホストの draw.io か Mermaid（オフライン）の方が安全。
Claude Code の出力をそのまま Napkin に貼れる？
貼れる。私は Claude Code に「依存関係をマークダウンの箇条書きで」と指示し、出力を Napkin にペースト → 自動フロー生成、という流れをよく使う。
まとめ
Napkin AI、3週間使った結論：
- ✅ テキストから図解を1分で生成、提案書・プレゼン作業の時間が1/5に
- ✅ Mermaid と棲み分け、両方使えると最強
- ✅ Plus ($10/月) は SVG エクスポート目的でほぼ必須
- ❌ 厳密な技術仕様書（ER図、シーケンス図）には不向き
- ❌ 機密情報の図解には注意（クラウド送信）
- 🎯 おすすめ: Claude Code → 整理テキスト → Napkin → SVG → README/提案書
「図解作成の手間で技術ドキュメントを書く気が失せる」というエンジニアあるあるが、Napkin で本当に解決する。フリーランスは特にクライアント向け図解を作る機会が多いので、月 $10 は余裕でペイする投資。
関連記事
記事が見つかりません: claude-code-introduction-2026
