#315 AIに提案されたマーメイド図。開発で便利に使う3つの場面

エンジニアには当たり前の「設計図」。AIが代わりに描いてくれると知りました。

こんにちは、ちーみつです。

AIに「マーメイド図」を提案されたので、バイブコーディングでの使い方を聞いてみました。

私は知らなかったのですが、
エンジニアはアプリや仕組みを作る時、
コードを書く前にまず
設計図を描くそうです。

言われてみれば当たり前ですよね。
でも私はこれまで、
設計図なんて一度も作らずに
バイブコーディングしてきました。

そんな時AIに
「マーメイド図で整理しましょうか？」
と提案されたんです。

マーメイドは、
テキストを入力するだけで
設計図が自動で出来上がる仕組み。
エンジニアが描くような図を、
AIが代わりに作ってくれます。

Mermaid Live Editorというサイトに
貼り付ければ、すぐに図として確認できます。

これなら私にも設計図が持てるかもしれません。

作る前に「流れ」を確認する

バイブコーディングで
複雑な処理を頼むとき、
まず「処理の流れを図にして」
と頼むといいそうです。

図を見れば、
「この順番は違うな」
「この処理はいらないな」
と、作り始める前に気づけると。

作り終わってから
「思ってたのと違う…」
となる悲劇を防げそうですね。

作っている途中で「図を更新」する

開発が進むと、
最初の図とは違う形に
変わっていくことがあります。

AIに
「今の状態に合わせて図を更新して」
と頼めば、現状が整理できます。

「このファイル、
もう使ってないから消して大丈夫ですよ」
という判断の助けにもなります。

困った時に「図を見直す」

「なぜか動かない」という時は、
図に戻って流れを確認する。

「あ、ここで止まってるんだ」
と一目で分かるのが良さそうです。

コードが読めなくても、
図なら原因が見えてきます。

最後に

今まで文字だけで
やり取りしていたAIとの開発に、
マーメイド図という選択肢が増えたのは
大きな発見でした。

次に何かを作る時は、
まず「図にして」と頼んでみようと思います。

最後まで読んでいただきありがとうございます。

バイブコーディングで「壁にぶつかった時」の記事はこちら👇

AIに「図にして」と頼むだけで、開発の見え方が変わるかもしれません。
こうしたバイブコーディングのヒントは、メルマガでも配信しています👇

🎁 Antigravity完全ガイド、PDF版を無料配布

設定、SKILLS機能、Lowモデル活用、エラー対処など
人気記事6本をまとめた保存版PDFを
メルマガ登録者限定で配布しています。

収録内容:

• 第1章: 導入編 - Antigravityとは？

• 第2章: 設定編 - まずやるべき3つのこと

• 第3章: 自動化編 - SKILLS機能

• 第4章: 実践編 - Lowモデル活用法

• 第5章: トラブル対処編 - エラー解決法

• 第6章: 応用編 - ツールの使い分け

オフラインでも読める、検索しやすい保存版です。

他にも、Chrome拡張機能5種やsrefコード集など
実用的な特典を多数用意しています。

登録無料。いつでも解除できます。

▼ 今すぐ受け取る

SNS

X : https://x.com/chi3_jp
Instagram：https://www.instagram.com/chi3jp_aiart
私のまとめサイト : https://wks3.vercel.app/