Компонент темы Graphviz для D3

Компонент темы D3 Graphviz позволяет добавлять анимированные графики Graphviz в ваши сообщения, используя язык DOT. Основан на d3-graphviz.

Репозиторий: GitHub - magjac/discourse-d3-graphviz: Discourse theme component for rendering animated Graphviz graphs using DOT source code · GitHub

Установка

Смотрите Как установить тему или компонент темы?

Использование

Статические графики

Это лишь краткое введение. Возможно, вам стоит ознакомиться с подробным описанием на Render Graphviz graphs directly in your posts - Announcements - Graphviz, где показан компонент темы в действии, или присоединиться к форуму 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. См. Render Graphviz graphs directly in your posts - Announcements - Graphviz.

8 лайков

Вчера клиент сообщил, что весь контент его публикаций пропал. Я отключил эту тему, чтобы решить проблему.

Думаю, это следует перенести в #theme:broken-theme, но интересно, сталкивался ли кто-то ещё с подобными трудностями.

3 лайка

Да, у этого подхода есть множество пограничных случаев. Рекомендую всем, кто хочет использовать Graphviz, обратиться к следующей ссылке:

3 лайка

@pfaffman Приношу извинения за то, что не заметил этот пост и не отреагировал на него раньше. Я, должно быть, случайно отключил уведомления. Я сам столкнулся с этой проблемой ещё в то время, но у меня не было времени заняться ею тогда, я не помнил, что публиковал это, и не знал, что кто-то ещё этим пользуется.

С радостью сообщаю, что компонент темы d3-graphviz снова работает. Вы можете увидеть его в действии по ссылке: Render Graphviz graphs directly in your posts - Announcements - Graphviz.

@sam Можете ли вы теперь убрать тег broken?

4 лайка

Я установил этот компонент (Discourse 3.2.1), скопировал приведённый выше пример в новую запись, но график не отображается. Кто-нибудь может подтвердить, работает ли это сейчас? Спасибо…

Это вызвано политикой безопасности контента (Content Security Policy)… Не уверен, что нужно добавить в настройку “content security policy script src”, чтобы это заработало… Кто-нибудь может помочь? Спасибо…

Вы пробовали использовать плагин? Он кажется более стабильным.

Скорее всего, вам нужно разрешить следующие ссылки:

2 лайка

Спасибо, @Arkshine.
В нашем размещённом экземпляре для этого тарифного плана не включён плагин Graphviz :frowning:
Пытался добавить эти 3 файла в настройку “content security policy script src”, но это не сработало…

2 лайка

Можете попробовать этот компонент вместо него?

Это более надежный способ интеграции сторонних библиотек, чтобы избежать проблем с CSP.

Примечание: обертка отличается; это не bbcode.

2 лайка

Спасибо, @Arkshine!
Всё работает!

2 лайка

Если вас устраивают статические графики, компонента темы discourse-graphviz-theme-component, скорее всего, будет достаточно. Однако, если вы хотите использовать анимированные переходы между графами и иметь возможность контролировать различные аспекты рендеринга графов, вам стоит попробовать компонент темы D3 Graphviz. Вы можете увидеть его в действии по ссылке:

Белый список не требуется. Вот наша конфигурация:

1 лайк

Привет, @magjac
Я хотел бы попробовать вариант с D3 для анимации, но у меня возникла проблема, описанная выше, связанная с политикой безопасности контента. Можно ли что-то изменить в настройках, чтобы это заработало?
Наша версия 3.2.1. Спасибо…

К сожалению, он использует новый параметр, который применяет строгую динамическую CSP, которой нет в версии 3.2.1.

1 лайк