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

설치

테마 또는 테마 컴포넌트를 설치하는 방법을 참고하세요.

사용법

정적 그래프

이것은 간단한 소개입니다. 테마 컴포넌트의 작동 방식을 보여주는 상세한 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개의 좋아요
2

어제 한 고객이 자신의 게시물에서 모든 콘텐츠가 사라졌다고 보고했습니다. 이 문제를 해결하기 위해 해당 테마를 비활성화했습니다.

이 이슈는 #customization:theme:broken-theme으로 이동해야 한다고 생각하지만, 다른 분들도 비슷한 문제를 겪어 보셨는지 궁금합니다.

3개의 좋아요
3

네, 이 방식에는 몇 가지 엣지 케이스가 있습니다. Graphviz를 사용하려는 분들에게 다음을 추천합니다:

3개의 좋아요
4

@pfaffman 이 게시물을 더 일찍 확인하고 조치하지 못한 점 죄송합니다. 실수로 알림을 꺼둔 것 같습니다. 예전에 이 문제를 직접 인지했지만, 당시에는 처리할 시간이 없었고, 제가 이 글을 올린 사실도 잊어버렸으며, 다른 사람이 이를 사용 중인지도 몰랐습니다.

d3-graphviz 테마 컴포넌트가 다시 정상 작동하게 되었다는 소식을 기쁘게 전합니다. https://forum.graphviz.org/t/render-graphviz-graphs-directly-in-your-posts/125에서 직접 확인할 수 있습니다.

@sam 이제 broken 태그를 제거해 주시겠습니까?

4개의 좋아요
5

이 컴포넌트(Discourse 3.2.1)를 설치하고,
위 예시를 새 게시물에 복사해 넣었는데 그래프로 렌더링되지 않습니다.
혹시 지금 이 기능이 정상적으로 작동하는지 확인해 주실 수 있을까요? 감사합니다…

이 문제는 “Content Security Policy” 때문인 것 같습니다…
“content security policy script src” 설정에 무엇을 추가해야 작동할지 모르겠네요… 도와주실 수 있나요? 감사합니다…

6

플러그인을 대신 사용해 보셨나요? 더 안정적인 것 같습니다.

아마도 이 링크들을 허용해야 할 것입니다:

2개의 좋아요
7

@Arkshine 감사합니다
호스팅된 인스턴스에 플랜용 graphviz 플러그인이 포함되어 있지 않습니다 :frowning:
“content security policy script src” 설정에 이 3개 파일을 추가해 봤는데, 작동하지 않습니다…

2개의 좋아요
8

대신 이 컴포넌트를 사용해 볼 수 있을까요?

CSP 문제를 피하기 위해 서드파티 라이브러리를 통합하는 더 나은 방법입니다.

참고: 래퍼가 다릅니다. bbcode가 아닙니다.

2개의 좋아요
9

감사합니다, @Arkshine
동작합니다!

2개의 좋아요
10

단일 정적 그래프만으로도 충분하다면, **discourse-graphviz-theme-component**가 아마도 충분할 것입니다. 하지만 그래프 간 애니메이션 전환을 사용하거나 그래프 렌더링의 다양한 측면을 제어할 수 있는 기능을 원한다면 D3 Graphviz Theme Component를 사용해 볼 수 있습니다. 실제 동작을 확인하려면 다음 주소를 참고하세요:

화이트리스트 설정은 필요하지 않습니다. 저희의 설정은 다음과 같습니다:

image
image1059×582 98.3 KB

1개의 좋아요
11

hey, @magjac
애니메이션을 위해 D3 버전을 시도해 보고 싶은데, 위에서 언급한 콘텐츠 보안 정책(CSP) 관련 문제가 발생했어요. 작동하도록 설정을 변경해야 하나요?
현재 인스턴스는 3.2.1을 사용 중입니다. 감사합니다…

12

불행히도 그는 3.2.1 버전에는 없는 엄격한 동적 CSP를 사용하는 새 설정을 사용하고 있습니다.

1개의 좋아요