1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AIを使用してアーキテクチャ図を描く方法

Last updated at Posted at 2025-06-14

バイブコーディングを行う際、多くの人はコードだけで十分だと考えがちです。しかし現実は異なります。ドキュメントのないコードは、地図なしで旅立つようなものです。目的地がどこなのか、進む道がどうなっているのかが分からなければ、誰も一緒に旅立とうとはしないでしょう。バイブコーディングにおいてドキュメント化が特に重要な理由は、コードが単に機能するためだけでなく、アイデアや設計の意図を他者と正確に共有するためのものであるからです。ドキュメント化は協業を円滑にし、プロジェクトの方向性を明確にし、さらに持続可能な開発環境を構築する基盤となります。

私は、ドキュメント化作業をコードと共に管理する方法を積極的に推奨します。特にマークダウンとmermaidを使用すれば、シンプルで明確なダイアグラムを迅速に作成できます。複雑な構造や流れを長い説明ではなく、ダイアグラム一つで表現できるため、コミュニケーションがはるかに効果的に行えます。

もちろん、mermaidだけでは不十分な場合もあります。より精巧で複雑なダイアグラムが必要な場合はdraw.ioを利用できます。draw.ioはXMLベースの.drawioファイル形式を使用するため、AIに直接この形式でダイアグラムを生成するように指示すれば、比較的簡単に作業が可能です。ただし、AWSアイコンなどの特定のアイコンのIDは公開されていないため、AIがそのまま活用するのは難しいです。

そのため、私はdraw.ioクライアントからAWSアーキテクチャアイコンのIDを直接抽出し、別途文書化しました。これにより、AIにアイコンIDを通知し、希望するアイコンを正確に活用できるようにしたのです。このドキュメントは、次の GitHub リポジトリで実際の作業例を確認できます。

ECS - Fargate Fast Scaleout

このように生成されたダイアグラムは、VS Codeのdrawioプレビュー拡張機能を利用すれば、便利にプレビューできます。また、draw.ioクライアントをインストールすれば、付属のCLIツールでSVGやPNG形式の画像に簡単に変換し、文書に挿入することも可能です。

alt text

一方、最近のmermaidの最新バージョンでは、AWSアイコンを含む多様なアーキテクチャアイコンを標準でサポートし始めました。公式ドキュメントを参照すれば、すぐに活用可能です。ただし、GitHubでこの最新機能をサポートするバージョンのmermaidが提供されていない場合、先ほど説明した方法が当面最も有用なアプローチとなるでしょう。

良いドキュメントは単なる説明書を超え、協業の質を向上させ、長期的にプロジェクトの価値を維持します。Vibe Codingでは、ドキュメント化は選択ではなく必須です。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?