hextra/exampleSite/content/docs/guide/diagrams.ja.md

title	weight	next
ダイアグラム	6	/docs/guide/shortcodes

現在、HextraはダイアグラムのためにMermaidをサポートしています。

Mermaid

Mermaidは、JavaScriptベースのダイアグラムおよびチャート作成ツールで、Markdownにインスパイアされたテキスト定義を取り込み、ブラウザ内でダイナミックにダイアグラムを作成します。例えば、Mermaidはフローチャート、シーケンス図、円グラフなどをレンダリングできます。

HextraでMermaidを使用するのは、言語をmermaidに設定したコードブロックを書くのと同じくらい簡単です:

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

これは次のようにレンダリングされます:

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

シーケンス図:

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: こんにちはJohn、元気ですか？
    loop 健康チェック
        John->>John: 心気症と戦う
    end
    Note right of John: 理性的な思考 <br/>が勝つ！
    John-->>Alice: 元気です！
    John->>Bob: あなたはどうですか？
    Bob-->>John: とても元気です！

詳細については、Mermaidドキュメントを参照してください。