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

カスタマイズ テーマコンポーネント
1

D3 Graphviz Theme Component を使用すると、DOT 言語を使って投稿にアニメーション付きの Graphviz グラフを追加できます。これは d3-graphviz をベースにしています。

リポジトリ: GitHub - magjac/discourse-d3-graphviz: Discourse theme component for rendering animated Graphviz graphs using DOT source code · GitHub

インストール

テーマまたはテーマコンポーネントのインストール方法をご覧ください。

使い方

静的グラフ

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

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

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

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

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

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

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

[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]
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 つの独立したグラフが生成されます。

[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 をご覧ください。

「いいね！」 8
2

昨日、あるクライアントから投稿の全コンテンツが欠落しているとの報告がありました。この問題を解決するため、このテーマを無効にしました。

これは #theme:broken-theme に移動すべきだと考えますが、他にも同様の問題に直面した方がいらっしゃるかどうか気になります。

「いいね！」 3
3

はい、このアプローチにはいくつかの特殊なケースがあります。Graphvizを使いたい場合は、こちらをお勧めします：

「いいね！」 3
4

@pfaffman この投稿に気づかず、すぐに対応できなかったことをお詫びします。通知を誤ってオフにしてしまったようです。以前、この問題に自分で気づいたのですが、その時は対応する時間がなく、投稿したことも覚えておらず、他の誰かが使用していることも知りませんでした。

d3-graphvizテーマコンポーネントが再び動作するようになったことをお知らせできることを嬉しく思います。https://forum.graphviz.org/t/render-graphviz-graphs-directly-in-your-posts/125で実際に動作している様子をご覧いただけます。

@sam brokenタグを削除していただけますか？

「いいね！」 4
5

このコンポーネントをインストールしました。(Discourse 3.2.1)
上記の例を新しい投稿にコピーしましたが、グラフとしてレンダリングされません。
これが現在機能するかどうか、誰か確認していただけますか？よろしくお願いします…

これは「コンテンツセキュリティポリシー」が原因です…
「コンテンツセキュリティポリシー スクリプト src」設定に何を追加すれば機能するか分かりません… 誰か助けていただけますか？よろしくお願いします…

6

プラグインを試しましたか？より安定しているようです。

おそらく、これらのリンクを許可する必要があります。

「いいね！」 2
7

@Arkshine ありがとうございます。
ホストインスタンスには、プラン用のGraphvizプラグインが含まれていません :frowning:
「コンテンツセキュリティポリシーのスクリプトソース」設定にこれらの3つのファイルを追加しようとしましたが、うまくいきませんでした…

「いいね！」 2
8

こちらのコンポーネントをお試しいただけますでしょうか。

これにより、サードパーティ製ライブラリを統合する際のCSP問題回避策として、より良い方法となります。

注意: ラッパーが異なります。BBCodeではありません。

「いいね！」 2
9

ありがとう、@Arkshine
うまくいきました！

「いいね！」 2
10

静的なグラフで十分な場合は、discourse-graphviz-theme-component で十分ですが、グラフ間のアニメーション遷移を使用し、グラフレンダリングのさまざまな側面を制御したい場合は、D3 Graphviz Theme Component を試すことをお勧めします。実際に動作している様子は、以下で確認できます。

ホワイトリスト登録は不要です。これが私たちのセットアップです。

image
image1059×582 98.3 KB

「いいね！」 1
11

ねえ、@magjac
アニメーションのためにD3のものを使ってみようと思うのですが、上記で報告したコンテンツセキュリティポリシーの問題が発生しました。動作させるために何か設定を変更する必要がありますか？
私たちのインスタンスは現在3.2.1です。よろしくお願いします…

12

残念ながら、彼は厳密な動的CSPを使用する新しい設定を使用していますが、これは3.2.1にはありません。

「いいね！」 1