はじめに（背景）
最近、ドキュメントを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の突貫で作ったところもあり、もし動作不具合などあったら申し訳ありません。コメント頂けましたら鋭意対応いたします。
ご利用は各自の責任でお願いします。
リンクはこちらです。
ご意見、ご感想、ご要望歓迎しております。
最後まで読んで頂きありがとうございます。