Closed4

「mermaid-fixer」を試す

kun432kun432

たまたま見つけた

https://github.com/sopaco/mermaid-fixer

READMEから抜粋。翻訳はPLaMo翻訳。


referred from https://github.com/sopaco/mermaid-fixer

Mermaid Fixer

🔧 Rust で構築された高性能なAI駆動型 Mermaid ダイアグラム構文修正ツール

📊 Markdown ファイル内の Mermaid ダイアグラムにおける構文エラーを自動検出・修正

👋 Mermaid Fixerとは?

Mermaid Fixer は、Markdown ファイル内の Mermaid ダイアグラムにおける構文エラーを自動検出・修正する高性能なAI駆動型ツールです。パフォーマンスと信頼性を重視して Rust で構築されたMermaid Fixer は、チームが最小限の手間で正確かつ有効なMermaidダイアグラムを維持できるよう支援します。

Mermaid Fixer は、静的構文検証とAIを活用したインテリジェントな修正を組み合わせた多段階ワークフローを採用しています。システムは JavaScript サンドボックス環境で Mermaid をレンダリングして構文の正確性を検証し、大規模言語モデル(LLM)と統合することで、元の意図と構造を保持しながら破損したダイアグラムをインテリジェントに修復します。

😺 Mermaid Fixerを使う理由

  • ダイアグラムの手動デバッグにかかる時間を大幅に削減
  • Mermaid ダイアグラムの構文を常に正しい状態に維持
  • ドキュメント品質を自動的に維持
  • 複雑な構文問題もインテリジェントに修正

🌟 こんな方におすすめ:

  • 技術文書作成チーム
  • ダイアグラムを使用するオープンソースプロジェクト
  • エンタープライズソフトウェア開発者
  • Markdown で Mermaid を使用しているすべての方!

❤️ Mermaid Fixerが気に入ったら、スター🌟をつけるか スポンサーになる で応援してください! ❤️

👀 スクリーンショット

🌠 機能と対応範囲

基本機能

  • 自動スキャン機能:ディレクトリ内の Markdown ファイルを再帰的にスキャン
  • 高精度な検出:JS サンドボックス環境を使用して正確な構文検証を実施
  • AIによる自動修正:LLM を活用して構文エラーをインテリジェントに修復
  • 詳細なレポート機能:修正前後の状態を比較表示
  • 柔軟な設定対応:複数の LLM プロバイダーとカスタム設定をサポート

高度な機能

  • 安全なテストが可能なドライランモード
  • 詳細な分析が可能な詳細ログ機能
  • タイムアウトとリトライ設定のカスタマイズ
  • 各種 Mermaid ダイアグラムタイプへの対応
  • インテリジェントなノード ID 正規化処理
  • スマートなテキストラベルクリーニング機能

💡 解決される課題

Mermaid ダイアグラムのよくある問題:

  • 表示できない破損したダイアグラム
  • 時間のかかる手動による構文デバッグ作業
  • ダイアグラムのフォーマットが統一されない問題
  • 複雑な構文規則を覚えにくい点

Mermaid Fixer はこれらの問題を以下のように解決します:

  • 構文エラーを自動検出
  • 破損したダイアグラムをインテリジェントに修復
  • 構文を修正しつつダイアグラムの意味内容を保持
  • 実施した修正内容を明確にフィードバック

🧠 動作原理

Mermaid Fixer の処理ワークフローは、スキャン、抽出、検証、修正、再検証、保存という6つの明確な段階に分かれています。各段階はパフォーマンスと精度を最適化するように設計されています。

6段階の処理パイプライン

  1. スキャン段階:対象ディレクトリ内のすべての Markdown ファイルを再帰的に検出
  2. 抽出段階:Markdown ファイルを解析し、Mermaid コードブロックを抽出
  3. 検証段階:JS サンドボックス環境を使用して各ダイアグラムの構文を検証
  4. 修正段階:AI技術を活用して無効なダイアグラムを修復し、意図した内容を保存
  5. 再検証段階:修正されたダイアグラムが構文的に正しいことを確認
  6. 保存段階:修正済みのダイアグラムでファイルを更新

処理フロー

アーキテクチャ概要

🔄 処理フロー

  1. スキャン段階: 指定されたディレクトリを再帰的にスキャンし、.mdおよび.markdownファイルを検出
  2. 抽出段階: MarkdownファイルからMermaidコードブロックを抽出
  3. 検証段階: JSサンドボックス環境を使用して各コードブロックの構文を検証
  4. 修正段階: AIを活用して無効なコードブロックを修復
  5. 再検証: 修正されたコードが構文的に正しいことを確認
  6. 保存: 修正内容を元のファイルに書き戻す

📈 出力統計情報

処理完了後、Mermaid Fixerは詳細な統計情報を提供します

📊 対応修正タイプ

  • ✅ ノードIDの正規化(特殊文字の削除、有効な命名規則の適用)
  • ✅ ノードテキストのクリーニング(角括弧内の特殊記号の削除)
  • ✅ 矢印ラベルの正規化(中国語ラベルの引用符処理)
  • ✅ 構文構造の修復(ダイアグラムタイプの宣言、矢印構文の修正)
  • ✅ スタイル宣言の修正(カラーフォーマット、プロパティ構文の調整)

🚨 重要な注意事項

  • LLM APIへのアクセスには安定したインターネット接続が必要です
  • 大量のファイルを処理する場合、API利用料が発生する可能性があります
  • 重要なドキュメントについては、まず--dry-runモードでのテストを推奨します
  • 本ツールは一般的にビルドに使用されるディレクトリ(node_modulestargetなど)は自動スキップします
  • 重要なドキュメントに修正を適用する前に、必ずファイルのバックアップを取ってください

⚛️ 開発に使用した技術

  • rust - パフォーマンスと安全性に優れたシステムプログラミング言語
  • headless_chrome - DevToolsプロトコル経由でヘッドレスChrome/Chromiumを制御する高レベルAPI
  • clap - コマンドライン引数パーサー
  • serde - シリアライゼーションフレームワーク
  • tokio - Rust向けの非同期ランタイム
  • reqwest - LLM API呼び出し用HTTPクライアント

🪪 ライセンス

MITライセンスを採用しています。


ちょいちょいLLMにMermaidで構成図とか書かせるのだけど、まあ結構な頻度でSyntax Errorになる。だいたいエラーのパターンは決まってるので、プロンプト書けばいい気もするのだけど、さっと直してくれるようなものはないか、ということで見つけた次第。

kun432kun432

インストール

インストールには以下が必要。

  • Rust (1.70以上)
  • Cargo
  • LLMのAPIキー (OpenAIなど)

今回はローカルのMacでやる。自分はHomebrewで何かのパッケージをインストールした際に依存関係でRustがインストール済だった。

which rustc
出力
/opt/homebrew/bin/rustc
rustc --version
出力
rustc 1.91.0 (f8297e351 2025-10-28) (Homebrew)
which cargo
出力
/opt/homebrew/bin/cargo

cargo で mermaid-fixer を インストール

cargo install mermaid-fixer

~/.cargo/bin にインストールされるので、パスを通しておくこと。

出力
(snip)
  Installing /Users/kun432/.cargo/bin/mermaid-fixer
   Installed package `mermaid-fixer v1.0.2` (executable `mermaid-fixer`)
warning: be sure to add `/Users/kun432/.cargo/bin` to your PATH to be able to run the installed binaries

自分はBashなので以下の通り。

export PATH="$HOME/.cargo/bin:$PATH:"
exec $SHELL -l
which mermaid-fixer
出力
/Users/kun432/.cargo/bin/mermaid-fixer

Usageを見ておく。

mermaid-fixer --help
出力
基于Rust和AI的markdown文档修复器,用于扫描和修复markdown文件中的mermaid图表语法错误

Usage: mermaid-fixer [OPTIONS] --directory <DIR>

Options:
  -d, --directory <DIR>                    要扫描的目录路径
  -c, --config <FILE>                      配置文件路径 [default: config.toml]
      --dry-run                            只检测问题,不进行修复
  -v, --verbose                            启用详细日志输出
      --llm-provider <LLM_PROVIDER>        LLM提供商 (openai, mistral, deepseek等)
      --llm-model <LLM_MODEL>              LLM模型名称
      --llm-api-key <LLM_API_KEY>          LLM API密钥
      --llm-base-url <LLM_BASE_URL>        LLM API基础URL
      --max-tokens <MAX_TOKENS>            最大token数
      --temperature <TEMPERATURE>          温度参数 (0.0-1.0)
      --timeout-seconds <TIMEOUT_SECONDS>  Mermaid验证超时时间(秒)
      --max-retries <MAX_RETRIES>          最大重试次数
  -h, --help                               Print help
  -V, --version                            Print version

中国語なのか・・・PLaMo翻訳の結果。

出力
RustとAIを活用したMarkdownドキュメント修正ツール。Markdownファイル内のMermaidチャート構文エラーをスキャンして修正します。

使用方法: mermaid-fixer [オプション] --directory <ディレクトリ>

オプション:
  -d, --directory <DIR>                    スキャン対象のディレクトリパス
  -c, --config <FILE>                      設定ファイルのパス [デフォルト: config.toml]
      --dry-run                             問題の検出のみを行い、修正は行わない
  -v, --verbose                            詳細なログ出力を有効にする
      --llm-provider <LLM_PROVIDER>        LLMプロバイダー (openai, mistral, deepseekなど)
      --llm-model <LLM_MODEL>              LLMモデル名
      --llm-api-key <LLM_API_KEY>          LLM APIキー
      --llm-base-url <LLM_BASE_URL>        LLM APIのベースURL
      --max-tokens <MAX_TOKENS>            最大トークン数
      --temperature <TEMPERATURE>          温度パラメータ (0.0-1.0)
      --timeout-seconds <TIMEOUT_SECONDS>  Mermaid検証のタイムアウト時間(秒)
      --max-retries <MAX_RETRIES>          最大リトライ回数
  -h, --help                               ヘルプの表示
  -V, --version                            バージョン情報の表示
kun432kun432

とりあえず適当なディレクトリを作成する。

mkdir mermaid-fixer-work && cd $_

Mermaidを含むMarkdownを出力する。自分はCodexを使った。

codex --full-auto "AWSで3層アーキテクチャのWebサービスの仕様書をMarkdownで作成して。構成図をmermaidで出力、ノードに各用途も記載して。"

作成されたMarkdownは以下のようなもの。

AWS-3tier-spec.md
# AWS三層Webサービス仕様書

## 1. 概要
- **目的**: グローバル向けB2C Webアプリケーションを高可用・高セキュリティで提供する。
- **対象ユーザー**: PC/モバイルブラウザからアクセスする一般顧客、運用担当者。
- **要件要約**: 月間200万PV、ピーク同時接続5,000、RTO 30分、RPO 5分、TLS 1.2以上。

## 2. 主要機能要件
- コンテンツ参照、会員認証、購買処理、管理者向け分析画面。
- REST/JSON API を外部連携向けに限定公開。

## 3. 非機能要件
- **可用性**: AZ マルチ構成、Web/App 層は Auto Scaling。
- **性能**: 95パーセンタイル応答 < 500ms、CDN キャッシュヒット率 80% 以上。
- **セキュリティ**: WAF、DDoS 防御 (AWS Shield Standard)、OWASP Top10 への対策、IAM 最小権限。
- **運用**: IaC (CloudFormation/CDK)、CI/CD、監視と自動通知。

## 4. ネットワーク設計
- VPC: /16 CIDR、3 AZ、Public/Private/DB サブネットを AZ ごとに配置。
- ルーティング: Public は IGW、Private は NAT Gateway 経由で外部通信、DB はアウトバウンド無し。
- セキュリティ層: Security Group + Network ACL、共通ログ収集 (VPC Flow Logs)。

## 5. アーキテクチャ構成図
```mermaid
flowchart LR
    Internet[利用者\n(HTTPS ブラウザアクセス)] --> WAF[WAF\n(L7 防御/レート制御)]
    WAF --> CDN[CloudFront\n(静的キャッシュ/SSL終端)]
    CDN --> ALB[Application Load Balancer\n(公開ロードバランサ)]

    subgraph PublicSubnet[Public Subnet (各AZ)]
        ALB -->|TLS終端| ASG[EC2 Auto Scaling (AL2023)\n(Web Tier: Nginx/静的配信)]
    end

    subgraph PrivateSubnet[Private Subnet (各AZ)]
        ASG --> APP[ECS on Fargate\n(App Tier: API/業務ロジック)]
        APP --> Cache[ElastiCache Redis\n(セッション/キャッシュ)]
        APP --> Queue[SQS\n(非同期ジョブ投入)]
    end

    subgraph DBSubnet[DB Subnet (各AZ)]
        APP --> RDS[Amazon Aurora MySQL\n(DB Tier: トランザクション)]
        Queue --> Worker[ECS Fargate Worker\n(バッチ/バックグラウンド処理)]
        Worker --> RDS
    end

    Backup[Backup Vault\n(Aurora/Config バックアップ)] --> S3Archive[S3 Glacier\n(長期保管)]
```

## 6. 各レイヤ詳細
### プレゼンテーション層
- CloudFront: 世界分散エッジ、オリジンは ALB。コンテンツ無効化は API。
- ALB: HTTP2/TLS1.2、ACM 証明書、ターゲットグループは Web Tier。
- WAF: OWASP Core Rule + カスタムルール、Bot Control オプション。

(snip)

Mermaidのコードが含まれたMarkdownが出力されているので、レンダリングしてみる。自分はVSCodeでレンダリングしてみた。

エラーが含まれていることがわかる。

ではこれを修正してみる。

まず mermaid-fixer の設定ファイルを作成する。LLMはOpenAIを使う。

config.toml
[llm]
provider = "openai"
model = "gpt-4o"
api_key = "<APIキー>"  # または環境変数で設定
max_tokens = 4000
temperature = 0.1

[mermaid]
timeout_seconds = 30
max_retries = 3

-d でディレクトリを指定して実行。まずは --dry-run で。

mermaid-fixer -d . --dry-run

んー、出力も中国語なのか

出力
📊 处理完成:
   📄 处理文件数: 1
   📊 总mermaid代码块数: 1
   ❌ 无效代码块数: 1

DeepLで翻訳。

出力
📊 処理完了:
   📄 処理ファイル数: 1
   📊 総Mermaidコードブロック数: 1
   ❌ 無効なコードブロック数: 1

エラーを検出していることがわかる。では修正。

mermaid-fixer -d .
出力
📊 处理完成:
   📄 处理文件数: 1
   📊 总mermaid代码块数: 1
   ❌ 无效代码块数: 1
   🔧 成功修复数: 0

DeepLで翻訳。

出力
📊 処理完了:
   📄 処理ファイル数: 1
   📊 総Mermaidコードブロック数: 1
   ❌ 無効コードブロック数: 1
   🔧 正常修復数: 0

んー、ダメみたい。--verbose をつけてみる

mermaid-fixer -d . --verbose
出力
🚀 开始扫描目录: .
📄 找到 1 个markdown文件

📝 处理文件: ./AWS-3tier-spec.md
   🔍 找到 1 个mermaid代码块
      📊 验证代码块 1/1
         ❌ 代码块无效: Mermaid渲染错误 (Unknown): CompileError
         ⚠️  AI修复失败: LLM API请求失败: {"detail":"Unauthorized"}

📊 处理完成:
   📄 处理文件数: 1
   📊 总mermaid代码块数: 1
   ❌ 无效代码块数: 1
   🔧 成功修复数: 0

DeepLで翻訳

出力
🚀 ディレクトリのスキャンを開始: .
📄 1個のmarkdownファイルを発見

📝 処理ファイル: ./AWS-3tier-spec.md
   🔍 1個のmermaidコードブロックを発見
      📊 コードブロック検証 1/1
         ❌ コードブロック無効: Mermaidレンダリングエラー (Unknown): CompileError
         ⚠️  AI修復失敗: LLM APIリクエスト失敗: {"detail":"Unauthorized"}

📊 処理完了:
   📄 処理ファイル数: 1
   📊 総Mermaidコードブロック数: 1
   ❌ 無効コードブロック数: 1
   🔧 成功修復数: 0

んー、APIキーそのものはちゃんと使えることを確認している。設定ファイルを個別指定、環境変数にしてみたりもしたけど、どうも正しくない気がする・・・

LLMとのやり取りをしているのはここ

https://github.com/sopaco/mermaid-fixer/blob/93f61402/src/ai_fixer.rs

ざっと見た限り、

  • LLM APIのデフォルトのベースURLはMistralのものを見ている。つまりbase_urlの設定が必要
  • あと気づいたこととして、最大出力トークンとtemperatureが固定、それぞれ 65536・0.1になっている。設定の意味がない。
    • つまり、gpt-4oなんかだと使えない(gpt-4oの最大出力トークンは16384)
    • あと max_tokens は、OpenAIだとObsoleteらしく、65536を超えるようなモデルはmax_tokensが使えない

という感じで詰む・・・

設定ファイルにある provider = "openai" ってのは「OpenAI向け」、というよりも「OpenAI互換向け」ってことなんだろうと思う。

kun432kun432

お手軽に直してくれるならいいなーと思ったんだけども、現状、

  • 設定値がハードコードされてて、設定ファイルの意味がない箇所がある
  • それに加えて、ハードコードされた設定値により、モデルがかなり限定されてしまう。

というところがあるので、わざわざ直してまでやるか?というところ。

このスクラップは2日前にクローズされました