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 curtidas

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 curtidas

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

3 curtidas

@pfaffman Peço desculpas por não ter visto esta postagem e agido sobre ela mais cedo. Devo ter desativado as notificações por engano. Notei este problema eu mesmo na época, mas não tive tempo de lidar com ele então, não me lembrava de ter postado isso e não estava ciente de que mais alguém o estava usando.

Tenho o prazer de anunciar que o componente de tema d3-graphviz está funcionando novamente. Você pode vê-lo em ação em Render Graphviz graphs directly in your posts - Announcements - Graphviz.

@sam Você pode remover a tag broken agora?

4 curtidas

Instalei este componente, (Discourse 3.2.1)
copiei o exemplo acima para uma nova postagem, ele não é renderizado como um gráfico,
alguém poderia confirmar se este funciona agora, obrigado…

isso é causado pela coisa de “Content Security Policy” (Política de Segurança de Conteúdo)…
não tenho certeza do que adicionar na configuração de “content security policy script src” para fazê-lo funcionar… alguém poderia ajudar, obrigado…

Você tentou o plugin em vez disso? Parece mais estável.

Provavelmente você precisa permitir estes links:

2 curtidas

obrigado @Arkshine
nossa instância hospedada não inclui o plugin graphviz para o plano :frowning:
tentei adicionar estes 3 arquivos na configuração “content security policy script src”, não funciona…

2 curtidas

Você pode tentar este componente em vez disso?

Esta é uma maneira melhor de integrar bibliotecas de terceiros para evitar problemas de CSP.

Observação: o wrapper é diferente; não é bbcode.

2 curtidas

obrigado, @Arkshine
funciona!

2 curtidas

Se você estiver satisfeito com gráficos estáticos únicos, o discourse-graphviz-theme-component provavelmente será suficiente, mas se você quiser usar transições animadas entre gráficos e ter controle sobre vários aspectos da renderização do gráfico, você pode querer experimentar o D3 Graphviz Theme Component. Você pode vê-lo em ação em:\n\nhttps://forum.graphviz.org/t/render-graphviz-graphs-directly-in-your-posts/125\n\nNenhuma lista de permissões é necessária. Esta é a nossa configuração:\n\n

1 curtida

ei, @magjac
Gostaria de experimentar o D3 para animação, mas tive o problema acima com a coisa da política de segurança de conteúdo, como postado acima, alguma configuração muda para fazê-lo funcionar?
nossa instância está em 3.2.1 agora. obrigado…

Infelizmente, ele está usando a nova configuração que usa CSP dinâmico estrito, que você não tem na 3.2.1.

1 curtida