Mermaid Viewer について

Mermaid Viewer は、ブラウザだけで動く無料の Mermaid 図エディタです。左側に Mermaid のテキストを書くか貼り付けると、入力に合わせて右側に図が描画されます。

描画はあなたのブラウザ内で行われます。図がサーバーにアップロードされることも、保存されることも、処理されることもありません。Mermaid はあなた自身のマシン上で JavaScript として動き、ドロップしたファイルもローカルで読み込まれます。だからこそ、クラウド上のツールには貼り付けたくない図でも使えます。社内アーキテクチャ、ラベルに顧客名が入っているシステム、NDA の対象になっているものなど。

隠すより言っておきたい注意点がひとつあります。共有リンクを有効にすると、図は URL そのものにエンコードされます。誰かに送る URL はネットワークを通ります。それ以外はすべてあなたのマシンに留まります。

ソフトウェアのアーキテクチャをドキュメント化する必要があり、その図を別の作図ツールではなくリポジトリの中、コードのすぐ隣に置きたいと考えていました。Mermaid はそのための当然の選択でした。足りなかったのは、それを見るための手頃な方法です。

先にツールを探しに行ったわけではありません。問題を眺め、これは小さいと判断し、短い時間できれいなものを作れそうだと見積もりました。それで作りました。このプロジェクトの最初のコミットは 2026 年 1 月です。

自分のために作っただけで、それ以上の目的はありませんでした。図を開き、描画されたものを見て、気になる部分を拡大し、誰かにリンクを送る。それがしたかったのです。ほかの人が見つけてくれたのは後の話で、それによって私が時間を割く先は変わりましたが、ツールそのものの性格は変わっていません。

描画は Mermaid が担当しています。このサイトはその周りのすべてです。即時プレビュー付きのライブエディタ、一画面に収まらない図のためのズームとパン、三種類のテーマ、SVG と PNG のエクスポート、URL にエンコードされた共有リンク、.mmd と .mermaid ファイルのドラッグ＆ドロップ、そして 18 言語のインターフェース。

利用は無料で、控えめな広告によって支えられています。

ご質問や不具合のご報告は dominik@malsch.solutions まで。運営者情報は 運営者情報 をご覧ください。