forked from drowl87/hextra_mirror
53 lines
1.5 KiB
Markdown
53 lines
1.5 KiB
Markdown
---
|
||
title: ダイアグラム
|
||
weight: 6
|
||
next: /docs/guide/shortcodes
|
||
---
|
||
|
||
現在、Hextraはダイアグラムのために[Mermaid](#mermaid)をサポートしています。
|
||
|
||
<!--more-->
|
||
|
||
## Mermaid
|
||
|
||
[Mermaid](https://github.com/mermaid-js/mermaid#readme)は、JavaScriptベースのダイアグラムおよびチャート作成ツールで、Markdownにインスパイアされたテキスト定義を取り込み、ブラウザ内でダイナミックにダイアグラムを作成します。例えば、Mermaidはフローチャート、シーケンス図、円グラフなどをレンダリングできます。
|
||
|
||
HextraでMermaidを使用するのは、言語を`mermaid`に設定したコードブロックを書くのと同じくらい簡単です:
|
||
|
||
````markdown
|
||
```mermaid
|
||
graph TD;
|
||
A-->B;
|
||
A-->C;
|
||
B-->D;
|
||
C-->D;
|
||
```
|
||
````
|
||
|
||
これは次のようにレンダリングされます:
|
||
|
||
```mermaid
|
||
graph TD;
|
||
A-->B;
|
||
A-->C;
|
||
B-->D;
|
||
C-->D;
|
||
```
|
||
|
||
シーケンス図:
|
||
|
||
```mermaid
|
||
sequenceDiagram
|
||
participant Alice
|
||
participant Bob
|
||
Alice->>John: こんにちはJohn、元気ですか？
|
||
loop 健康チェック
|
||
John->>John: 心気症と戦う
|
||
end
|
||
Note right of John: 理性的な思考 <br/>が勝つ！
|
||
John-->>Alice: 元気です！
|
||
John->>Bob: あなたはどうですか？
|
||
Bob-->>John: とても元気です！
|
||
```
|
||
|
||
詳細については、[Mermaidドキュメント](https://mermaid-js.github.io/mermaid/#/)を参照してください。 |