← すべてのプロダクト
mermaid editor

mermaid editor

mermaid の図を、もっと直感的に。

mermaid editor は、mermaid.js のダイアグラムを GUI で作れるエディタです。コードを書かなくても、視覚的に図を組み立てられます。

GUI 操作

ノードやエッジをドラッグ&ドロップで配置。コードを書かなくても図が作れます。

リアルタイムプレビュー

変更が即座に反映されます。コードと図を同時に確認しながら編集可能。

多彩なダイアグラム

フローチャート、シーケンス図、ER 図、ガントチャートなど幅広く対応。

コードエクスポート

完成した図は mermaid コードとして書き出し可能。既存のドキュメントにも貼り付けられます。

  1. 1 エディタを開く
  2. 2 左パネルからダイアグラムの種類を選ぶ
  3. 3 ノードを追加・接続して図を組み立てる
  4. 4 コードをコピーして使う