Open4
LLMの吐いたテキストに含まれるmermaidのsyntax errorを手軽に直したい

LLMの作るmermaid図のsyntax error問題をメモ化再帰的な感じでリーズナブルに解決できないかな。
理想的にはブラウザだけで完結したい。

雑にgeminiと相談

はい、承知いたしました。
これまでの対話内容を、内部的に記録・整理した情報に基づいて詳細にダンプします。
【プロジェクト構想:LLMによるMermaid構文エラー自動修正システム】
-
1. 根本的な課題とゴール
-
課題: LLMが生成するMermaid図には構文エラーが多く、手動での修正は手間がかかる。
- 特に、テキストの切り貼りや、LLMとの複数回にわたる指示のやり取り(インテグレーション)が面倒。
- esaなどの特定環境では、詳細なエラー内容が分かりにくい。
- ゴール: Mermaid図を含むテキストを入力するだけで、構文エラーが自動的に修正された結果を一度で得られるようにしたい。
-
制約条件:
- ブラウザだけで完結すること。
- PCが使えない環境(スマートフォンなど)でも手軽に利用できること。
- お金をかけずに実現できること。
-
課題: LLMが生成するMermaid図には構文エラーが多く、手動での修正は手間がかかる。
-
2. システムの具体的なUI/UX案
- インターフェース: Webフォーム形式。
-
基本動作:
- ユーザーがフォームにMermaid図を含むテキスト全体を貼り付ける。
- システムが自動でMermaid部分のエラーを修正する。
- 修正されたMermaid図のプレビューが表示される。
- 必須機能: プレビュー機能。ユーザーにとってはこれがあれば十分。
-
3. 中核となる技術的アプローチ(通称:メモ化再帰的アプローチ)
- コンセプト: LLMによるエラー修正を一種の「探索処理」とみなし、過去の修正結果をキャッシュとして再利用することで、処理の効率化とリソース削減を目指す。
-
ステップ1:データ蓄積
- LLMがエラーを修正した際の、**変更前(エラーコード)と変更後(修正コード)**の差分(diff)データをひたすら蓄積する。
- 事前にエラーパターンを定義するのではなく、実際の修正結果そのものをデータとして活用する。
-
ステップ2:キャッシュ活用による修正フロー
- 新しいエラーコードが入力される。
- まず、蓄積されたdiffデータの中から、類似のエラーパターンを検索する。
- 類似パターンが見つかれば、その修正を適用し、解決できるか試す。
- 解決すれば、そこで処理を完了する(探索コストの削減)。
- 解決しなければ、改めてLLMによる探索(ゼロからの修正依頼)を実行する。
-
4. 既知の技術的課題と考察
-
Mermaidの特性:
- 構文が厳格(looseではない)で、わずかな空白や許容されない文字で壊れやすい。
- デファクトスタンダードであるため、利用は避けられない。
-
不親切なエラーメッセージ:
- Mermaidが出力するエラーメッセージは、パーサが生成したものであり、人間が修正の手がかりにしにくい。
-
類似パターン検索の実装:
- 不親切なエラーメッセージをどうやって類似度判定に利用するか、という課題がある。
- 対策案として、エラーメッセージだけでなく、コードの「構造」自体の類似性に着目する方法も考えられる。
- 方針: この具体的な実装方法については、まずはデータを蓄積してから検討を進める。
-
Mermaidの特性:

はい、承知いたしました。
ここまでの対話内容を、内部で記録していた情報に基づいて可能な限り詳細にダンプします。
【課題・目標】
-
根本的な課題:
- LLMが生成するMermaid図には構文エラーが頻繁に含まれる。
- この修正プロセスを、効率的かつ手間なく行いたい。
-
理想的な状態:
- テキスト(Mermaid構文を含む)を渡すと、Mermaid部分だけが自動で修正された結果が手に入る。
- LLMの回答を人間が手動でマージ(統合)する必要がない。
-
実行環境に関する要望:
- 理想的にはブラウザだけで完結させたい。
- PCが使えない環境でも、手軽に、低コストで実現したい。
【提案された解決アプローチ】
-
コンセプト: 「メモ化再帰」的な発想の応用
- エラー修正のプロセスを、コストの高い「探索」(LLMによるゼロからの修正)と捉える。
- 過去の「修正成功パターン」をキャッシュとして蓄積し、再利用することで探索コストを削減する。
-
キャッシュ(修正パターン)の具体像:
- 事前定義はしない: 一般的なエラーパターンをあらかじめ用意するのではない。
- 実績ベースで蓄積: 実際にエラーが修正できたケースの「変更前(Before)」と「変更後(After)」の差分(diff)をデータとして蓄積していく。
-
処理フロー案:
- ユーザーがMermaid構文を含むテキストを入力する。
- システムが構文エラーを検知する。
-
ステップ1: キャッシュの適用
- 蓄積された「修正成功パターン」を新しいエラー箇所に試しに適用してみる。
-
ステップ2: LLMによる探索
- キャッシュの適用で解決しなかった場合のみ、LLMに修正を依頼(探索処理を実行)する。
- 最終的に修正されたMermaid構文を、元のテキストに自動で反映(文字列置換)して返す。
【背景・課題感の詳細】
-
修正プロセスの面倒さ:
- インテグレーションの手間: テキストをコピーし、別のツールやLLMに貼り付け、結果をまたコピーして戻す、という一連の作業が面倒。
- LLMとのコミュニケーションコスト: エラーを修正するために、複数回の指示ややり取りが発生する。
-
Mermaid構文自体の特性:
- 構文が厳格(looseではない)で、わずかな空白や不正な文字で簡単に壊れる。
- 一部のプラットフォーム(例: esaのブログ)では、構文エラーの詳細が分かりにくい。
-
ユーザーインターフェース(UI)への要望:
- ユーザーにとっては、最終的に修正された図が表示されるプレビュー画面があれば十分。
- 修正の前後比較(diff)は、むしろキャッシュを蓄積する裏側の仕組みにとって重要。
【想定される実装形態】
- 形式: 特定のWebサイト上で動作するスクリプト。
-
実行プロセス:
- ユーザーがテキストを貼り付けると、裏側でMermaid部分の抽出、エラーチェック、キャッシュ適用、(必要に応じて)LLM連携、文字列置換、最終結果の表示までを自動で一括実行する。