HapInS Developers Blog

HapInSが提供するエンジニアリングの情報サイト

ChatGPTで文章の図解ができるWebサイトを作った

はじめに

突然ですが、私は図解されている本やブログが好きです。文章だけで説明されると分からないけど、図解されていると内容をすぐに理解できるからです。

ChatGPTでは疑似的に図解ができます。しかし、ChatGPTのウェブサイトからは直接、図解はできません。そこでAPIを用いて簡単に文章から図を作成するWebサイトを作成し、ソースコードGitHubに公開しました。

こちらです。

github.com

図解の仕組み

ChatGPTを用いた図解の仕組みを説明します。ChatGPTでは2023年4月26日時点で画像は出力できません。しかし、Mermaid記法というフローチャートやグラフを出力するためのコードを生成できます。

例えば、以下のようなMermaid記法のコードをChatGPTは出力することができます。

graph LR
    A-->B
    B-->C
    C-->D

これを、GithubやNotionのようなMermaid記法に対応したエディタに貼り付けると、図になります。これを用いて文章の図解を行います。

作成したWebサイトの紹介

初期画面はこれです。

フローチャートにしたい内容を入力して送信を押すと図が出力されます。

実行方法

このWebサイトを実行するのに必要なものはPythonとOpenAIのAPIキーのみです。 詳しい実行方法はリポジトリにあるREADME.mdを見てください。

github.com

おわりに

今後は、プラグインの導入によってChatGPTから直接、図の作成ができるようになると思います。それまでは、このWebサイトを利用する価値はあると思います。