✈️ 初心者でもできる！AIできれいな技術アーキテクチャ図を素早く作成

👋 このドキュメントはアーキテクチャ図を描いたことがまったくない初心者向けです。デザインの知識もコーディングも不要です。AI とチャットできれば大丈夫です。

技術アーキテクチャ図とは？なぜ描く必要があるの？

簡単に言うと、技術アーキテクチャ図とは頭の中のシステムを「描き出す」ことです。

例えば、App を作る場合：どんな機能モジュールがあるか？ユーザーはどう使うか？データはどう流れるか？これらの関係を図にしたものがアーキテクチャ図です。

描くメリットはたくさんあります：

✅ 考えが整理できる——図を描く過程でシステム設計がクリアになる
✅ チームとのコミュニケーションがスムーズに——1枚の図は千の言葉に勝る
✅ プレゼンで評価アップ——上司やクライアントが一瞬で理解してくれる
✅ AI が描いてくれて時短になる——AI を使えば数分で立派な図ができる

🤔 初心者はどの方法を選ぶべき？（最初に読んでね）

状況	おすすめ	難易度
とにかく一番早くきれいな図が欲しい、後で修正しない	方法1（AI が直接画像生成）	⭐
一手間かけてでも後で修正しやすくしたい	方法2（Mermaid.js コード生成）	⭐⭐
正式なドキュメント用、繰り返し修正・統一スタイルが必要	方法3（Excalidraw ローカル描画）	⭐⭐⭐

💡 初心者アドバイス：まず 方法1 を試して感覚をつかみ、次に 方法2 を試してください。方法3は正式なドキュメントが必要になってからで大丈夫です。

方法1：AI に直接絵を描かせる（最も簡単、最速）

⏱ 時間：2-3分 🛠 ツール：Gemini 3.1 Pro（Google 提供、無料）

一言でいうと

AI（Gemini など）に「描画用のプロンプト」を書かせ、そのプロンプトを AI の画像生成機能に渡すだけで、AI が絵を描いてくれます。

手順

ステップ1：AI に「描画プロンプト」を書かせる

Gemini を開いて、以下を入力するだけ：

1
2
3
4
5


技術アーキテクチャ図を生成するためのプロンプトを書いてください。
描きたいのは [システム名、例：ECサイト] のアーキテクチャ図です。
含むモジュール：ユーザーインターフェース、商品管理、注文システム、決済システム、管理画面。
データフロー：ユーザー注文 → 注文システムが決済を呼び出す → 決済完了が商品管理に在庫更新を通知。
プロフェッショナルでクリアで美しいスタイルで、英語のプロンプトを出力してください。

AI が英語の詳細なプロンプトを返します。

ステップ2：プロンプトを AI 画像生成に渡す

Gemini（または画像生成対応の AI）で、画像生成機能を選び、上記のプロンプトを貼り付けて生成ボタンを押すだけ。

ステップ3：完成 🎉

AI が画像を出力します。気に入らなければ再生成。

メリット・デメリット

✅ メリット	❌ デメリット
最速、数分で完了	修正が面倒——システム変更で再生成が必要
見た目がきれい、色鮮やか	結果が安定しないことがある
追加ツール不要	プロンプトが悪いと出力も悪い

📌 初心者向けヒント

プロンプトは詳細に——情報が具体的なほど出力が正確。「アーキテクチャ図を描いて」ではなく、モジュールや接続を明確に
複数回試す——最初の結果に満足いかなくても普通。プロンプトを微調整して再生成
英語プロンプトが効果的——多くの画像生成モデルは英語の理解が得意

方法2：AI にコードを生成させ、コードをレンダリングして図にする（初心者におすすめ）

⏱ 時間：3-5分 🛠 ツール：任意の AI（ChatGPT、Claude、Gemini）+ Mermaid.js

一言でいうと

フローチャートの本質はコード（Mermaid.js 構文）です。AI にコードを書かせ、無料のオンラインツールで画像にレンダリングします。図を変更したい？AI にコードを修正させて再レンダリングするだけ。

手順

ステップ1：AI に Mermaid コードを生成させる

AI を開いて以下を入力：

1
2
3
4


Mermaid 構文を使って EC システムのアーキテクチャ図を描いてください。
システム構成：ユーザーインターフェース、商品管理、注文システム、決済システム、管理画面。
データフロー：ユーザー注文 → 注文システム決済呼び出し → 決済完了が商品管理に在庫更新を通知。
純粋な Mermaid コードを出力してください。graph TD 形式で。

AI が以下のようなコードを返します：

graph TD
    A[ユーザーインターフェース] --> B[注文システム]
    B --> C[決済システム]
    B --> D[商品管理]
    C --> E[決済完了]
    E --> D

ステップ2：コードを画像にレンダリング

無料サイト mermaid.live を開く：

AI のコードを左側のエディタに貼り付け
右側に即座にフローチャートが表示
右上の「エクスポート」ボタンで PNG か SVG を選択（SVG はベクター形式で拡大してもぼやけない）

ステップ3：修正したい？AI にコードを直させる

古いコードを AI に貼り付けて、変更したいことを伝える：

1

上記のコードを修正して、「ユーザーインターフェース」と「注文システム」の間に「ログイン認証」モジュールを追加してください。

修正後、mermaid.live に貼り付けてエクスポート。

メリット・デメリット

✅ メリット	❌ デメリット
画質が良い、プロフェッショナルな印象	複雑な図の後期修正は依然として面倒
方法1より修正が容易——コード変更→再レンダリング	アーキテクチャの大幅変更時はほぼ再生成が必要
ソフトウェア不要、ブラウザだけで使える

📌 初心者向けヒント

Mermaid 構文は決まった形式がある——AI に「Mermaid 構文を使って」と明確に伝える
mermaid.live は神ツール——貼り付け即プレビュー、完全無料、登録不要
SVG でエクスポートがおすすめ——ベクター形式で拡大してもぼやけない
コードは保存しておく——後で修正するときに古いコードを AI に送るだけ

方法3：AI に編集可能なアーキテクチャ図を生成させる（正式なドキュメント向け）

⏱ 時間：10-15分（初回設定は少し時間がかかる） 🛠 必要なもの：AI プログラミングツール + Obsidian + 「作図指示パック」

一言でいうと

最もプロフェッショナルな方法ですが、初回設定に少し時間がかかります。セットアップ後は、AI に描きたいものを伝えるだけで、ドラッグ＆ドロップで編集可能なアーキテクチャ図ファイルを生成します。方法1や方法2が「死んだ図」なら、この方法は「生きた図」です。

🤔 「作図指示パック（Skills）」とは？

Skills は、AI に図の描き方を教える「説明書」のようなものです。

未インストール：「アーキテクチャ図を描いて」→ AI はテキストで説明するだけ
インストール後：AI が編集可能なアーキテクチャ図ファイルを生成できる

AI に「作図プラグイン」をインストールするイメージです。

この指示パックは axton-obsidian-visual-skills という名前で、Axton という人が作った無料オープンソースプロジェクトです。3つの作図機能を含みます：

作図方法	生成ファイル	用途	スタイル
Excalidraw	`.excalidraw` ファイル	フローチャート、マインドマップ、アーキテクチャ図	✏️ 手描き風（ホワイトボード風）
Mermaid	テキストルール	フローチャート、シーケンス図、比較図	🎯 ビジネスプロフェッショナル風
Canvas	`.canvas` ファイル	マインドマップ、知識整理	🎨 カラフルカード

💡 Draw.io も使えます——Draw.io は別の無料作図ツールで、対応する指示パックもあります。本ガイドでは Excalidraw を例に説明します。

🔧 事前インストール（最初の一回だけ）

💡 この指示パックはどこに置くの？

AI ツールはパソコンの固定位置でこれらの指示ファイルを探します。推奨場所：

C:\Users\ユーザー名\.claude\skills\

🤔 なぜ C ドライブ？ ユーザーフォルダはデフォルトで C ドライブにあるためです。これにより、このパソコンのすべてのプロジェクトで指示パックを使えます。

OpenCode と Claude Code で共通——一度インストールすれば両方で使えます。

インストール方法1：AI にやらせる（おすすめ、最も簡単）

OpenCode、Claude Code、Cursor のどれでも、以下のように伝えるだけ：

1
2
3


axtonliu/axton-obsidian-visual-skills を GitHub からダウンロードして、
解凍後、excalidraw-diagram、mermaid-visualizer、obsidian-canvas-creator
の3つのフォルダを C:\Users\ユーザー名\.claude\skills\ に配置してください。

AI が自動的にダウンロード、解凍、コピーを実行します。完了後ツールを再起動。

インストール方法2：手動ダウンロード

ダウンロードページを開く
緑色の Code → Download ZIP
解凍すると3つのフォルダが表示
C:\Users\ユーザー名\.claude\skills\ に3つのフォルダをコピー

追加で必要なもの：

ソフトウェア	用途	費用
OpenCode / Claude Code / Cursor	AI による作図ファイル生成	無料プランあり
Obsidian	アーキテクチャ図の表示・手動調整	無料
Obsidian Excalidraw プラグイン	Obsidian で Excalidraw ファイル編集	無料

🖐️ 手順

ステップ1：Skills をインストールし、描きたいものを AI に伝える

Excalidraw 手描きスタイルの場合：

1
2
3


Excalidraw を使って EC システムのアーキテクチャ図を描いて。
ユーザーインターフェース、商品管理、注文システム、決済システム、管理画面を含めて。
ユーザー注文 → 注文システム決済呼び出し → 決済完了で在庫更新。

Mermaid ビジネススタイルの場合：

1
2


このフローを Mermaid 図に変換して：
ユーザーがトップページにアクセス → 商品を閲覧 → カートに追加 → 注文送信 → オンライン決済 → 取引完了

Canvas マインドマップの場合：

1
2


この記事を Obsidian Canvas マインドマップに整理して：
[内容を貼り付け]

ステップ2：Obsidian で手動調整

Obsidian を開き、生成されたファイルをドラッグ＆ドロップ
Excalidraw ファイルはダブルクリックで編集モードに
ボックスをドラッグ、矢印を調整、テキスト修正、色変更が自由自在

ステップ3（任意）：AI でスタイル変更

スクリーンショットを Gemini に送り、参考画像と一緒に：

1

図1を図2のような手描きスタイルに変換して、ユーザーが理解しやすいように適切なイラストを追加してください

⚠️ よくある質問

Q：日本語フォントが手書き風にならない A：Excalidraw の手書きフォントはデフォルトで英字のみ対応。日本語はオンライン読み込みが必要です。

Q：生成された図が少し乱れている A：正常です。AI のレイアウトは完璧ではありません。Obsidian で手動調整してください。

Q：Claude Code じゃないとダメ？ A：いいえ。OpenCode、Claude Code、Cursor のどれでも使えます。

📌 初心者向けヒント

まず方法1と方法2を試してから方法3に進む
Skills のインストールが鍵——これで AI が編集可能ファイルを生成できるようになる
Excalidraw はデフォルトで手描き風
方法3の最大の価値は編集可能性——一度セットアップすれば、以降の修正はドラッグ＆ドロップだけ

🎯 初心者クイックスタートロードマップ

1
2
3
4
5
6
7
8


1日目 → 方法1：Gemini で画像生成（まずは体験）
         ↓
2日目 → 方法2：Mermaid.js でフローチャート生成
         （「コード変更＝図変更」の考え方を学ぶ）
         ↓
3日目 → 方法2の図をドキュメントで使う
         ↓
必要になったら → 方法3：Skills + Obsidian + Excalidraw プラグインを検討

📝 最後に：アーキテクチャ図で最も重要なのは伝えたいことを整理することです。AI はアイデアを画像にするための道具に過ぎません。一番簡単な方法1から始めましょう。最初の一歩が最も大切です！