Mermaid エディタ
入力待ち
Mermaid図表エディタとは？
MermaidはJavaScriptベースの図表描画ツールで、Markdownに似たテキスト構文を使用してさまざまな図表を生成します。手動で図形をドラッグする必要はなく、シンプルなテキストの記述だけで、フローチャート、シーケンス図、クラス図などを自動的に生成できます。このツールはオンラインのMermaid編集環境を提供し、リアルタイムプレビュー、ドラッグ＆ズーム、エクスポート機能を備え、開発者が素早く図表を作成・共有できるように支援します。
使い方
使い方
- 左側のエディタにMermaid構文を入力します
- 右側のパネルにリアルタイムで図が描画されます
- マウスでドラッグ、スクロールホイールで拡大縮小できます
- エクスポートボタンをクリックしてPNGまたはSVGとして保存します
図の確認
- 意味のある編集のたびに再描画してください。Mermaidのエラーは、インデント、句読点のエスケープ漏れ、選択した図タイプでサポートされていない構文が原因になることが多いです。
- エクスポート前に、ラベル・矢印・改行が実際に使うサイズで読みやすく表示されるか確認しましょう。
利用シーン
仕組み
Mermaidは2014年にKnut Sveidqvistが始めたオープンソースの図表描画ライブラリです。その核心的なアイデアは、人間が読みやすいDSL（ドメイン固有言語）をパーサーを通じてSVGグラフィックに変換することです。全体のパイプラインは3つのステップで構成されます。jisonで生成されたレキサー/パーサーがソースを内部データ構造に解析し、図表タイプ固有のレイアウトアルゴリズムがノードとエッジの座標を計算し、最後にd3がレイアウトをSVG要素として描画します。 異なる図表は異なるレイアウトエンジンを使用します。フローチャートはデフォルトでdagre（レイヤード有向グラフレイアウト）を使用し、v10以降はELK（より強力だが重量）もサポートしています。sequenceDiagramは参加者を水平方向に配置しメッセージを垂直方向にスタックするカスタムタイミングレイアウトを使用します。ganttは依存関係を持つタスクを時間軸上に手動でレイアウトします。classDiagramとstateDiagramもdagreを活用しています。レイアウトアルゴリズムこそが可読性を決定します。dagreはSugiyamaフレームワークに従い、ランクの割り当て、エッジ交差の最小化、間隔の詰めを行い、一般的なサイズのフローチャートではうまく機能します。 Graphvizと比較すると、Mermaidの構文は自然言語に近く（例：A --> B）、ライブプレビュー付きでブラウザ上でネイティブに描画されます。GraphvizのDOT言語はより低レベルで、レイアウトエンジン（fdp、neatoなど）はより成熟していますが、ローカルインストールが必要で、デフォルトのスタイルは時代遅れです。Mermaidは現在15種類以上の図表タイプをサポートしています。フローチャート、sequenceDiagram、classDiagram、stateDiagram、erDiagram、gantt、pie、journey、gitGraph、mindmap、timeline、quadrantChart、sankey、xychart、blockなど、ソフトウェアエンジニアリングの描画ニーズの大多数をカバーしています。
- 解析：jisonで生成されたパーサーがDSLテキストを内部ASTに変換します。各図表タイプは独自の文法ファイルを持ちます。
- レイアウトアルゴリズム：フローチャートはdagreによるレイヤード有向グラフレイアウトを使用し、ELKに切り替えることも可能です。シーケンス図とガントチャートはそれぞれ専用のレイアウトロジックを使用します。
- レンダリングエンジン：d3でSVGを描画します。ノードはg/rect/path/text要素を使用し、矢印はマーカーで定義されます。
- 図表タイプ：フローチャート、シーケンス、クラス、状態、ER、ガント、パイ、ジャーニー、gitGraph、マインドマップなど15種類以上に対応しています。
- Graphvizとの比較：Mermaidはフレンドリーな構文とネイティブなWebサポートを備えています。Graphvizはより精密なレイアウトを持ち、大規模で複雑なグラフに適しています。
- テーマ：themeVariables設定またはinitディレクティブで、default、dark、forest、neutralなど内蔵テーマを切り替えられます。
使用例
フローチャート
flowchart TD
A[開始] --> B{ログイン済み？}
B -- はい --> C[ホームページ]
B -- いいえ --> D[ログインページ]
D --> E[認証情報を入力]
E --> C
C --> F[終了]シーケンス図
sequenceDiagram
participant Browser
participant Server
participant Database
Browser->>Server: GET /api/user
Server->>Database: SELECT * FROM users
Database-->>Server: ユーザーデータ
Server-->>Browser: JSON レスポンスガントチャート
gantt
title プロジェクト計画
dateFormat YYYY-MM-DD
section 設計
要件定義 :a1, 2026-06-01, 7d
UI 設計 :a2, after a1, 10d
section 開発
フロントエンド :b1, after a2, 20d
バックエンド :b2, after a2, 18d
section テスト
結合テスト :c1, after b1, 7dよくある質問
Mermaidはどんな図の種類に対応していますか？
Mermaidはフローチャート、シーケンス図、クラス図、状態図、ER図、ガントチャート、円グラフ、ユーザージャーニーマップ、Gitグラフ、マインドマップ、四象限図に対応しています。コードの最初の行で種類を宣言します（例：'flowchart TD' または 'sequenceDiagram'）。
図に構文エラーが出るのはなぜですか？
最も一般的な原因は、セミコロンや矢印演算子の欠落、ノードラベル内の括弧の不一致（特殊文字を含むテキストには引用符を使用：A["Hello (world)"]）、図の種類に対する誤った矢印構文（フローチャートは-->、シーケンスは->>）、サブグラフのインデント問題です。エラーパネルは通常、解析が止まった行を指し示します。
図を画像としてエクスポートするにはどうすればいいですか？
エクスポートボタンを使ってSVG（ベクター、スケーラブル、スライドやドキュメントに推奨）またはPNG（ラスター、チャットやメールにすぐ使える）として保存できます。HTMLに直接埋め込んだり、FigmaやIllustratorでさらに編集したい場合は、SVGマークアップをコピーしてください。
色やスタイルをカスタマイズできますか？
はい。'classDef'でCSSライクなスタイルを定義し、'class A,B,C myStyle'で適用します。一回限りの変更には、'style A fill:#f9f,stroke:#333'のようなインラインオーバーライドが使えます。グローバルなテーマ設定には、最初の行に %%{init: {'theme':'forest'}}%% を記述します。組み込みテーマはdefault、forest、dark、neutral、baseです。
長さや複雑さに制限はありますか？
Mermaidは数百ノード規模であれば問題なくレンダリングしますが、それを超えるとレイアウト時間が非線形に増加します。図が遅かったり読みにくかったりする場合は、複数のリンクされた図に分割するか、サブグラフを使って関連ノードをグループ化してください。エッジの交差が多いと自動レイアウトの位置決めが悪くなります。
ノードにハイパーリンクやクリックハンドラを追加するには？
'click NodeId "https://example.com"' でノードをリンクにしたり、'click NodeId callback "tooltip"' でmermaid.parseErrorに登録されたJavaScriptコールバックを発火させたりできます。エクスポートしたSVG内でも、埋め込み先のページがリンクを除去しない限りリンクは機能します。
同じMermaidコードを他のどこでレンダリングできますか？
GitHub Markdown、GitLab、Notion、Obsidian、Typora、VS Code（拡張機能あり）、最近のドキュメンテーションツールのほとんどは、Mermaidコードブロックをネイティブにレンダリングします。同じコードを貼り付ければ、各プラットフォーム選択のテーマで描画されます。