MarkNodeは図をプレビュー内で直接レンダリングします。Mermaid構文（フローチャートやシーケンス図などをプレーンテキストで記述する方法）を使ってフェンス付きコードブロック内に図を書くと、MarkNodeが完全にオフラインで、コードの代わりに画像として図を描画します。
図を書く
言語識別子にmermaidを指定したフェンス付きコードブロックを使用します。
```mermaid
flowchart TD
Start[Start] --> Decision{Need a diagram?}
Decision -->|Yes| Draw[Write it in Markdown]
Decision -->|No| Skip[Keep writing prose]
Draw --> Done[Done]
Skip --> Done
```プレビューではコードブロックがレンダリングされたフローチャートに置き換わります。Markdownのソースは変更されません。MarkNodeはその図を描画するだけです。図を変更したい場合は、mermaidのテキストを編集すると図が更新されます。
完全にスタイル適用される図の種類
フローチャート、シーケンス図、クラス図、状態図はMarkNodeのフル対応を受けます。単なる汎用的なはめ込み画像ではなく、ドキュメントの他の部分に合わせてレイアウトと組版が行われます。
たとえばシーケンス図は次のとおりです。
```mermaid
sequenceDiagram
participant Writer
participant MarkNode
Writer->>MarkNode: Write a mermaid code block
MarkNode-->>Writer: Render diagram in preview
```
クラス図と状態図も同じmermaidフェンスを使い、それぞれのMermaidキーワード（classDiagram、stateDiagram-v2）を指定することで、同じ水準の仕上がりでレンダリングされます。
その他の図の種類
円グラフやガントチャートを含む他の多くのMermaidの図の種類も、現在MarkNodeでレンダリングできます。コードではなく、テーマに合わせたスタイルの実際の図として表示されます。フローチャート、シーケンス図、クラス図、状態図に適用されているのと同水準のカスタムレイアウトの作り込みは、これらの図の種類にも今後のアップデートで対応する予定です。
テーマに合わせる
プレビューでは、図はドキュメントのアプリケーションテーマに従います。テーマを切り替えると、画面上の図もプレビューの他の部分と一緒にスタイルが変わります。個別に設定する必要はありません。
Quick Lookのプレビューでは、代わりにMacのシステムのライト／ダークの外観に従います。フローチャート、シーケンス図、クラス図、状態図はどちらの場合も一致しますが、円グラフとガントチャートは現在Quick Lookでは単一のパレットでレンダリングされます。
図が表示される場所
図は、レンダリングされたMarkdownを表示するすべての画面でレンダリングされます。
- ドッキングされたプレビューペイン
- ドッキング解除されたプレビューウィンドウ
- macOSのQuick Look（FinderでMarkdownファイルを選択してスペースキーを押します。Quick Lookプレビューを参照）
- DOCXエクスポート（埋め込み画像として）
エラー
図のMermaid構文に誤りがある場合（認識できない図の種類、構文のタイプミスなど）、MarkNodeは壊れた画像や空白の画像ではなく、元のフェンス付きコードブロックを表示します。ドキュメントの他の部分は通常どおりレンダリングされ、影響を受けるのはそのブロックだけです。ソースを修正すれば、次にプレビューが更新されたときに図が表示されます。
サポートされる構文
MarkNodeはMermaidプロジェクト自体の構文に従います。図の種類とオプションの全範囲については、Mermaid公式ドキュメントを参照してください。そこで有効なものはすべて、MarkNodeがレンダリングを試みる対象です。