D3 Graphviz 主题组件

自定义 主题组件
1

D3 Graphviz 主题组件 允许您使用 DOT 语言在帖子中添加动画 Graphviz 图表。基于 d3-graphviz。

仓库： GitHub - magjac/discourse-d3-graphviz: Discourse theme component for rendering animated Graphviz graphs using DOT source code · GitHub

安装

请参阅 如何安装主题或主题组件？

用法

静态图表

这只是一个简要介绍。您可能想阅读详细的 https://forum.graphviz.org/t/render-graphviz-graphs-directly-in-your-posts/125，其中展示了该主题组件的实际效果，或者加入 Graphviz 论坛 亲自使用它。

要在帖子中内联渲染图表，请将图表定义包裹在 dot 标签中，如下所示：

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

也支持块形式：

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

图表之间的动画过渡

当在帖子的同一段落中添加多个图表且它们之间仅包含空白字符时，将显示多个图表之间的动画过渡：

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

或

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

段落之间由空行分隔，因此这将生成三个独立的图表：

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

选项

图表和动画过渡可以通过添加到 dot 标签的选项进行高度自定义。请参阅 https://forum.graphviz.org/t/render-graphviz-graphs-directly-in-your-posts/125。

8 个赞
2

昨天有一位客户报告说，他们所有帖子的内容都丢失了。我已禁用该主题以解决问题。

我认为这应该移至 #theme:broken-theme，但不确定是否还有其他人也遇到了类似问题。

3 个赞
3

是的，这种方法确实存在许多边界情况。建议任何希望使用 Graphviz 的人参考：

3 个赞
4

@pfaffman 抱歉这么晚才看到这篇帖子并采取行动。我一定是误关闭了通知。我以前自己也注意到了这个问题，但当时没有时间处理，也不记得我发过这个帖子，也不知道还有其他人在使用它。

我很高兴地宣布 d3-graphviz 主题组件现在又能正常工作了。您可以在 Render Graphviz graphs directly in your posts - Announcements - Graphviz 看到它的实际效果。

@sam 您现在可以移除 broken 标签了吗？

4 个赞
5

我已经安装了这个组件（Discourse 3.2.1）
将上面的示例复制到一个新帖子中，它没有渲染成图表
能否有人确认一下，这个现在是否可以工作了，谢谢……

这是由“内容安全策略”引起的……
不确定要在“内容安全策略脚本源”设置中添加什么才能使其工作……能否有人帮忙，谢谢……

6

您试过插件了吗？它似乎更稳定。

您可能需要允许这些链接：

2 个赞
7

谢谢 @Arkshine
我们托管的实例不包含该计划的 graphviz 插件 :frowning:
尝试将这 3 个文件添加到“内容安全策略脚本 src”设置中，但无效……

2 个赞
8

您能试试这个组件吗？

这是集成第三方库以避免 CSP 问题的更好方法。

注意：包装器不同；它不是 bbcode。

2 个赞
9

谢谢，@Arkshine
它奏效了！

2 个赞
10

如果您对单个静态图满意，那么 discourse-graphviz-theme-component 可能就足够了，但如果您想在图之间使用动画过渡并能够控制图渲染的各个方面，您可能想尝试 D3 Graphviz 主题组件。您可以在以下位置看到它的实际效果：

不需要白名单。这是我们的设置：

image
image1059×582 98.3 KB

1 个赞
11

嘿，@magjac
我想试试 D3 动画，但我遇到了上面提到的内容安全策略问题，有什么设置可以更改以使其正常工作吗？
我们的实例现在是 3.2.1。谢谢…

12

不幸的是，他正在使用使用严格动态 CSP 的新设置，而您的 3.2.1 版本中没有该设置。

1 个赞