# D3 Graphviz テーマコンポーネント

**URL:** <https://meta.discourse.org/t/d3-graphviz-theme-component/153031>\
**Category:** Theme component\
**Created:** [2020 年 5 月 27 日午後 9:57 UTC](https://meta.discourse.org/t/d3-graphviz-theme-component/153031 "2020-05-27T21:57:27Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![magjac](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/magjac/32/174488_2.png) [@magjac](https://meta.discourse.org/u/magjac)\
**Post date:** [2020 年 5 月 27 日午後 9:57 UTC](https://meta.discourse.org/t/d3-graphviz-theme-component/153031/1 "2020-05-27T21:57:27Z")

</div>

[D3 Graphviz Theme Component](https://github.com/magjac/discourse-d3-graphviz) を使用すると、[DOT](https://www.graphviz.org/doc/info/lang.html) 言語を使って投稿にアニメーション付きの [Graphviz](https://www.graphviz.org/) グラフを追加できます。これは [d3-graphviz](https://github.com/magjac/d3-graphviz) をベースにしています。

**リポジトリ:** [GitHub - magjac/discourse-d3-graphviz: Discourse theme component for rendering animated Graphviz graphs using DOT source code · GitHub](https://github.com/magjac/discourse-d3-graphviz)

### インストール

[テーマまたはテーマコンポーネントのインストール方法](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)をご覧ください。

### 使い方

#### 静的グラフ

これは簡単な紹介です。テーマコンポーネントの実演を確認したい場合は、詳細な [Render Graphviz graphs directly in your posts - Announcements - Graphviz](https://forum.graphviz.org/t/render-graphviz-graphs-directly-in-your-posts/125) を読むか、自分で試せる [Graphviz フォーラム](https://forum.graphviz.org/) に参加することをお勧めします。

投稿内にグラフをインラインで描画するには、グラフ定義を `dot` タグで囲みます。

```plaintext
[dot] digraph {a -\u003e b} [/dot]

```

ブロック形式もサポートされています。

```plaintext
[dot]
digraph {
  a -\u003e b
}
[/dot]

```

#### グラフ間のアニメーション遷移

同じ投稿の同じ段落に複数のグラフを追加し、それらの間に空白のみがある場合、グラフ間のアニメーション遷移が表示されます。

```plaintext
[dot] digraph {bgcolor=lightblue a -\u003e b} [/dot]
[dot] digraph {bgcolor=lightblue a -\u003e b; a -\u003e c} [/dot]
[dot] digraph {bgcolor=lightblue a -\u003e b; a -\u003e c; b -\u003e c} [/dot]

```

または

```plaintext
[dot]
digraph {
  a -\u003e b
}
[/dot]
[dot]
digraph {
  a -\u003e b
  a -\u003e c
}
[/dot]
[dot]
digraph {
  a -\u003e b
  a -\u003e c
  b -\u003e c
}
[/dot]

```

段落は空白行で区切られるため、以下のように記述すると 3 つの独立したグラフが生成されます。

```plaintext
[dot] digraph {bgcolor=lightblue a -\u003e b} [/dot]

[dot] digraph {bgcolor=lightblue a -\u003e b; a -\u003e c} [/dot]

[dot] digraph {bgcolor=lightblue a -\u003e b; a -\u003e c; b -\u003e c} [/dot]

```

### オプション

グラフやアニメーション遷移は、`dot` タグに追加できるオプションで高度にカスタマイズできます。詳細は [Render Graphviz graphs directly in your posts - Announcements - Graphviz](https://forum.graphviz.org/t/render-graphviz-graphs-directly-in-your-posts/125) をご覧ください。

---

_[View the full topic](https://meta.discourse.org/t/d3-graphviz-theme-component/153031)._