Mermaidダイアグラム

Mermaidを使って、Craftでフローチャート、シーケンス図、ER図など、テキストベースのダイアグラムを作成しましょう。

CraftはMermaidダイアグラムに対応しています。シンプルなテキスト構文を書くだけで、ビジュアルなダイアグラムを作成できる機能です。数行のコードを入力するだけで、Craftがドキュメント内にくっきりとしたダイアグラムをレンダリングします。

ダイアグラムは入力と同時にリアルタイムで更新され、すべてのプラットフォームで動作し、共有・公開ページでも表示されます。

​

Mermaidダイアグラムを挿入する

以下のいずれかの方法でMermaidダイアグラムを追加できます。

• /mermaid と入力して Mermaidダイアグラム を選択する
• サイドバーの 挿入 パネルから Mermaidダイアグラム を選択する（リッチブロックの項目内）
• ```mermaid コードフェンスを含むMarkdownを貼り付ける — Craftが自動的に変換します

​

編集

Mermaidブロックを開くと、上部にレンダリング済みのダイアグラム、下部にコードが表示されるスプリットビューになります。入力と同時にプレビューがリアルタイムで更新されます。

macOS

Mermaidブロックをクリックするとスプリットビューで開きます。上部にダイアグラムプレビュー、下部にコードエディタが表示されます。プレビューをダブルタップすると拡大できます。

iOS / iPad

ブロックをタップするとコードエディタが開き、上部にライブプレビューが表示されます。iPhoneではキーボードを閉じるとダイアグラムを確認できます。プレビューをダブルタップすると拡大できます。

Web / Windows

ブロックをクリックして編集します。ブロックのコンテキストメニューにある表示モードメニューから、編集・プレビュー・スプリットビューを切り替えられます。

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ダイアグラムは共有・公開ページでもレンダリングされます。リンクを閲覧する人にはコードではなく、完成したダイアグラムが表示されます。特別な設定は不要です。

​

インポートとエクスポート

• Markdownインポート: ```mermaid コードフェンスを含むMarkdownを貼り付けまたはインポートすると、CraftがMermaidブロックを自動的に作成します。
• Markdownエクスポート: Mermaidブロックは標準の ```mermaid コードフェンス形式でエクスポートされ、他のツールとも互換性があります。

​

ヒント

「Invalid Mermaid diagram」と表示された場合は？

通常、コードに構文エラーがあることを示しています。タイプミスや矢印の欠落がないか確認してください。他のツールから構文をコピーしている場合は、Craftが対応しているのはフローチャート、シーケンス図、状態遷移図、クラス図、ER図、XYチャートのみである点にご注意ください — 円グラフ、ガントチャート、マインドマップなどは現在サポートされていません。

AIアシスタントはMermaidダイアグラムの作成を手伝ってくれますか？

はい。作りたいダイアグラムを説明するだけで、Craft AIアシスタントがMermaidコードを生成します。既存のダイアグラムの修正や拡張をお願いすることもできます。

大きなダイアグラムを拡大表示できますか？

MacおよびiPadでは、ダイアグラムプレビューをダブルタップすると拡大できます。Webではフルスクリーンビューを使うと大きなダイアグラムを確認しやすくなります。

Mermaidは多くのツールで使われているオープンスタンダードです。各ダイアグラムタイプの完全な構文については mermaid.js.org をご覧ください。