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 ダイアグラムのインポート

クリップボードから

1. Mermaid 構文をクリップボードにコピー
2. Diagrammix3 で ファイル → インポート → クリップボードから Mermaid に移動
3. ダイアグラムがキャンバス上に作成されます

ファイルから

1. ファイル → インポート → Mermaid ファイル... に移動
2. .mmd または .mermaid ファイルを選択
3. ダイアグラムがキャンバスにインポートされます

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

ステート図の構文

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

基本的なステート図：

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 へのエクスポート

現在のダイアグラムをエクスポート

1. ファイル → エクスポート → Mermaid... に移動
2. 保存場所を選択
3. ダイアグラムが .mmd ファイルとしてエクスポートされます

Mermaid としてコピー

1. エクスポートしたいシェイプを選択（すべて選択するには Cmd+A）
2. 編集 → Mermaid としてコピー に移動
3. Mermaid 構文を必要な場所に貼り付け

インポートしたダイアグラムの編集

インポートされると、Mermaid ダイアグラムはネイティブの Diagrammix オブジェクトになります。以下が可能です：

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

元の Mermaid ソースとの接続は維持されません。変更はダイアグラムオブジェクトに直接行われます。

制限事項

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

ヒント

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