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 Me gusta

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 Me gusta

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

3 Me gusta

@pfaffman Disculpas por no haber visto esta publicación y actuar sobre ella antes. Debí haber desactivado las notificaciones por error. Noté este problema yo mismo en su momento, pero no tuve tiempo de solucionarlo entonces, no recordaba haberlo publicado y no era consciente de que nadie más lo estuviera usando.

Me complace anunciar que el componente temático d3-graphviz vuelve a funcionar. Puedes verlo en acción en Render Graphviz graphs directly in your posts - Announcements - Graphviz.

@sam ¿Puedes eliminar la etiqueta broken ahora?

4 Me gusta

Instalé este componente, (Discourse 3.2.1)
copié el ejemplo anterior en una nueva publicación, no se renderiza como un gráfico,
¿alguien podría confirmar si este funciona ahora, gracias…

esto es causado por la cosa de “Content Security Policy”…
no estoy seguro de qué agregar en la configuración de “content security policy script src” para que funcione… ¿alguien podría ayudar, gracias…

¿Probaste el plugin en su lugar? Parece más estable.

Probablemente necesites permitir estos enlaces:

2 Me gusta

gracias @Arkshine
nuestra instancia alojada no incluye el plugin graphviz para el plan :frowning:
intenté agregar estos 3 archivos en la configuración “content security policy script src”, no funciona…

2 Me gusta

¿Puedes probar este componente en su lugar?

Esta es una mejor manera de integrar bibliotecas de terceros para evitar problemas de CSP.

Nota: el wrapper es diferente; no es bbcode.

2 Me gusta

gracias, @Arkshine
¡funciona!

2 Me gusta

Si está satisfecho con gráficos estáticos individuales, el discourse-graphviz-theme-component probablemente sea suficiente, pero si desea utilizar transiciones animadas entre gráficos y poder controlar varios aspectos de la representación del gráfico, es posible que desee probar el D3 Graphviz Theme Component. Puede verlo en acción en:

No es necesario incluir en la lista blanca. Esta es nuestra configuración:

1 me gusta

Oye, @magjac
Me gustaría probar el de D3 para animación, pero tengo el problema anterior con la política de seguridad de contenido, como se publicó anteriormente, ¿algunos ajustes cambian para que funcione?
nuestra instancia está ahora en la 3.2.1. gracias…

Desafortunadamente, está utilizando la nueva configuración que utiliza CSP dinámico estricto, que no tiene en la versión 3.2.1.

1 me gusta