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

title, weight, next

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: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

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