Componente tema Graphviz D3

Il componente tema D3 Graphviz ti permette di aggiungere grafici Graphviz animati ai tuoi post utilizzando il linguaggio DOT. Basato su d3-graphviz.

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

Installazione

Consulta la guida Come installo un tema o un componente tema?

Utilizzo

Grafici statici

Questa è solo una breve introduzione. Potresti voler leggere la guida dettagliata Render Graphviz graphs directly in your posts - Announcements - Graphviz che mostra il componente tema in azione, oppure unirti al forum Graphviz dove potrai utilizzarlo direttamente.

Per rendere un grafico in linea nel tuo post, racchiudi la definizione del grafico tra i tag dot come in questo esempio:

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

È supportata anche la forma a blocco:

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

Transizioni animate tra grafici

Una transizione animata tra più grafici viene mostrata quando vengono aggiunti più di un grafico allo stesso paragrafo di un post e c’è solo spazio bianco tra di essi:

[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]

oppure

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

I paragrafi sono separati da righe vuote, quindi questo genererà tre grafici separati:

[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]

Opzioni

I grafici e le transizioni animate sono altamente personalizzabili tramite opzioni che puoi aggiungere al tag dot. Consulta Render Graphviz graphs directly in your posts - Announcements - Graphviz.

8 Mi Piace

Ieri un cliente ha segnalato che tutto il contenuto dei suoi post era scomparso. Ho disabilitato questo tema per risolvere il problema.

Penso che questo dovrebbe essere spostato in #theme:broken-theme, ma mi chiedevo se qualcun altro abbia avuto problemi simili.

3 Mi Piace

Sì, ci sono un sacco di casi limite con questo approccio. Consigliamo a chiunque voglia utilizzare Graphviz di consultare:

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