多くのmermaidエディタは、テキストボックスとプレビューだけです。このエディタにはキャンバスもあります。クリックしてブロックを追加し、矢印をドラッグし、要素をエリアにまとめる ― mermaidコードは自動で生成されます。コードタブに切り替えて手動で編集すれば、キャンバスもそれに追従します。
入力するたびに描画
本物のmermaidエンジンが、最後のキー入力から数百ミリ秒後に再描画します。
コードとキャンバスが同期
どちらを編集してもOK。もう一方が自動で追従するので、2つのツール間でコピー&ペーストする必要はありません。
14種類のノード形状
四角形、角丸、ピル型、円、ひし形、データベース、六角形など、ワンクリックで選べます。
無料・登録不要
試用期間も透かしもありません。エディターはすぐに開きます。複数の図が必要なときだけログインしてください。
ビジュアルタブは、描画された図の上で動く本物のエディタです。ノードをクリックして選択、ダブルクリックでその場で名前を変更、どこでもドラッグしてパン移動できます。
クリックで組み立てるブロックを追加し、別のブロックへ矢印を向け、矢印にラベルを付ける。始める前に構文を覚える必要はありません。
形状を選ぶ決定を表すひし形、データベースを表す円柱、サブルーチンなど、mermaidフローチャートの14種類の形状を1つのピッカーから選べます。
自由に色付け8種類のプリセットとカラーピッカーを、1つのノードにもエリア全体にも適用できます。
テキストタブは純粋なmermaidです。GitHub、GitLab、Notion、Obsidianがすでにレンダリングしている、まさにその構文です。ここには独自形式は一切ありません。
手書きで入力mermaidを直接入力すれば描画されます。すぐ試せる6つのサンプルも用意されています。
双方向変換貼り付けたフローチャートは、ノード、形状、色、サブグラフまで含めてキャンバスに解析し直されます。
あらゆる図の種類フローチャート、シーケンス図、クラス図、状態遷移図、ER図、ガントチャート、Gitグラフ、円グラフ ― mermaidが対応するものは、すべてプレビューに描画されます。
アーキテクチャ図はすぐに1画面に収まらなくなります。パン、ズーム、グループ化は、それに逆らうのではなく、そのために作られています。
エリアと入れ子構造ブロックをサブグラフにまとめ、エリアの中にエリアを入れ子にし、サブツリー全体を一つの操作で移動できます。
2%から1600%までズームスクロールでパン、Ctrl+スクロールでズーム、ボタン一つで再センタリング。
編集のたびに自動保存編集中は図がブラウザに自動保存されます。ログインするとアカウントに保存され、どのデバイスでも使えます。
何もロックインされません。画像を取り出すことも、ソースを取り出すことも、文書に貼り付けられるMarkdownブロックを取り出すこともできます。
課金なし書き出しを含むすべての機能が無料です。アップグレードすべき有料プランはありません。
ブラウザで描画されます描画はブラウザ内で行われます。アカウントなしでは図がブラウザの外に出ることはなく、アカウントがあれば保存したドキュメントがどのデバイスにもついてきます。
SVG、PNG、.mmd、.mdSVGマークアップをコピー、2倍解像度のPNGをダウンロード、mermaidソースを保存、またはMarkdownのコードブロックを取得できます。
コードで図を書くツールは、すべてを手入力させます。ドラッグ&ドロップのツールは、差分を取れない画像しか渡してくれません。このエディタはどちらか一方を選ぶことを拒否します。
IQ Mermaid: キャンバスをダブルクリックすればノードが現れます。構文は後で学んでも、学ばなくても構いません。
一般的なツール: 先に構文リファレンスを読むか、テキスト表現が一切ないお絵かきツールを受け入れるかのどちらかです。
IQ Mermaid: 純粋なmermaid ― GitHub、GitLab、Notionがそのままレンダリングするテキストです。
一般的なツール: それを作ったツールでしか開けない独自形式のファイルです。
IQ Mermaid: コードを変更しても、ブロックを動かしても構いません。同じ図に対して両方向が機能します。
一般的なツール: 一方向のみ ― コード優先のツールにキャンバスはなく、キャンバス優先のツールにソースはありません。
IQ Mermaid: 無料 — メールすら不要です。
一般的なツール: 無料プランは図の数が数枚に制限され、書き出しや共同編集は有料プランの先にあります。
IQ Mermaid: ブラウザに、またはどのデバイスにもついてきてほしい場合はアカウントに。
一般的なツール: 誰かのサーバー上のアカウントに、あなたの図が紐づけられます。
始めるのに必要なのは、ページを開くことだけです。
mermaidは図のためのテキスト構文です。数行でノードと矢印を記述すると、レンダラーが図を描画します。GitHub、GitLab、Notion、ObsidianはMarkdown内でこれをレンダリングするため、mermaidブロックはプルリクエストやWikiページの中でも読みやすいまま保たれます。
はい。SVG・PNG への書き出しを含め、すべての機能が無料で、何も作成せずにエディターを使えます。任意の無料アカウントを作ると、保存できる図が増え、デバイス間で同期できます。有料プランはなく、制限される機能もありません。
いいえ。ビジュアルタブから始めてください。キャンバスをダブルクリックしてブロックを追加し、選択してから別のブロックへ矢印を引きます。mermaidコードは自動生成され、構文を学びたくなったときにいつでも読むことができます。
コードタブは、mermaidが対応するものすべて ― フローチャート、シーケンス図、クラス図、状態遷移図、ER図、ガントチャート、Gitグラフ、円グラフなど ― を描画します。ビジュアルキャンバスはフローチャートに特化しており、それが多くの図の実態です。
はい。SVGマークアップをクリップボードにコピーする、SVGファイルをダウンロードする、スライドや文書向けに2倍解像度でPNGをダウンロードすることができます。mermaidソースを.mmdやMarkdownのコードブロックとして保存することもできます。
アカウントなしの場合、1つの図はブラウザに保存され、同じデバイスで戻ればそのまま残っています。ログインするとアカウントに保存され、別のデバイスにも持っていけます。手元にコピーが欲しい場合はソースを書き出してください。
はい。コードタブに貼り付けると、フローチャートであればノード、形状、色、サブグラフを保ったままビジュアルキャンバスに解析し直されます。それ以外の図の種類はプレビューに描画されますが、コードのままです。
描画は完全にブラウザ内で行われるため、ページを読み込めばオフラインでも編集を続けられます。
空のキャンバス、コードタブ、すべての書き出しオプション ― 無料で、今すぐブラウザで。