Mermaid サポート

Diagrammix3 は、人気のテキストベースのダイアグラム記述言語である Mermaid 構文を使用したダイアグラムのインポートとエクスポートをサポートしています。

Mermaid とは？

Mermaid は JavaScript ベースのダイアグラム作成ツールで、Markdown に似た構文でダイアグラムを定義します。ドキュメント、Wiki、README ファイルで広く使用されています。

Mermaid 構文の例：

flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]

Mermaid ダイアグラムのインポート

注: Mermaid のインポートとエクスポートは PRO 機能です。

Mermaid を挿入（プレビューと検証付き）

Mermaid をキャンバスに取り込む最も速い方法は Mermaid を挿入パネルです。配置前にダイアグラムをプレビューして検証します。

  1. 編集 → Mermaid を挿入 に移動
  2. エディタに Mermaid 構文を貼り付けるか入力
  3. 入力中に Diagrammix がライブで構文を検証し、以下を表示：
    • ダイアグラムが有効かどうか
    • 検出されたダイアグラムタイプ
    • ノードとコネクタの数

    エラーはインラインでフラグ表示されるため、キャンバスに触れる前に修正できます。
  4. 適用をクリックしてダイアグラムを配置、またはキャンセルで閉じる

Mermaid 挿入パネル

クリップボードから Mermaid を貼り付けると同じ検証が実行されるため、不正な構文が壊れたダイアグラムを生成することはありません。

注: Mermaid は Mermaid を挿入パネルに貼り付けるか入力することでインポートされます。専用の「ファイルをインポート」コマンドはありません。.mmd ファイルを取り込むには、任意のテキストエディタでそのファイルを開き、内容をコピーして貼り付けてください。

サポートされるダイアグラムタイプ

Diagrammix は幅広い Mermaid ダイアグラムタイプを認識します：

Mermaid タイプDiagrammix での変換結果
flowchart / graphシェイプとコネクタを持つフローチャート
sequenceDiagramUML シーケンス図
classDiagramUML クラス図
stateDiagramステートマシン図
erDiagramエンティティリレーションシップ図
mindmapマインドマップ
ganttガントチャート
pie円グラフ

その他の Mermaid タイプ（タイムライン、ユーザージャーニー、象限、XY チャート、サンキー、Git グラフなど）も認識されてインポートされますが、専用のレイアウトではなく一般的なノードとコネクタのグラフとしてレンダリングされます。Mermaid を挿入パネルでは、適用前に検出されたタイプが表示されます。

ステート図の構文

ステート図は、オブジェクトが取りうる状態とその状態間の遷移をモデル化します。

基本的なステート図：

stateDiagram-v2
    [*] --> Active
    Active --> Inactive : deactivate
    Inactive --> Active : activate
    Active --> [*] : terminate

状態と遷移：

  • [*] は開始状態と終了状態を表します
  • --> は遷移の矢印を作成します
  • : label は遷移ラベルを追加します
  • ネストされた状態はインデントを使用します

複合状態：

stateDiagram-v2
    state Processing {
        [*] --> Validating
        Validating --> Executing
        Executing --> [*]
    }

結果: 適切な状態シェイプとラベル付き遷移を持つステートマシン図。

インポート例

フローチャート

Mermaid 入力：

flowchart TD
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

結果: 矩形、角丸矩形、ダイヤモンドシェイプがラベル付き矢印で接続された上から下へのフローチャート。

Mermaid フローチャートインポート

シーケンス図

Mermaid 入力：

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello Bob!
    B-->>A: Hi Alice!

結果: 2人の参加者とメッセージ矢印を持つシーケンス図。

クラス図

Mermaid 入力：

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()

結果: 継承関係を持つ UML クラス図。

Mermaid へのエクスポート

Mermaid をコピー

Diagrammix はクリップボードを介して Mermaid へエクスポートします。専用の「ファイルへエクスポート」コマンドはありません。

  1. エクスポートしたいシェイプを選択するか、何も選択しないままにしてキャンバス全体をエクスポート
  2. 編集 → Mermaid をコピー に移動
  3. Mermaid 構文を必要な場所に貼り付け（必要であれば .mmd ファイルとして保存）

エクスポートは対象範囲の内容に合わせて変わります。マインドマップは mindmap 構文としてコピーされ、UML クラスやシーケンスのページは classDiagram / sequenceDiagram としてコピーされます。それ以外はすべて flowchart としてエクスポートされます。

Mermaid エクスポートメニュー

Mermaid での編集を継続（往復）

インポートされた Mermaid ダイアグラムはソースを保持するため、シェイプを1つずつ編集する代わりに Mermaid 記法で作業し続けることができます。

  1. インポートされた Mermaid ダイアグラムを選択
  2. ダイアグラムの </>（Mermaid ソースを編集）ボタンをクリック
  3. Mermaid ソースを編集パネルが元の Mermaid テキストを事前入力した状態で開きます
  4. テキストを編集して再レンダリングすることでダイアグラムをその場で更新

編集によってダイアグラムの構造が変わる場合（例：他の要素が依存しているノードを削除するなど）、パネルが非互換性を事前に一覧表示するため、コミット前に判断できます。

Mermaid ソースを編集

ネイティブオブジェクトとして編集

インポートされたダイアグラムをネイティブの Diagrammix オブジェクトとして直接編集することもできます：

  • シェイプを自由に移動・リサイズ
  • インスペクタを使用してスタイルを変更（色、フォント、ラインスタイル）
  • Diagrammix ツールを使用して新しい要素を追加
  • エンドポイントをドラッグして接続を変更
  • 自動レイアウトを適用してダイアグラムを再整理

ヒント: ダイアグラムの管理方法を最初に決めましょう。Mermaid 主導で維持するには </> ソースエディタを使用し、一度きりの視覚的な調整にはシェイプを直接編集してください。大量の手動編集はソースの再レンダリング結果と乖離する可能性があります。

制限事項

  • 複雑なスタイリング: Mermaid のスタイリングディレクティブは完全には変換されない場合があります
  • サブグラフ: グループ化されたシェイプに変換されます
  • 高度な機能: 一部の Mermaid 固有の機能（クリックハンドラーなど）は無視されます
  • 往復: 手動で大幅に編集したダイアグラムをエクスポートしても同一の Mermaid 構文にならない場合があります — 往復には </> ソースエディタを優先してください

ヒント

  1. インポート後に整理: 自動レイアウトを使用してインポートしたダイアグラムを整理
  2. リレーションシップを確認: リレーションシップタイプが正しくインポートされたことを確認
  3. 一貫したスタイルを適用: 洗練された外観のために Diagrammix スタイルを適用
  4. ソースを保持: バージョン管理のために元の Mermaid ファイルを保存