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 إعجابات

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 إعجابات

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

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:
حاولت إضافة هذه الملفات الثلاثة إلى إعداد “content security policy script src”، لكنها لم تعمل…

إعجابَين (2)

هل يمكنك تجربة هذا المكون بدلاً من ذلك؟

هذه طريقة أفضل لدمج مكتبات الطرف الثالث لتجنب مشكلات CSP.

ملاحظة: الغلاف مختلف؛ إنه ليس bbcode.

إعجابَين (2)

شكرا لك، @Arkshine
إنه يعمل!

إعجابَين (2)

إذا كنت راضيًا عن الرسوم البيانية الثابتة المفردة، فمن المحتمل أن يكون discourse-graphviz-theme-component كافيًا، ولكن إذا كنت ترغب في استخدام الانتقالات المتحركة بين الرسوم البيانية والتحكم في جوانب مختلفة من عرض الرسم البياني، فقد ترغب في تجربة D3 Graphviz Theme Component. يمكنك رؤيتها أثناء العمل على:

لا يلزم وضع قائمة بيضاء. هذا هو إعدادنا:

إعجاب واحد (1)

مرحباً، @magjac
أود تجربة D3 الخاص بالرسوم المتحركة، لكنني واجهت المشكلة المذكورة أعلاه مع سياسة أمان المحتوى، هل هناك أي إعدادات يمكن تغييرها لجعلها تعمل؟
نسختنا الحالية هي 3.2.1. شكراً…

للأسف، هو يستخدم الإعداد الجديد الذي يستخدم سياسة أمان المحتوى الديناميكية الصارمة، والتي لا تتوفر لديك في الإصدار 3.2.1.

إعجاب واحد (1)