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 « J'aime »

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 « J'aime »

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

3 « J'aime »

@pfaffman Mes excuses de ne pas avoir vu ce post et d’avoir agi plus tôt. J’ai dû désactiver les notifications par erreur. J’ai remarqué ce problème moi-même à l’époque, mais je n’ai pas eu le temps de m’en occuper alors, je ne me souvenais pas l’avoir posté et je n’étais pas au courant que quelqu’un d’autre l’utilisait.

J’ai le plaisir d’annoncer que le composant de thème d3-graphviz fonctionne à nouveau. Vous pouvez le voir en action sur Render Graphviz graphs directly in your posts - Announcements - Graphviz.

@sam Pouvez-vous supprimer le tag broken maintenant ?

4 « J'aime »

J’ai installé ce composant, (Discourse 3.2.1)
j’ai copié l’exemple ci-dessus dans un nouveau message, il ne s’affiche pas sous forme de graphique,
quelqu’un pourrait-il confirmer si celui-ci fonctionne maintenant, merci…

cela est causé par la chose “Content Security Policy”…
je ne suis pas sûr de ce qu’il faut ajouter dans le paramètre “content security policy script src” pour que cela fonctionne… quelqu’un pourrait-il m’aider, merci…

Avez-vous essayé le plugin à la place ? Il semble plus stable.

Vous devrez probablement autoriser ces liens :

2 « J'aime »

Merci @Arkshine
notre instance hébergée n’inclut pas le plugin graphviz pour le plan :frowning:
j’ai essayé d’ajouter ces 3 fichiers dans le paramètre « content security policy script src », cela ne fonctionne pas…

2 « J'aime »

Pouvez-vous essayer ce composant à la place ?

C’est une meilleure façon d’intégrer des bibliothèques tierces pour éviter les problèmes de CSP.

Note : l’enveloppe est différente ; ce n’est pas du bbcode.

2 « J'aime »

merci, @Arkshine
ça marche !

2 « J'aime »

Si vous êtes satisfait des graphes statiques simples, le discourse-graphviz-theme-component est probablement suffisant, mais si vous souhaitez utiliser des transitions animées entre les graphes et contrôler divers aspects du rendu des graphes, vous pourriez vouloir essayer le D3 Graphviz Theme Component. Vous pouvez le voir en action à l’adresse suivante :

Aucune liste blanche n’est nécessaire. Voici notre configuration :

1 « J'aime »

Salut, @magjac
J’aimerais essayer celui de D3 pour l’animation, mais j’ai rencontré le problème ci-dessus avec la politique de sécurité du contenu, comme indiqué précédemment. Des modifications de certains paramètres sont-elles nécessaires pour que cela fonctionne ?
Notre instance est maintenant en 3.2.1. Merci…

Malheureusement, il utilise le nouveau paramètre qui utilise une CSP dynamique stricte, que vous n’avez pas dans la version 3.2.1.

1 « J'aime »