はじめに（背景）

最近、ドキュメントをMarkdownで作成することが増えてきて、VS Codeなどで作成する機会が増えました。
もちろん、VS Codeで作業することに差支えないし、ビューアーと並べて表示させることも可能（Ctrl + Shift + Vでビューアーを出し、splitで並べて表示）で、あまり困ることはないのですが、Mermaidをもっと視覚的に作れるといいなぁ・・・と思うこともあり、今回作成してみました。
※似たようなものは既にあるのかもしれませんが・・・

※リンクは記事の最後に貼ってます。

ポイント

1. マウス操作でMermaidが書ける「ビジュアル・ビルダー」

React Flowを活用し、ノードを繋ぐだけでMermaidコードが自動生成されます。

フローチャート / ER図 / クラス図に対応
ビジュアル操作とコード編集が双方向で同期

2. 作業を中断させない「デュアルバッファ」

「文章を書く場所（Markdown）」と「図を試行錯誤する場所（Mermaid）」を独立して保持。
図が完成したらそのままMarkdownに反映できます。

3. 「どこでも動く」ポータブル設計

Tauri v2を採用し、完全オフラインで動作します。

インストール不要: 実行ファイル単体で動作
ポータブル: 設定やライブラリを実行ファイルと同階層に保持可能（USBメモリ運用もOK）

4. 豊富なテンプレート

Markdown、Marmaidで色々なテンプレート（とチートシート）を用意しているので、どのように書くかわからなくなってもテンプレートから作成可能

技術スタック

Core: Tauri v2 (Rust)
Frontend: React 19 + TypeScript
Editor: Monaco Editor (VS Codeと同じ操作感)
Visual Logic: React Flow + Strategyパターン

※構成の理由
Tauri v2 → ポータブル性と軽量性（今回のアプリも14MBと軽量）
Monaco → VS Code互換の操作性
React Flow → ノードベースUIの実装効率

作ってみて分かったこと

Tauri v2のファイルシステムAPIが便利で、OSを意識せずにセキュアなローカル保存機能（ポータブルストレージ戦略）を実装できたのが大きな収穫でした。（AI駆動ですが）
また、Mermaidコードのパース部分にStrategyパターンを採用したことで、今後新しい図解タイプを追加する際の拡張性も確保できました。（やるかはわかりませんが）

操作イメージ

1.Markdownエディタ

①Markdownエディタタブを選択します。
②必要に応じてテンプレートを選択します。（表示しているのは基本文書構成）
③一時中断や再利用したいものはライブラリに登録します。（左下に登録されます）
④mdファイルに出力したい、読み込んだりできます。
⑤チートシートを表示すると右に一覧が出ます。（右上の歯車マークで追加したりjson形式で出力することも出来ます）
※正直VSCodeにはかないません

2.Mermaidエディタ

基本Markdownと同じです。
右上に「Markdownに挿入」がありますが、そのまま、Markdownの最下部に追加されます。

3.ビジュアル・ビルダー（メイン）

これも簡単です。
なにかしらのテンプレートを使い、①ノード追加を押すとノードがブラウザに乗っかります。
②ノード名を変更し、任意の場所に移動し、線を引っ張ると接続します。
Mermaidで見ると次のようにコードが生成されます。

Markdownに差し込むとこんな感じです。
なお、ダークモード/ライトモードもあります。

最後に

結構しっかりとしたものができたと思うので、インターネットが使えない、インストールに厳しい環境でご利用になってみてください。
いつかマニュアルも充実させたいと思います。（できてなくてすみません）
※GWの突貫で作ったところもあり、もし動作不具合などあったら申し訳ありません。コメント頂けましたら鋭意対応いたします。

ご利用は各自の責任でお願いします。

リンクはこちらです。

ご意見、ご感想、ご要望歓迎しております。
最後まで読んで頂きありがとうございます。