技術図解にImage AIはもう不要？コードファーストな8ツール戦略が熱い

「技術的な図を作りたいけど、AIで画像生成するたびに微妙にズレてて修正が大変…」

そんな経験、ありませんか？ちょっとした変更のたびに「再生成 → 確認 → また修正」を繰り返すループ、地味にしんどいですよね。

海外の開発者コミュニティ・dev.toで、この問題をスパッと解決するアプローチが話題になっています。その名も 「コードファースト8ツールマトリクス」。画像AIへの依存をやめて、コードで図を生成・管理するワークフローへ完全に移行した、というものです。🛠️

Contents

なぜ「コードで図を作る」のか？
Pythonで試す：Matplotlibで図をコード生成する例
Mermaid.jsで試す：テキスト1行でフロー図
まとめ

なぜ「コードで図を作る」のか？

technical diagram code / Photo by Markus Spiske via Pexels

発想はシンプルです。「生成してから微調整する」ではなく、「コードを書いてバージョン管理する」 に切り替えるということ。

イメージとしては、Wordで書いた文書をいちいち手直しするのではなく、Markdownで書いてGitで管理するようなものです。一度仕組みを作れば、次からは数行変えるだけで済む、という考え方ですね。

具体的には、以下のような7つのスクリプタブルなスタック＋1つの3Dスタックを組み合わせて運用します。

📐 Mermaid.js：テキストでフローチャート・シーケンス図を生成
📊 D3.js：データビジュアライゼーション全般
🔷 Graphviz（DOT言語）：グラフ・ネットワーク図
🖼️ Matplotlib（Python）：グラフ・科学的図表
📝 PlantUML：UML図をテキストから生成
🎨 SVG直書き or スクリプト生成：カスタム図解
⚙️ draw.io（XMLエクスポート）：GUIで作成後コード管理
🧊 Blender（3D）：3Dが必要な場面のみ

そして画像生成AIは「どうしても他の方法では無理なとき」のフォールバックとして残す、という位置づけ。つまり、AIに依存しすぎないワークフロー設計です。

Pythonで試す：Matplotlibで図をコード生成する例

Pythonユーザーなら、今すぐ試せるのが Matplotlib です。シンプルなアーキテクチャ図もどきをコードで表現してみましょう。

import matplotlib.pyplot as plt
import matplotlib.patches as mpatches

# --- キャンバスを準備 ---
fig, ax = plt.subplots(figsize=(8, 4))
ax.set_xlim(0, 10)
ax.set_ylim(0, 5)
ax.axis('off')  # 軸は非表示

# --- ボックスを描画（コンポーネント図風） ---
components = [
    (1, 2, 'Client'),
    (4, 2, 'API Server'),
    (7, 2, 'Database'),
]

for x, y, label in components:
    # 四角形を描く
    rect = mpatches.FancyBboxPatch(
        (x, y), 1.8, 1,
        boxstyle='round,pad=0.1',
        edgecolor='steelblue',
        facecolor='lightcyan'
    )
    ax.add_patch(rect)
    # ラベルを中央に配置
    ax.text(x + 0.9, y + 0.5, label,
            ha='center', va='center', fontsize=11)

# --- 矢印でつなぐ ---
ax.annotate('', xy=(4, 2.5), xytext=(2.8, 2.5),
            arrowprops=dict(arrowstyle='->', color='gray'))
ax.annotate('', xy=(7, 2.5), xytext=(5.8, 2.5),
            arrowprops=dict(arrowstyle='->', color='gray'))

plt.title('シンプルな構成図（コードから生成）', fontsize=13)
plt.tight_layout()
plt.savefig('architecture.png', dpi=150)  # PNGとして保存
plt.show()

ポイントをまとめるとこんな感じです👇

図の内容を コードで定義 しているので、修正はデータを変えるだけ
savefig() でPNG出力できるので、ブログ・ドキュメントにそのまま使える
Gitで管理すれば 変更履歴も追える

Mermaid.jsで試す：テキスト1行でフロー図

もっとシンプルに使いたい場合は Mermaid.js がおすすめです。Markdownに埋め込めるので、GitHubのREADMEやNotionでもそのまま表示されます。

```mermaid
flowchart LR
    A[ユーザー] --> B[フロントエンド]
    B --> C[API]
    C --> D[(データベース)]
```

これだけで立派なフロー図が生成されます。コードの変更＝図の変更になるので、チームでの管理も格段に楽になりますよね。🎉

まとめ

技術図解において、「AIで画像生成」から「コードで図を生成」に切り替えるという流れは、管理コストの削減・再利用性の向上という観点でとても理にかなっています。Mermaid.js・PlantUML・Matplotlibなど、日本語ドキュメントも充実しているツールが多いので、まずは1つだけ試してみてください。「むずかしそう」が「これ全然いけるじゃん」に変わるはずです。ぜひ自分のドキュメントやブログで活用してみてください！💪