El Componente de Tema D3 Graphviz te permite agregar gráficos animados de Graphviz a tu publicación utilizando el lenguaje DOT. Basado en d3-graphviz.
Instalación
Consulta ¿Cómo instalo un tema o un componente de tema?
Uso
Gráficos estáticos
Esta es solo una breve introducción. Es posible que quieras leer el artículo detallado Render Graphviz graphs directly in your posts - Announcements - Graphviz, que muestra el componente del tema en acción, o unirte al foro de Graphviz, donde puedes usarlo tú mismo.
Para renderizar un gráfico en línea en tu publicación, envuelve la definición del gráfico en etiquetas dot de la siguiente manera:
[dot] digraph {a -\u003e b} [/dot]
También se admite la forma de bloque:
[dot]
digraph {
a -\u003e b
}
[/dot]
Transiciones animadas entre gráficos
Se muestra una transición animada entre múltiples gráficos cuando se agrega más de un gráfico al mismo párrafo de una publicación y solo hay espacios en blanco entre ellos:
[dot] digraph {bgcolor=lightblue a -\u003e b} [/dot]
[dot] digraph {bgcolor=lightblue a -\u003e b; a -\u003e c} [/dot]
[dot] digraph {bgcolor=lightblue a -\u003e b; a -\u003e c; b -\u003e c} [/dot]
o
[dot]
digraph {
a -\u003e b
}
[/dot]
[dot]
digraph {
a -\u003e b
a -\u003e c
}
[/dot]
[dot]
digraph {
a -\u003e b
a -\u003e c
b -\u003e c
}
[/dot]
Los párrafos están separados por líneas en blanco, por lo que esto generará tres gráficos separados:
[dot] digraph {bgcolor=lightblue a -\u003e b} [/dot]
[dot] digraph {bgcolor=lightblue a -\u003e b; a -\u003e c} [/dot]
[dot] digraph {bgcolor=lightblue a -\u003e b; a -\u003e c; b -\u003e c} [/dot]
Opciones
Los gráficos y las transiciones animadas son altamente personalizables mediante opciones que puedes agregar a la etiqueta dot. Consulta Render Graphviz graphs directly in your posts - Announcements - Graphviz.
