Composant de thème Graphviz pour D3

Le Composant de thème D3 Graphviz vous permet d’ajouter des graphiques Graphviz animés à votre publication en utilisant le langage DOT. Basé sur d3-graphviz.

Dépôt : GitHub - magjac/discourse-d3-graphviz: Discourse theme component for rendering animated Graphviz graphs using DOT source code · GitHub

Installation

Consultez Comment installer un thème ou un composant de thème ?

Utilisation

Graphiques statiques

Il s’agit d’une brève introduction. Vous voudrez peut-être lire le guide détaillé Render Graphviz graphs directly in your posts - Announcements - Graphviz qui montre le composant de thème en action, ou rejoindre le forum Graphviz où vous pourrez l’utiliser vous-même.

Pour afficher un graphique en ligne dans votre publication, enveloppez la définition du graphique dans des balises dot comme ceci :

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

La forme en bloc est également prise en charge :

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

Transitions animées entre graphiques

Une transition animée entre plusieurs graphiques est affichée lorsque plus d’un graphique est ajouté au même paragraphe d’une publication et qu’il n’y a que des espaces blancs entre eux :

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

ou

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

Les paragraphes sont séparés par des lignes vides, ce qui générera donc trois graphiques distincts :

[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

Les graphiques et les transitions animées sont hautement personnalisables grâce aux options que vous pouvez ajouter à la balise dot. Consultez Render Graphviz graphs directly in your posts - Announcements - Graphviz.

8 « J'aime »

Un client a signalé hier que tout le contenu de ses publications avait disparu. J’ai désactivé ce thème pour résoudre le problème.

Je pense que cela devrait être déplacé vers #theme:broken-theme, mais je me demande si d’autres personnes ont rencontré des problèmes similaires.

3 « J'aime »

Oui, il y a plusieurs cas limites avec cette approche. Je recommande à quiconque souhaitant utiliser Graphviz de consulter :

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 »