Mermaid Preview

Mermaid（マーメイド）記法のフローチャート・シーケンス図・ER 図などをブラウザ上でリアルタイムに描画し、SVG / PNG 画像で保存できるシングルページツール。構文エラーのときも直前の図を残して表示し、Markdown の中の図も読み込めます。外部送信なし、ローカルで完結。

設計書やドキュメントに載せるフローチャート・シーケンス図・ER 図を、Mermaid 記法のテキストから作って画像で持ち出せるエディタ。描画はブラウザ内で行うため、社内システムの構成図のような外に出せない図でも安心して扱えます。

機能

テキストで図を書いて、すぐ確認：Mermaid 記法で書くと、入力の手を止めたタイミングで自動的に図を描き直します。書き間違えてもエラー内容を示しつつ直前の図を残すので、作業が途切れません。
資料にそのまま使える画像で保存：仕上がった図は SVG・PNG で保存でき、SVG はクリップボードへのコピーにも対応。設計書やスライド、Wiki にそのまま貼り付けられます。
サンプルから書き始められる：フローチャート・シーケンス図・クラス図・状態遷移図・ER 図・ガントチャート・円グラフのサンプルを用意。記法を覚えていなくても、近い図から書き換えて作れます。
Markdown の中の図も読み込める：.mmd ファイルのほか、.md ファイルを開くと最初の mermaid コードブロックを読み込みます。README に書いた図を画像にしたいときに便利です。

Vue 3、mermaid