AIがいかにして驚異的なコードフローチャートを正確に生成するか

みなさんこんにちは、私はムチュアンです

AI がなければ、コードを読み、自分の理解に基づいて XMind で手動でマインドマップを描いたり、draw.io でフローチャートを描いたりするのに、少なくとも 60 分はかかります。

AI を使用すると、コードをより正確なコード視覚化グラフィックに直接変換できるため、自分でコードを読む時間を節約できます。AI はわずか 5 分でコードを直接解釈できます。

ここでは3つの問題があります:

1. AIでコードを解釈する方法

2. 解釈されたコードをフローチャートで表示するにはどうすればよいですか?

3. フローチャートの作成方法

これら3つの部分を順番に紹介します。

1. AIがコードを解釈する

AIコード解釈は、実際にはAIの要約能力、つまりコードコメントの生成を活用しています。現在、コード支援に関連する多くの大規模モデルがこの機能を実現しています。

例えば、Baidu Comateの基盤モデルであるWenxinyiyan4.0、清華大学が開発したCodeGeex大規模モデル、GitHub Copilotの基盤モデルであるCodeXなどである。

なぜ GPT を通じて直接注釈を生成しないのかと疑問に思う人もいるかもしれません。

GPTは、記事の執筆、コードの執筆、小説の執筆など、多くのことができる汎用の大規模モデルです。コードのみを記述する場合は、より具体的でコード分野のみに焦点を当てた独自のコード大規模モデルを使用することをお勧めします。コードをより正確に解釈し、より正確なコードコメントを生成できます。

以下は、Comate を使用してコードを解釈する例です。

例えば、次のコードは 200 行あり、その中心は注文のパッケージ化です。例えば、10 件の注文がクラスター化された後、8 つのパッケージが生成されます。

クラスタリングには細かい部分が多すぎます。AIを使って抽出し、より直感的なフローチャートを描きたいです。まず、AIプログラミングツールBaidu Comateを使ってこのコードを解釈します。

Comateプラグインをインストールしたら、関数コードの上にあるコード説明メニューを見つけます。

写真

コードコメントをクリックすると、Baidu AI Assistantチャットボックスが開き、コードの説明が表示されます。

写真

2. コードの視覚化

上司に報告する場合でも、週報を書く場合でも、テキストやコードを視覚化することができれば、すぐに人々に違った印象を与えることができるので、視覚化を学ぶことは非常に重要です。

コードの視覚化には、一般的に UML ダイアグラムの作成が必要です。そのようなツールは数多くありますが、テキスト記述を使用して UML ダイアグラムを生成するという観点から、PlantUML を選択しました。

PlantUML は、さまざまな種類の図をすばやく作成するための強力なツールです。これらのダイアグラムは、ソフトウェア開発やドキュメント作成で広く使用されています。PlantUML でサポートされている主なダイアグラムの種類は次のとおりです。

1. シーケンス図: オブジェクト間の相互作用の時間シーケンスを示すために使用されます。システム内のコンポーネントまたはオブジェクト間のメッセージの受け渡しを示すためによく使用されます。

写真

2. ユースケース図: システムの機能と外部ユーザー (参加者) 間のやり取りを説明します。

写真

3. クラス図: システム内のクラスの構造と、継承、インターフェースの実装、依存関係などのクラス間の関係を表示します。

写真

4. アクティビティ図: フローチャートと同様に、あるアクティビティから別のアクティビティへの制御フローを示すために使用されます。

写真

5. コンポーネント図: システムのコンポーネントがどのように連携するかを示します。

写真

6. 状態図: オブジェクトがライフサイクル中に通過する状態と、状態間の遷移を示します。

写真

7. オブジェクト図: システム内のオブジェクト間の関係を示すクラス図のインスタンス。

写真

8. パッケージ図: コードのパッケージ構造を表示します。これにより、コードのモジュール構成を理解するのに役立ちます。

写真

9. ワイヤーフレームグラフィックインターフェース：グラフィック組織構造の構成を記述するために使用される

写真

10. ガント図: プロジェクト管理でプロジェクトのタイムラインと進捗状況を表示するために使用されます。

写真

フローチャートが見えていないように見えることにお気づきでしょうか。実際、PlantUML のアクティビティ ダイアグラムはフローチャートです。左側はコード構文で、右側は視覚的なグラフィックです。

写真

AIプログラミングツールを通じてコードコメントを生成し、AIに次のコードコメントに基づいてPlantUMLアクティビティ図のコードを生成してくださいと依頼しました。

写真

AIの応答を見てみましょう:

写真

3. フローチャートを作成する

手順 2 で生成されたフローチャート コードを plantuml 視覚化 Web サイトにコピーします: http://www.plantuml.com/plantuml

写真

画像を取得するには、[送信] ボタンをクリックします。

写真

フローチャートを見るだけで、このコードの意味が大体分かります。コード可視化図をAIが解釈してくれるので本当に便利です。

IV. 結論

上記のコード -> コメント -> フローチャートの描画という方法は、目的の効果を達成できます。コードを読み取って手動でグラフィックを描画するという従来の方法と比較すると、確かにはるかに効率的です。

最後に、ちょっとしたヒントをお伝えしたいと思います。コードを視覚化する方法はたくさんあります。なぜ他の種類の図ではなくフローチャートでなければならないのでしょうか? このコードからどのような図が生成される方がよいかを AI に尋ね、最適な視覚化方法を選択できます。

例えば、上記のコードに基づいてクラス図を生成することもできます。

写真

私はこのようなグラフをたくさん生成しました。例えば、私は主に Go を書いていて、たくさんの記事を書いていて、それを AI を使って視覚化しました。

例えば、Goの再入可能ロックは、図でわかりやすく説明されています

写真

例えば、Goのメモリ管理では、メモリ配分コンポーネントを図で説明します

写真

たとえば、go.sum ファイルには内部構造を説明する図があります。

写真

例えば、sync.Condの基盤となるデータ構造、提供される関数インターフェースを示す図

写真

上記の画像はすべて AI によって生成されています。AI により、プログラミングを知らない人でもツールやプラグインの開発を完了できるようになり、ソフトウェア開発のコストが大幅に削減されます。また、AI により、プログラミングを知っている人でも日常業務をより効率的に完了し、アプリケーション開発をより速く完了できるようになり、作業と学習の効率が大幅に向上します。

私は常に、書けなければ AI を書くことはできないし、プログラミングできなければ AI をプログラミングすることはできないという考えを抱いてきました。

AI を通じてコード フロー チャートを生成する場合は、まずコード フロー チャートとは何か、それを視覚化するためにどのような方法を使用できるかを理解し、その後 AI を使用してプロセスを高速化する必要があります。

本日のご紹介は以上です。AIを活用して効率化できるシナリオはまだまだたくさんあります。次回もご紹介させていただきます。ご視聴ありがとうございました。