🫠
アーキテクチャ図はもう書かなくていい！
一撃でアーキテクチャ図を作る方法
PDF Preview × ChatGPT で図作成の時代を終わらせる
💭 こんな経験ありませんか？
上司やクライアントから突然こんなことを言われる：
「アーキテクチャ図作っといて」
「DB設計ちゃんと図に起こしといて」
その瞬間の気持ち：
- うわーーー終わったーーー
- 時間ない😭
- コード書くより疲れる…
でも、もうその時代は終わりました。
🎯 解決策：PDF Preview × AI
セットアップ（1分で完了）
- VSCodeに PDF Preview 拡張機能をインストール
- AIに以下のように指示するだけ：
このアプリのアーキテクチャ図をMermaidで書いてください
何が起きるか
- AIが一瞬でMermaid形式の図を生成
- 生成されたコードを
.mdファイルに貼り付け - PDF Previewが自動でプレビュー表示
- 完成 🎉
「図を描く」という作業が完全に消えます。
📝 実践例
アーキテクチャ図を生成
AIへの指示：
Next.js + Convex + Firebase構成のWebアプリのアーキテクチャ図をMermaidで書いてください
AIの出力：
結果：まるで自分で描いたような綺麗な図が即座に完成
🛠️ その他の活用例
| 指示 | 出力 |
|---|---|
| 「DB設計を図にして」 | ER図（Mermaid形式） |
| 「このアプリのフローディアグラムを描いて」 | 処理フロー図 |
| 「シーケンス図を作って」 | シーケンス図 |
| 「クラス図を出して」 | クラス図 |
さらに便利なポイント
- ✅ 出来上がったMermaidはそのままドキュメント化可能
- ✅ GitHubでもネイティブレンダリング
- ✅ チームでの共有が簡単
- ✅ バージョン管理が容易（テキストベース）
🎓 新しいワークフロー
❌ 従来のやり方
依頼 → PowerPoint開く → 図形を配置 → 矢印を引く →
テキスト入れる → レイアウト調整 → 保存 → 送付
（所要時間：30分〜数時間）
✅ 新しいやり方
依頼 → AIに指示 → コピペ → 完成
（所要時間：1分）
💡 Tips
より良い図を生成するコツ
-
具体的な技術スタックを伝える
- ❌ 「アーキテクチャ図を描いて」
- ✅ 「Next.js + Convex + Clerk認証を使ったアプリのアーキテクチャ図を描いて」
-
図のタイプを明示する
- 「フロー図で」
- 「シーケンス図で」
- 「ER図で」
-
レベル感を指定する
- 「概要レベルで」
- 「詳細な実装レベルで」
🚀 結論
図を「描く」時代は終わりました。
これからは 「指示するだけで図ができる時代」 です。
上司に「これ図にしておいて」と言われたら、
自分でパワポを開く前に まずAIに投げる のが正解です。
おすすめの拡張機能
- PDF Preview - VSCode内でMermaidをプレビュー
- Markdown Preview Mermaid Support - Markdown内でMermaidをレンダリング
PDF Preview × AI、控えめに言って最強です。
参考になれば！ 🎉
📚 参考リンク
- Mermaid公式ドキュメント
- Mermaid Live Editor - オンラインでMermaidを試せる
Discussion