Mermaid図エディタ（フローチャート・シーケンス図・ER図）
Mermaid記法でフローチャート、シーケンス図、ER図、クラス図、状態遷移図、ガントチャート、マインドマップ、Gitグラフを作成し、リアルタイムにプレビューできるツールです。テーマや背景色の変更、ズーム・パン、SVG・PNG（1x〜3x）での書き出し、URLでの共有に対応し、描画はすべてブラウザ内で行われます。
Tab で字下げ、Shift+Tab で字下げ解除。エディタから移動するときは Esc を押してから Tab を押してください。入力内容は自動で保存されます。
使い方
- 「テンプレート」から作りたい図の種類を選ぶと、日本語のサンプルがエディタに入ります。
- 左のエディタでMermaid記法を編集すると、少し遅れて右のプレビューに反映されます。構文エラーがある場合は行番号付きでエラーが表示され、プレビューには直前の正しい図が残ります。
- 「テーマ」と「背景色」で見た目を変えます。プレビューはドラッグで移動、Ctrl（⌘）＋ホイールやボタンで拡大・縮小できます。
- 「SVGをダウンロード」「PNGをダウンロード」で画像として保存します。PNGは1x・2x・3xの解像度を選べます。
- 「共有リンクをコピー」で、同じ図を開けるURLを取得できます。入力内容は自動で保存され、次回開いたときに復元されます。
このツールについて
Mermaid図エディタは、テキストで図を記述できるMermaid記法を使って、設計書やドキュメントに載せる図を作成するツールです。GitHubやGitLab、Notionなどでも使われている記法のため、作成したソースをそのままMarkdownに貼り付けて使うこともできます。
描画にはMermaid（MIT）を使用し、ユーザーが入力したHTMLやスクリプトが実行されないよう securityLevel を strict に設定しています。日本語のラベルが文字化けしたり見切れたりしないよう日本語フォントを指定し、PNG書き出しで崩れないようラベルはSVGのテキストとして描画しています。
Mermaidのライブラリはこのツールのページを開いたときにだけ読み込まれます。共有リンクは図の内容を圧縮してURLのハッシュ部分（#以降）に入れる仕組みで、ハッシュはサーバーに送信されないため、図の内容が外部に保存されることはありません。
よくある質問
作成した図はどこに保存されますか？
入力内容はこのブラウザ（localStorage）に自動で保存されます。共有リンクを使うと、内容がURLに含まれるため、リンクを知っている人が同じ図を開けます。
PNGで日本語が正しく表示されないことはありますか？
PNGは閲覧している端末の日本語フォントを使って描画します。通常は問題ありませんが、日本語フォントがない環境では表示が崩れる場合があります。その場合はSVGで保存してください。
ELKレイアウトは使えますか？
使えません。ELKレイアウトに必要なライブラリ（elkjs）はライセンス（EPL-2.0）の都合で含めていないため、既定のレイアウトで描画してください。
入力したスクリプトが実行されることはありますか？
ありません。Mermaidの securityLevel を strict に設定しているため、図の中のHTMLタグやクリック時のスクリプトは無効化されます。