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が構文を検証し、ステータスバーに問題点、または 有効・Nノード、Mコネクタ のいずれかが表示されます。いつでも 検証 をクリックすることもできます
4. 適用 をクリックしてダイアグラムを配置するか、キャンセル で閉じます。適用 は有効なダイアグラムのみを配置します

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

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

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

Diagrammixは幅広いMermaidダイアグラムタイプを認識します。主なものは次のとおりです：

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

ステート図の構文

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

基本的なステート図：

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入力：

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ダイアグラムはソースを保持するため、シェイプを1つずつ編集する代わりにMermaid記法で作業し続けることができます。

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

インポート後にキャンバス上でダイアグラムを変更していた場合、パネルはそれらの変更を 保持されないキャンバス上の編集 として一覧表示するため、再描画する前に判断できます。

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

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

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

ヒント： ダイアグラムをどのように維持するかを最初に決めましょう。Mermaid主導で管理し続けるには </> ソースエディタを使い、一度きりの見た目の調整にはシェイプを直接編集してください。大量の手動編集は、ソースを再描画した結果と乖離する可能性があります。

制限事項

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

ヒント

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