← ドキュメント

Mermaidをインポート

更新日 2026年8月5日

Mermaidで書かれたダイアグラムがすでにある場合は、手で描き直すことなくキャンバスに直接インポートできます。結果はキャンバスオブジェクトになり、移動・編集してプレゼンテーションの他の要素と組み合わせることができます。

サポートされているダイアグラムの種類

インポーターは TD、LR、BT、RL の方向を持つ flowchart または graph ダイアグラムのみをサポートしています。その他の Mermaid ダイアグラムの種類（sequence、Gantt、ER など）はサポートされていません。貼り付けてもインポーターはエラーを表示します。

ダイアグラムをインポートする方法

  1. エディターでプレゼンテーションを開きます。
  2. ツールバーの Mermaidをインポート をクリックします。
  3. ダイアログのテキストエリアに Mermaid コードを貼り付けるか、ファイルをアップロード を使って .mmd ファイルを読み込みます。
  4. コードが有効になったら インポート をクリックします。

ダイアグラムは現在のカメラ位置を中心にキャンバスに表示されます。

互換性のあるコードの例

flowchart TD
    A[Start] --> B{Any data?}
    B -- Yes --> C[Process]
    B -- No --> D[End]
    C --> D

このブロックは4つのノードと3つのコネクターを生成します。コードフェンスマーカーは省略することもできます。インポーターは Mermaid コードをそのまま受け付けます。

編集できる内容

各ノードはテキストラベルを持つキャンバス図形になります。各コネクターはキャンバスコネクターになります。自分で描いた場合と同様に、任意の要素を移動・リサイズ・色変更・テキスト編集できます。

コードにサブグラフが含まれている場合、インポーターは自動的にグループ化します。必要に応じて後からグループを解除できます。

よくある質問

.mmd ファイルを直接インポートできますか？ はい。ダイアログの ファイルをアップロード ボタンを使って、デバイスから .mmd ファイルを読み込めます。

インポーターは Markdown コードフェンス内のコード（```mermaid）を受け付けますか？ はい。インポーターは ```mermaid および ``` マーカーを自動的に検出して取り除きます。

インポーターが「コード内にノードが検出されませんでした」と表示するのはなぜですか？ コードに有効なノードが含まれていないか、サポートされていないダイアグラムの種類が使われている場合に発生します。最初の行が flowchart または graph に続けて有効な方向（TD、LR、BT、または RL）で始まっているか確認してください。

Mermaid のインポートは AI の使用量を消費しますか？ いいえ。コードを貼り付けたりアップロードしたりして Mermaid をインポートしても、AI の使用量は消費しません。AI を使った生成のみが消費します。詳細は AI によるダイアグラム をご覧ください。

次のステップ

ImagineでのMermaidインポート — NoxDragon Docs · NoxDragon