O Componente de Tema D3 Graphviz permite que você adicione gráficos Graphviz animados ao seu post usando a linguagem DOT. Baseado no d3-graphviz.
Instalação
Veja Como instalo um Tema ou Componente de Tema?
Uso
Gráficos estáticos
Esta é apenas uma breve introdução. Você pode querer ler o detalhado Render Graphviz graphs directly in your posts - Announcements - Graphviz, que mostra o componente de tema em ação, ou entrar no fórum Graphviz, onde você pode usá-lo pessoalmente.
Para renderizar um gráfico em linha no seu post, envolva a definição do gráfico em tags dot assim:
[dot] digraph {a -\u003e b} [/dot]
A forma de bloco também é suportada:
[dot]
digraph {
a -\u003e b
}
[/dot]
Transições animadas entre gráficos
Uma transição animada entre múltiplos gráficos é exibida quando mais de um gráfico é adicionado ao mesmo parágrafo de um post e há apenas espaços em branco entre eles:
[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]
ou
[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]
Parágrafos são separados por linhas em branco, então isso gerará três 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]
Opções
Os gráficos e as transições animadas são altamente personalizáveis por meio de opções que você pode adicionar à tag dot. Veja Render Graphviz graphs directly in your posts - Announcements - Graphviz.
