LoginSignup
37
16
MetapsAdvent Calendar 2023Day 13metaps
@b-mentein株式会社メタップスホールディングス

ChatGPTを使って既存の図をMermaid化してみる

Last updated at Posted at 2023-12-12

はじめに

この記事は Metaps Advent Calendar 2023 の13日目の記事です。

先日のOpenAI DevDayでGPT4の機能を切り替えることなく使用できるAll Toolsや、オリジナルのGPTが作成できるGPTsが導入されるなど、ChatGPTの大幅なアップデートが発表されました。

特にAll Toolsで GPT-4V + Code Interpreter（Advanced Data Analysis）で画像やPDFを使用した柔軟な入力やコード的な指示ができるようになったので、既存の図を読み込ませてMermaid記法で出力させてみました。

資料上の図をMermaid記法で記述したい場合や、編集したいのに元データがない場合などにも使用できると思いますので、参考になりそうな部分をかいつまんで紹介します。

本稿の機能を使用するにはChatGPT Plus(月額20ドル)に加入する必要がありますが、OpenAI DevDay以降に利用者が急増し、現在は新規の加入を停止しています。

2023/12/14から新規加入を再開しました。

また、Mermaidについては下記のMermaid公式ドキュメントや解説記事をご覧ください。

chatでの操作

画像からMermaid記法への変換

資料などに記載されたシーケンスなどの画像の画面キャプチャを貼り付け、Mermaid記法で記述するよう雑にお願いするだけで、画像から構造情報とOCRを使用した文字情報の読み取りと両者のマッピングを行い、そこそこ高い精度でMermaid記法の記述を出力してくれます。

  • 入力
    image.png

  • 出力
    image.png

出力されたMermaid記法
sequenceDiagram
    participant User
    participant WebServer
    participant AppServer
    participant DB

    User->>WebServer: HttpRequest
    WebServer->>AppServer: Forwarding request
    AppServer->>DB: Data inquiry
    DB-->>AppServer: Inquiry results
    AppServer-->>WebServer: Processing result
    WebServer-->>User: HttpResponse

事前に役割や予備知識、注意事項を記載していないにもかかわらず、単純なプロンプトでここまで高い精度の変換を行ってくれるのは素晴らしいですね。

また、今回はactivateが記載されていないので自分で手直ししても良いのですが、activateを正確に記載するようお願いすると、ちゃんと修正して回答してくれます。

image.png

出力されたMermaid記法
sequenceDiagram
    participant User
    participant WebServer
    participant AppServer
    participant DB

    User->>+WebServer: HttpRequest
    WebServer->>+AppServer: Forwarding request
    AppServer->>+DB: Data inquiry
    DB-->>-AppServer: Inquiry results
    AppServer-->>-WebServer: Processing result
    WebServer-->>-User: HttpResponse

Mermaidの対応範囲

Mermaid(ver 10.6.1)では16種類の図を生成できますが、公式ドキュメントのサンプル画像を参考にどこまで対応しているか調べてみました。

なお、入力する情報は上記のDiagram Syntaxに記載されているサンプル画像とこの画像をMermaid記法で記述してください。のプロンプトのみに限定しています。

種類 入力画像 出力(Qiita表現) 備考
Flowchart image.png image.png Endへの線が短い
Sequence Diagram image.png image.png アクティベーションが記載されてない
Class Diagram image.png image.png タイトルが無い、noteが正常に表示できていない
State Diagram image.png image.png タイトルが無い、MovingからStillへの遷移が無い
Entity Relationship Diagram image.png image.png 関係性が正常に表現できていない
User Journey image.png image.png catがいない
Gantt image.png image.png セクションと期間が正常に表示できていない
Pie Chart image.png image.png Pie Chartはサポートされていない
Quadrant Chart image.png image.png Quadrant Chartはサポートされていない
Requirement Diagram image.png image.png classDiagramで作成されている
Git image.png image.png タイトルが無い、ブランチ名・commit id・branch/checkout/mergeのタイミングが異なる
C4 Diagram image.png image.png graphで作成されている
Mindmap image.png image.png graphで作成されている
Timeline image.png image.png ganttで作成しようとしたが失敗している
Sankey image.png image.png Sankeyはサポートされていない
XYChart image.png image.png XYChartはサポートされていない

※実験的にZenUMLが組み込まれていますが、Mermaidとは独立して存在しているため除外しています

デフォルトだと7種類の図に対応しており、対応済みの種類についてはかなりの精度でMermaid記法の記述を出力してくれるようです。

種類の追加と精度向上

デフォルトでは対応していないMermaid記法の種類については[公式ドキュメントのDiagram Syntax]のURLや[Githubのsyntaxのmdファイル]を添付すると、browsingやanalysisで解析して回答に使用してくれるようになります。(All Tools素晴らしいですね)

区分 公式ドキュメントURL添付 Github syntaxファイル添付
入力 image.png image.png
出力 image.png image.png

また、上記の対応で精度も向上しますが、プロンプトに下記を追記する事で、より精度が向上します。

  • 役割
  • 解析ステップ
  • 元画像の説明(オブジェクトや線の形状の説明)
  • 出力したいMermaid記法の図の種類(ダイアグラム定義)
  • 出力したいMermaid記法の注意事項

プラグインの使用

ChatGPTではプラグインを使用して機能を拡張する事ができ、Mermaid用のプラグインも公開されていますが、使用するにはPRO以上を購入する必要があります。

image.png

ChatGPTでプラグインを使用するには、設定からプラグインを有効化します。
image.png

また、機能一覧からPluginsを選択、Plugins storeに遷移し、mermaidを検索してプラグインをインストールします。

image.png

上記の種類の追加と精度向上の対応や、後述するGPTsで十分な場合もあるので、プラグインを購入する前に一度お試しください。

日本語が含まれる画像の処理

画像に日本語が含まれる場合に、文字情報が読み取れないと回答が返ってくる場合があります。

  • 入力画像
    image.png
  • 出力
    image.png

自分でテキストデータを抽出して渡す

手間はかかりますが、言われた通りに画像に記載されているテキストを羅列して渡すと、画像の解析結果とテキストをマッピングして、Mermaid記法の記述を出力してくれます。

image.png

出力されたMermaid記法
sequenceDiagram
    participant ユーザー
    participant ウェブサーバー
    participant アプリサーバー
    participant データベース

    ユーザー->>ウェブサーバー: Httpリクエスト
    ウェブサーバー->>アプリサーバー: リクエスト転送
    アプリサーバー->>データベース: データ問い合わせ
    データベース->>アプリサーバー: 問い合わせ結果
    アプリサーバー->>ウェブサーバー: 処理結果
    ウェブサーバー->>ユーザー: Httpレスポンス

Googleドライブに画像ファイルをアップロードし、Googleドキュメントでファイルを開くとOCRで読み取られたテキストが記載されます。

image.png

OCRの読み取り精度もそこそこ高いので、画像からテキストを抽出する場合は手っ取り早くてオススメです。

PDF化して渡す

処理したい画像をツールで作成している場合は、画像をPDFとして保存するとテキストデータも一緒に出力できる場合があります。

そのようなテキストデータが含まれたPDFファイルをMermaid記法で記述するようにお願いすると、テキストデータを抽出・マッピングしてMermaid記法で出力してくれます。
image.png

また、PowerPointのファイルでも同様にテキストデータを抽出・マッピングしてMermaid記法で出力してくれます。
image.png

日本語をトレーニングする

そもそも日本語が読み取れない事が問題なので、トレーニングデータを渡して自分で日本語を読み取れるようになってもらいます。

ChatGPTでは画像内のテキスト情報の読み取りにTesseractというオープンソース(Apache-2.0 license)のOCRエンジン(Pythonのpytesseractライブラリ)を使用していますが、ChatGPTはデフォルトでは日本語に対応していません。

だだ、Tesseractは日本語のトレーニングデータをGithub上に公開しているので、日本語のトレーニングデータをアップロードしてCode InterpreterでOCRエンジン(Pythonのpytesseractライブラリ)に読み込ませ、画像内の日本語の読み取りに使用する事ができます。

また、Tesseractが公開しているトレーニングデータは各言語毎に縦書きと横書きが用意され、いくつかの種類にリポジトリが分かれているので、用途に応じてアップロードするファイルを選択してください。

リポジトリ 説明 jpn(横書)
サイズ		 jpn_vert(縦書)
サイズ
tessdata_fast 最も速度が高いデータ 2.36 MB 2.9 MB
tessdata 速度・精度共に中間のデータ 34 MB 2.9 MB
tessdata_best 最も精度が高いデータ 13.7 MB 13.7 MB

リンク先の赤枠からトレーニングデータのダウンロードができます。
image.png

※よくわからない場合はとりあえずtessdata_fastリポジトリの横書と縦書のファイルをアップロードしておけば良いと思います

また、Code InterpreterでEasyOCRやPaddleOCRなどの、他のオープンソースの日本語のOCRエンジンを使用する場合は、別途トレーニングデータを用意する必要がありますので注意してください。

  • 入力
    image.png
  • 出力
    image.png
出力されたMermaid記法
sequenceDiagram
    participant ユーザー
    participant ウェブサーバー
    participant アプリサーバー
    participant データベース

    ユーザー->>ウェブサーバー: Httpリクエスト
    ウェブサーバー->>アプリサーバー: リクエスト転送
    アプリサーバー->>データベース: データ問い合わせ
    データベース-->>アプリサーバー: 問い合わせ結果
    アプリサーバー-->>ウェブサーバー: 問い合わせ結果
    ウェブサーバー-->>ユーザー: Httpレスポンス

GPTsでの操作

上記で紹介した種類の追加と精度向上や、日本語が含まれる画像の読み取り等の対応を毎回手動で設定するのが面倒な場合は、自分用にカスタマイズしたChatGPTを作成できるGPTsの機能を使用して、Mermaid用の設定を行ったGPTを作成する事ができます。

image.png

GPTsの作成方法

すでにGPTsの作り方については様々な記事で紹介されているので詳細はそちらに譲るとして、ココではザックリした流れを紹介していきます。

まずは設定からMyGPTsのCreate a GPTをクリックして、新しいGPTを作成する画面に遷移します。
image.png

画面左のGPT Builderとやりとりをしながら自分用のMermaidの設定を作成していきます。
image.png

GPT Builderとのやりとりが終わったらConfigureに移動し、種類の追加と精度向上を行うためにMermaidの[Githubのsyntaxのmdファイル]と、画像内の日本語を読み取れるようTesseractの日本語のトレーニングデータをKnowledgeにアップロードします。

次に、日本語で回答するようInstructionsの記述を日本語に翻訳し、先ほどKnowledgeにアップロードしたsyntaxファイルと日本語のトレーニングデータを使用するよう記載します。

最後に、CapabilitiesではデフォルトでCode Interpreterのチェックが外れているので、チェックをつけます。

image.png

Instructionsをどう記述するかで精度や使いやすさが変わるので、Previewなどで試しながらチューニングしてみてください。また、種類の追加と精度向上で記載したプロンプトの項目を記載しておくと、比較的安定して精度が向上します。

なお、アップロードするファイルには制限があるので、サイズの大きなファイルを選択する場合は下記を参考にしてください。
File uploads with GPTs and Advanced Data Analysis in ChatGPT

GPTsの公開方法

作成したGPTは右上のSaveから公開でき、公開するとメニュー左上のChatGPTの下に表示されて使えるようになります。

また、公開の方法には自分だけ使える、リンクを知っている人だけ使える、全員使える、の3種類があるので、用途に応じて選択してください。

image.png

公開する方法としてリンクを知っている人だけ使える、全員使えるを選択すると作成者名が表示されるようになります。

自分の本名が設定されている場合など、名前を公開したくない場合は設定から非表示にする事ができます。
image.png

おわりに

普段ChatGPTを使用する際はもう少し丁寧にプロンプトを作成しているのですが、今回記事を作成するにあたりNGケースとして記載したハズの雑なプロンプトで、思った以上に高い精度の回答が返ってきて驚きました。

また、GPTsだけでなくAssistantsを使用したシステムとのAPI連携なども色々できて面白そうなので、進展があれば本稿に追記するかもしれません。

37
16
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
Sign upLogin
37
16