> ## Documentation Index > Fetch the complete documentation index at: https://craft-support.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Mermaidダイアグラム > Mermaidを使って、Craftでフローチャート、シーケンス図、ER図など、テキストベースのダイアグラムを作成しましょう。 CraftはMermaidダイアグラムに対応しています。シンプルなテキスト構文を書くだけで、ビジュアルなダイアグラムを作成できる機能です。数行のコードを入力するだけで、Craftがドキュメント内にくっきりとしたダイアグラムをレンダリングします。 ダイアグラムは入力と同時にリアルタイムで更新され、すべてのプラットフォームで動作し、共有・公開ページでも表示されます。 CraftドキュメントにレンダリングされたMermaidフローチャート ## Mermaidダイアグラムを挿入する 以下のいずれかの方法でMermaidダイアグラムを追加できます。 * `/mermaid` と入力して **Mermaidダイアグラム** を選択する * サイドバーの **挿入** パネルから **Mermaidダイアグラム** を選択する（リッチブロックの項目内） * ` ```mermaid ` コードフェンスを含むMarkdownを貼り付ける — Craftが自動的に変換します ## 編集 Mermaidブロックを開くと、上部にレンダリング済みのダイアグラム、下部にコードが表示されるスプリットビューになります。入力と同時にプレビューがリアルタイムで更新されます。 上部にダイアグラムプレビュー、下部にコードエディタが表示されたスプリットビュー Mermaidブロックをクリックするとスプリットビューで開きます。上部にダイアグラムプレビュー、下部にコードエディタが表示されます。プレビューをダブルタップすると拡大できます。 ブロックをタップするとコードエディタが開き、上部にライブプレビューが表示されます。iPhoneではキーボードを閉じるとダイアグラムを確認できます。プレビューをダブルタップすると拡大できます。 ブロックをクリックして編集します。ブロックのコンテキストメニューにある表示モードメニューから、編集・プレビュー・スプリットビューを切り替えられます。 Mermaidの構文を覚えていなくても大丈夫です — Craft AIアシスタントがダイアグラムを生成できます。作りたいものを説明するだけで、コードを書いてくれます。 ## 対応しているダイアグラムの種類 ### フローチャート プロセス、意思決定、ワークフローを図式化できます。上から下へのレイアウトには `graph TD`、左から右へのレイアウトには `graph LR` を使います。 ``` graph TD A[Start] --> B{Decision} B -->|Yes| C[Do This] B -->|No| D[Do That] C --> E[Done] D --> E ``` ### シーケンス図 人やシステム間のやり取りを時系列で表現します。 フードデリバリーのフローを示すシーケンス図 ``` sequenceDiagram User->>App: Place order App->>Payment: Charge card Payment-->>App: Confirmed App-->>User: Order placed ``` ### 状態遷移図 注文の追跡やワークフロー、プロセスなど、状態の変化を視覚化するのに最適です。 注文のライフサイクルを示す状態遷移図 ``` stateDiagram-v2 [*] --> Draft Draft --> Review Review --> Published Review --> Draft : Needs changes Published --> [*] ``` ### クラス図 システムの構造（何が存在するか、そのプロパティ、相互関係）を表現します。 ``` classDiagram class Document { +String title +Date created +publish() } class Folder { +String name +getDocuments() } Folder "1" --> "*" Document : contains ``` ### ER図 データの関係性をモデル化します。データベース設計や計画立案に最適です。 ``` erDiagram AUTHOR ||--o{ POST : writes POST ||--o{ COMMENT : has ``` ### チャート 棒グラフ、折れ線グラフ、またはその組み合わせを作成できます。 ``` xychart-beta title "Monthly Revenue ($K)" x-axis [Jan, Feb, Mar, Apr, May, Jun] y-axis "Revenue" 0 --> 120 bar [45, 62, 78, 55, 89, 105] ``` ## テーマを変更する Mermaidダイアグラムはコードエディタのテーマに合わせて外観が変わります。見た目を変えるには、ツールバーの**ペイントブラシアイコン**をタップしてテーマを選択してください — Tokyo Night、Dracula、Nord、GitHubなどのオプションが用意されています。 ダイアグラムは即座に更新されます。また、ドキュメントのライトモード・ダークモードにも対応しています。 ライトテーマのMermaidダイアグラム ダークテーマのMermaidダイアグラム ## 共有と公開 Mermaidダイアグラムは共有・公開ページでもレンダリングされます。リンクを閲覧する人にはコードではなく、完成したダイアグラムが表示されます。特別な設定は不要です。 ## インポートとエクスポート * **Markdownインポート**: ` ```mermaid ` コードフェンスを含むMarkdownを貼り付けまたはインポートすると、CraftがMermaidブロックを自動的に作成します。 * **Markdownエクスポート**: Mermaidブロックは標準の ` ```mermaid ` コードフェンス形式でエクスポートされ、他のツールとも互換性があります。 ## ヒント 通常、コードに構文エラーがあることを示しています。タイプミスや矢印の欠落がないか確認してください。他のツールから構文をコピーしている場合は、Craftが対応しているのはフローチャート、シーケンス図、状態遷移図、クラス図、ER図、XYチャートのみである点にご注意ください — 円グラフ、ガントチャート、マインドマップなどは現在サポートされていません。 はい。作りたいダイアグラムを説明するだけで、Craft AIアシスタントがMermaidコードを生成します。既存のダイアグラムの修正や拡張をお願いすることもできます。 MacおよびiPadでは、ダイアグラムプレビューをダブルタップすると拡大できます。Webではフルスクリーンビューを使うと大きなダイアグラムを確認しやすくなります。 Mermaidは多くのツールで使われているオープンスタンダードです。各ダイアグラムタイプの完全な構文については [mermaid.js.org](https://mermaid.js.org/intro/) をご覧ください。