D3 Graphviz Theme Component

Themenkomponente
1

The D3 Graphviz Theme Component allows you to add animated Graphviz graphs to your post using the DOT language. Based on d3-graphviz.

Repository: GitHub - magjac/discourse-d3-graphviz: Discourse theme component for rendering animated Graphviz graphs using DOT source code

Installation

See How do I install a Theme or Theme Component?

Usage

Static graphs

This is just a brief introduction. You may want to read the detailed Render Graphviz graphs directly in your posts - Announcements - Graphviz which shows the theme component in action or join the Graphviz fourm where you can use it yourself.

To render a graph inline in your post, wrap the graph definition in dot tags like this:

[dot] digraph {a -> b} [/dot]

The block form is also supported:

[dot]
digraph {
  a -> b
}
[/dot]

Animated transitions between graphs

An animated transition between multiple graphs is shown when more than one graph is added to the same paragraph of a post and there is only whitespace between them:

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

or

[dot]
digraph {
  a -> b
}
[/dot]
[dot]
digraph {
  a -> b
  a -> c
}
[/dot]
[dot]
digraph {
  a -> b
  a -> c
  b -> c
}
[/dot]

Paragraphs are separated by blank lines, so this will generate three separate graphs:

[dot] digraph {bgcolor=lightblue a -> b} [/dot]

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

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

Options

The graphs and the animated transitions are highly customizable by options that you can add to the dot tag. See Render Graphviz graphs directly in your posts - Announcements - Graphviz.

8 „Gefällt mir“
2

A client yesterday reported that all of the content of their posts was missing. I disabled this theme to resolve the problem.

I think this should be moved to #theme:broken-theme , but wondered if anyone else has had trouble.

3 „Gefällt mir“
3

Yes there are a bunch of edge cases with this approach, recommend anyone wanting graphviz use:

3 „Gefällt mir“
4

@pfaffman Entschuldigung, dass ich diesen Beitrag nicht früher gesehen und darauf reagiert habe. Ich muss versehentlich die Benachrichtigungen ausgeschaltet haben. Ich habe dieses Problem selbst schon vor einiger Zeit bemerkt, hatte aber damals keine Zeit, mich darum zu kümmern, erinnerte mich nicht daran, dass ich es gepostet hatte, und war mir nicht bewusst, dass es sonst noch jemand benutzt.

Ich freue mich, Ihnen mitteilen zu können, dass die d3-graphviz-Themenkomponente wieder funktioniert. Sie können sie unter Render Graphviz graphs directly in your posts - Announcements - Graphviz in Aktion sehen.

@sam Können Sie das broken-Tag jetzt entfernen?

4 „Gefällt mir“
5

Ich habe diese Komponente installiert (Discourse 3.2.1)
und das obige Beispiel in einen neuen Beitrag kopiert. Es wird nicht als Diagramm gerendert.
Könnte jemand bestätigen, ob dies jetzt funktioniert? Danke…

Dies wird durch die “Content Security Policy” verursacht…
Ich bin mir nicht sicher, was ich in der Einstellung “content security policy script src” hinzufügen soll, damit es funktioniert… Könnte mir jemand helfen? Danke…

6

Haben Sie stattdessen das Plugin ausprobiert? Es scheint stabiler zu sein.

Sie müssen wahrscheinlich diese Links zulassen:

2 „Gefällt mir“
7

Danke @Arkshine
Unsere gehostete Instanz enthält nicht das Graphviz-Plugin für den Plan :frowning:
Habe versucht, diese 3 Dateien in die Einstellung “content security policy script src” einzufügen, es funktioniert nicht…

2 „Gefällt mir“
8

Können Sie stattdessen diese Komponente ausprobieren?

Dies ist ein besserer Weg, um Drittanbieterbibliotheken zu integrieren und CSP-Probleme zu vermeiden.

Hinweis: Der Wrapper ist anders; es ist kein BBCode.

2 „Gefällt mir“
9

Danke, @Arkshine
es funktioniert!

2 „Gefällt mir“
10

Wenn Sie mit einzelnen statischen Graphen zufrieden sind, ist die discourse-graphviz-theme-component wahrscheinlich ausreichend. Wenn Sie jedoch animierte Übergänge zwischen Graphen verwenden und verschiedene Aspekte des Graphen-Renderings steuern möchten, sollten Sie die D3 Graphviz Theme Component ausprobieren. Sie können sie in Aktion sehen unter:\n\nhttps://forum.graphviz.org/t/render-graphviz-graphs-directly-in-your-posts/125\n\nKeine Whitelisting erforderlich. Dies ist unsere Einrichtung:\n\n

image
image1059×582 98.3 KB

1 „Gefällt mir“
11

Hallo @magjac
Ich würde gerne das D3-Ding für Animationen ausprobieren, aber ich habe das oben genannte Problem mit der Content-Security-Policy, wie oben gepostet. Gibt es Einstellungen, die geändert werden können, damit es funktioniert?
Unsere Instanz ist jetzt auf 3.2.1. Danke…

12

Leider verwendet er die neue Einstellung, die strikte dynamische CSP verwendet, welche Sie in 3.2.1 nicht haben.

1 „Gefällt mir“