どうも、株式会社ナレッジワークのざわきんといいます。
最近よく mermaid というテキストベースの図作成ツールを使っていて、ChatGPTやGitHub CopilotのようなLLMを活用したツールとめちゃくちゃ親和性が高いなと思い、居ても立っても居られないので記事にしました。
TL;DR
LLM(Large Language Model)の普及により、テキストベースの図作成ツール（例：mermaid）はますます普及していくと思うので、ガンガン使っていこうぜ！という記事です。
はじめに
言葉によるコミュニケーションの難しさ
突然ですが、言葉によるコミュニケーションって難しいですよね。
頭の中にある構造を言葉だけで相手に正確に伝えることって、なかなか難しいです。
例えば、インフラ構成を説明する場合
例えば、インフラ構成を他の人に説明する場合を考えてみましょう。
ChatGPT に出力してもらった 「シンプルなインフラ構成」 です。
（一旦読んでみてください）
このシンプルなインフラ構成は、小規模なウェブアプリケーション向けに設計されています。中心には、1つのロードバランサーが配置され、外部からのトラフィックを処理します。ロードバランサーは、背後にある2つのウェブサーバーにトラフィックを均等に分配します。これらのウェブサーバーは、静的コンテンツや動的コンテンツの提供を担当し、ユーザーのリクエストに応答します。
ウェブサーバーは、1つの共有データベースサーバーに接続しています。このデータベースサーバーは、アプリケーションのデータを保持し、ウェブサーバーからのクエリに応じてデータを提供します。データベースサーバーは、データの整合性と安全性を確保するために、定期的なバックアップとセキュリティ対策が施されています。
このインフラ構成は、シンプルさと効率性を重視しており、小規模なアプリケーションやスタートアップ企業に最適です。ロードバランサーによるトラフィックの分散処理と、共有データベースサーバーを用いたデータ管理により、コスト効率の良い運用が可能になります。また、この構成は、将来的なスケーリングや拡張にも柔軟に対応できるように設計されています。
この文章を読んで、あなたはどのような構成をイメージしましたか？
それなりにイメージはできたかもしれませんが、正直なところ、ダルいですよね。
案外、文章だけでは正確な構成を把握するのは難しいです。
図を使ったコミュニケーション
ChatGPT にこの構成を mermaid形式 で出力するようにお願いをすると、以下のようなmermaid形式のコードブロックが出力されました。
```mermaid
graph LR
LB[ロードバランサー] --> WS1[ウェブサーバー1]
LB --> WS2[ウェブサーバー2]
WS1 --> DB[共有データベースサーバー]
WS2 --> DB
```
このコードを実際にmermaid形式で描画すると、以下のような図が出力されます。
確かに「シンプルな」インフラ構成が一目でわかりますね。
もちろん、もともとの文章に含まれる情報をすべて図に落とし込むことはできませんが、文章だけでは伝わりにくい構造を図にすることで伝えることができます。
なぜ図を使うのか
もし、個人で開発しているだけであれば、特に図を作らなくても、頭の中にある構造をそのままコードに落とし込めば十分の場面も多くあります。
しかし、少しでも規模が大きくなると、図を使って説明すべきタイミングが増えてきます。
例えば、
- 設計を行う場合
- チームで開発する場合
- 専門外の人に説明する場合
- 複雑な構造を一度に把握する場合
- 未来の自分に対して説明する場合
など、図を使うことでコミュニケーションを円滑にすることができます。
以下のような内容を伝える場合、特に図を使うことが多いです。
- コードの構造
- システムの構成
- データの流れ
- 概念の関係
図を使うことのメリット
図を使うことで、以下のようなメリットがあります。
- 視覚的に理解しやすい
- 複雑な構造を一度に把握できる
- 言葉だけでは伝わりにくい構造を伝えることができる
図を使うことのデメリット
一方で、図を使うことには以下のようなデメリットもあります。
- 図を作るのに時間がかかる
- メンテナンスが面倒
- 多くの付加情報を一度に表現することが難しい
作ったはいいものの、なんだかメンテナンスが面倒だな、と思うこともあります。
テキストベースの図作成
図を作成することのメリットは大きいですが、デメリットもあるため、図を作成することに抵抗を感じる人も多いです。
（というか、私もその1人です）
そこで、テキストベースの図作成ツール の出番です。
テキストベースの図作成ツールを使うことで、以下のようなメリットがあります。
- 再現性が高い
- テキストベースであるため、コードと同じようにバージョン管理がしやすい
- メンテナンスがしやすい
テキストベースの図作成ツールにはさまざまなものがありますが、その中でも mermaid は特に人気があります。
mermaidとは
先ほどの例で使用したmermaidは、テキストでグラフを作成できるダイアグラムツールの1つです。
mermaidは、多くのマークダウンエディタでサポートされており、 mermaid コードブロックを使うことで簡単に図を作成することができます。
Zennでもmermaidを使って図を作成することができます。
マークダウンでも使えますし、Google Docsでも拡張機能を入れることで使うことができます。
テキストベースの図作成ツールとLLMの親和性の高さ
個人的に、mermaidのようなテキストベースの図作成ツールは、今後ますます普及していくと思っています。
これには、 LLM（Large Language Model） の普及が大きく関係しています。
LLMと人間のやり取りは基本的にテキストベースでやり取りされます。
LLMと人間の間で、mermaid のようなテキストベースの図作成ツールのコードをやり取りすることで、以下のようなことが実現できるようになります。
- 自然文から図を生成する
- 図から自然文を生成する
- 図から図を生成する
それぞれについて、以下で詳しく説明していきます。
自然文から図を生成する
よくあるユースケースとして、自然文から「〜〜のような図を作って」というプロンプトを受けて、図を作成するというものがあります。
-
プロンプト例
- 文章で書かれた構成を図にして、俯瞰できるようにする
- 「以下の構成を俯瞰した上で mermaid 形式で図にしてください」
- 構成の叩き台を作る
- 「〜〜の構成を図にして、それを元に議論しましょう」
- 文章で書かれた構成を図にして、俯瞰できるようにする
図から自然文を生成する
逆に、図から自然文を生成するというユースケースもあります。
「この図は〜〜のような構造を表しています」というような自然文を生成することができます。
-
プロンプト例
- 図を文章に落とし込む
- 「以下の図の構成を文章に落とし込んでください」
- 図の意図を説明する
- 「以下の図を見て、それが何を意味しているのか説明してください」
- 図を文章に落とし込む
図から図を生成する
さらに、図から図を生成するというユースケースもあります。
何かしらの図の変換を行うことで、新しい図を生成することができます。
複数の図を組み合わせて、新しい図を生成することもできます。
-
プロンプト例
- 図を簡略化する
- 「以下の図をシンプルにしてください」
- ノードやエッジを追加・編集・削除する
- 「以下の図に〜〜という変更が加えられた図を作成してください」
- 複数の図を組み合わせて新しい図を生成する
- 「以下の二つの図を組み合わせて、〜〜という図を作成してください」
- 図を簡略化する
つまり、どういうこと？
LLMとmermaidのようなテキストベースの図作成ツールはめっちゃ親和性高いよねという話です。
このように、LLMによる図作成の自動化が進むことで、図を作成することのハードルが下がり、ますます図を使ったコミュニケーションが増えていくと思います。
先ほど挙げた図を使うことのデメリットも、LLMによる図作成の自動化によって解消される可能性があります。
将来的には、画像生成AIが発達し、テキストベースの図作成ツールのコードを入力するだけで、自動的に図を生成してくれるようになるかもしれません。
現段階では、画像生成AIは文字出力がなかなか安定していないですが、将来的には安定してきて、図作成の自動化が進むと思います。
その場合であっても、テキストベースであれば、人間がコードを簡単に修正することができるため、柔軟に図を作成することができます。
したがって、それなりに時代が進んでいっても、テキストベースの図作成ツールはますます普及していくと思います。
始めるなら今がチャンスです！（ちょっとうさんくさい）
まとめ
LLM(Large Language Model)の普及により、テキストベースの図作成ツール（例：mermaid）はますます普及していくと思うので、ガンガン使っていこうぜ！
という記事でした。
今後、LLMの性能はますます向上していきます。そのため、その恩恵を受けるためにも、テキストベースの図作成ツールを使っていく意思決定をしていくことが大切だと思います。
それでは、また！
参考になったと思ったら、いいねやシェアしていただけると嬉しいです。
新しい記事書きました！
今後書きたいネタ
- LLMを使う観点での、mermaidと他のテキストベースの図作成ツール(PlantUML, graphvizなど)の比較
- もっと具体的なプロンプトのチートシート的なやつ
- メリットはあるが、その限界は？（例：コンテキスト長の制限や、図の複雑さの制限、レンダリングの不安定さなど）
イベントやります！！
私の所属する株式会社ナレッジワークで、LLMに関するイベントをやります。興味がある方はぜひご参加ください！
X(Twitter)やってます。今後も記事を書く予定なので、フォローしていただけると嬉しいです。
株式会社ナレッジワークの開発者（エンジニア、デザイナー、PdM）向けの記事やEncraftという開発者向けイベントの開催レポートなどを公開しています。 イベント：http://knowledgework.connpass.com コーポレートX：@kworkcom
Discussion