D3 Graphviz Theme Component

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 Mi Piace

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 Mi Piace

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

3 Mi Piace

@pfaffman Mi scuso per non aver visto questo post e non aver agito prima. Devo aver disattivato le notifiche per errore. Avevo notato questo problema anch’io tempo fa, ma non avevo avuto tempo di occuparmene allora, non ricordavo di averlo pubblicato e non ero a conoscenza che qualcun altro lo stesse usando.

Sono felice di annunciare che il componente del tema d3-graphviz ora funziona di nuovo. Puoi vederlo in azione su Render Graphviz graphs directly in your posts - Announcements - Graphviz.

@sam Puoi rimuovere il tag broken ora?

4 Mi Piace

Ho installato questo componente, (Discourse 3.2.1)
ho copiato l’esempio sopra in un nuovo post, non viene visualizzato come un grafico,
qualcuno potrebbe confermare se questo ora funziona, grazie…

questo è causato dalla cosa “Content Security Policy”…
non sono sicuro di cosa aggiungere nell’impostazione “content security policy script src” per farlo funzionare… qualcuno potrebbe aiutarmi, grazie…

Hai provato il plugin invece? Sembra piĂą stabile.

Probabilmente devi consentire questi link:

2 Mi Piace

grazie @Arkshine
la nostra istanza ospitata non include il plugin graphviz per il piano :frowning:
ho provato ad aggiungere questi 3 file nelle impostazioni “content security policy script src”, non funziona…

2 Mi Piace

Puoi provare questo componente invece?

Questo è un modo migliore per integrare librerie di terze parti per evitare problemi CSP.

Nota: il wrapper è diverso; non è bbcode.

2 Mi Piace

grazie, @Arkshine
funziona!

2 Mi Piace

Se sei soddisfatto di singoli grafici statici, il discourse-graphviz-theme-component è probabilmente sufficiente, ma se vuoi utilizzare transizioni animate tra grafici ed essere in grado di controllare vari aspetti del rendering del grafico, potresti voler provare il D3 Graphviz Theme Component. Puoi vederlo in azione su:

Non è necessaria alcuna whitelisting. Questa è la nostra configurazione:

1 Mi Piace

Ciao, @magjac
Vorrei provare quello D3 per l’animazione, ma ho riscontrato il problema di cui sopra con la policy di sicurezza dei contenuti, ci sono impostazioni che si possono modificare per farlo funzionare?
La nostra istanza è ora sulla versione 3.2.1. Grazie…

Sfortunatamente, sta utilizzando la nuova impostazione che utilizza CSP dinamico rigoroso, che non hai in 3.2.1.

1 Mi Piace