DEV: Move discourse-graphviz to core (#33570)

https://meta.discourse.org/t/373574 Internal `/t/-/156778`
2026-08-03 09:53:24 -05:00 · 2025-07-15 16:38:05 +02:00
parent 683ee9c353
commit 383e484fe2
64 changed files with 750 additions and 0 deletions
@@ -62,6 +62,10 @@ discourse-patreon:
  - changed-files:
      - any-glob-to-any-file: plugins/discourse-patreon/**/*

+discourse-graphviz:
+  - changed-files:
+      - any-glob-to-any-file: plugins/discourse-graphviz/**/*
+
 footnote:
  - changed-files:
      - any-glob-to-any-file: plugins/footnote/**/*
@@ -58,6 +58,7 @@
 !/plugins/discourse-openid-connect
 !/plugins/discourse-zendesk-plugin
 !/plugins/discourse-patreon
+!/plugins/discourse-graphviz
 /plugins/*/auto_generated

 /spec/fixtures/plugins/my_plugin/auto_generated
@@ -0,0 +1 @@
+public/
@@ -0,0 +1,16 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.0.1]
+
+### Added
+* Rendering a Graphviz image using the `[graphviz]` BBCode tag
+* Support for selecting engine
+
+[Unreleased]: https://github.com/discourse/discourse-graphviz/compare/v0.0.1...HEAD
+[0.0.1]: https://github.com/discourse/discourse-graphviz/compare/1004f91812741205e94d2516f899720aba408a4b...0.0.1
@@ -0,0 +1,21 @@
+Copyright (c) 2018 unfoldingWord
+
+http://creativecommons.org/licenses/MIT/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1,25 @@
+## discourse-graphviz
+
+https://meta.discourse.org/t/graphviz-plugin/97554/
+
+Adds [Graphviz](https://www.graphviz.org) capability to discourse.
+
+Topic discussing the plugin itself can be found here: https://meta.discourse.org/t/graphviz-plugin/97554
+
+### Usage
+
+See the [Graphviz](https://www.graphviz.org/documentation/) site for documentation and examples.  
+To use with a discourse post, wrap the chart defintion in `graphviz` tags and define engine (if not defined, it will default to `dot`) like this:
+
+```
+[graphviz engine=neato]
+graph {
+  a -- b;
+  b -- c;
+  a -- c;
+  d -- c;
+  e -- c;
+  e -- a;
+}
+[/graphviz]
+```
@@ -0,0 +1,45 @@
+export function setup(helper) {
+  if (!helper.markdownIt) {
+    return;
+  }
+
+  helper.allowList([
+    "div.graphviz",
+    "div.graphviz.is-loading",
+    "div.graphviz-svg",
+  ]);
+
+  helper.registerOptions((opts, siteSettings) => {
+    opts.features.graphviz = siteSettings.discourse_graphviz_enabled;
+  });
+
+  helper.registerPlugin((md) => {
+    if (md.options.discourse.features.graphviz) {
+      md.block.bbcode.ruler.push("graphviz", {
+        tag: "graphviz",
+
+        replace(state, tagInfo, content) {
+          const engines = ["dot", "neato", "circo", "fdp", "osage", "twopi"];
+          const token = state.push("html_raw", "", 0);
+
+          const escaped = state.md.utils.escapeHtml(content);
+          const inputEngine = state.md.utils.escapeHtml(tagInfo.attrs.engine);
+          const engine = engines.includes(inputEngine)
+            ? `data-engine='${inputEngine}'`
+            : "data-engine='dot'";
+
+          let svgOnly = "";
+          if (tagInfo.attrs.svg === "true") {
+            svgOnly = " graphviz-svg";
+          } else if (tagInfo.attrs.svg === "false") {
+            svgOnly = " graphviz-no-svg";
+          }
+
+          token.content = `<div class="graphviz is-loading${svgOnly}" ${engine}>\n${escaped}\n</div>\n`;
+
+          return true;
+        },
+      });
+    }
+  });
+}
@@ -0,0 +1,67 @@
+import $ from "jquery";
+import { escape } from "pretty-text/sanitizer";
+import discourseDebounce from "discourse/lib/debounce";
+import loadScript from "discourse/lib/load-script";
+import { withPluginApi } from "discourse/lib/plugin-api";
+
+export default {
+  name: "discourse-graphviz",
+
+  renderGraphs($containers) {
+    $containers.each((_, container) => {
+      const $container = $(container);
+
+      // if the container content has not yet been replaced
+      // do nothing
+      if (!$container.find("svg").length) {
+        this.renderGraph($container);
+      }
+    });
+  },
+
+  renderGraph($container) {
+    const graphDefinition = $container.text().trim();
+    const engine = $container.attr("data-engine");
+
+    const $spinner = $("<div class='spinner tiny'></div>");
+    $container.html($spinner);
+
+    loadScript("/plugins/discourse-graphviz/javascripts/viz-3.0.1.js").then(
+      () => {
+        $container.removeClass("is-loading");
+
+        try {
+          /* global vizRenderStringSync */
+          const svgChart = vizRenderStringSync(graphDefinition, {
+            format: "svg",
+            engine,
+          });
+          $container.html(svgChart);
+        } catch (e) {
+          const $error = $(
+            `<div class='graph-error'>${escape(e.message)}</div>`
+          );
+          $container.html($error);
+        }
+      }
+    );
+  },
+
+  initialize(container) {
+    const siteSettings = container.lookup("service:site-settings");
+
+    if (siteSettings.discourse_graphviz_enabled) {
+      withPluginApi("0.8.22", (api) => {
+        api.decorateCooked(
+          ($elem) => {
+            const $graphviz = $elem.find(".graphviz");
+            if ($graphviz.length) {
+              discourseDebounce(this, this.renderGraphs, $graphviz, 200);
+            }
+          },
+          { id: "graphviz" }
+        );
+      });
+    }
+  },
+};
@@ -0,0 +1,22 @@
+div.graphviz {
+  svg {
+    max-width: 100%;
+  }
+
+  &.is-loading {
+    padding: 2em;
+    background: var(--primary-very-low);
+  }
+
+  .graph-error {
+    padding: 2em;
+    background-color: var(--danger-low);
+    margin: 0;
+    color: var(--danger);
+    text-align: center;
+  }
+}
+
+svg.graphviz-svg-render {
+  max-width: 100%;
+}
@@ -0,0 +1,10 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+ar:
+  site_settings:
+    discourse_graphviz_enabled: "تفعيل المكوِّن الإضافي Graphviz"
+    graphviz_default_svg: "الضبط افتراضيًا على عرض SVG بدلًا من عرض الصور، ويمكن تخصيص هذا الإعداد لكل رسم بياني باستخدام العنصر `svg=true|false`"
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+be:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+bg:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+bs_BA:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+ca:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+cs:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+da:
@@ -0,0 +1,10 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+de:
+  site_settings:
+    discourse_graphviz_enabled: "Graphviz-Plug-in aktivieren"
+    graphviz_default_svg: "Standardmäßig wird SVG-Rendering anstelle von Bild-Rendering verwendet. Kann pro Diagramm mit dem Element `svg=true|false` angepasst werden."
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+el:
@@ -0,0 +1,4 @@
+en:
+  site_settings:
+    discourse_graphviz_enabled: "Enable the Graphviz plugin"
+    graphviz_default_svg: "Default to SVG rendering instead of image rendering, can be customized per graph with `svg=true|false` element."
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+en_GB:
@@ -0,0 +1,10 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+es:
+  site_settings:
+    discourse_graphviz_enabled: "Habilitar el complemento Graphviz"
+    graphviz_default_svg: "Por defecto se renderiza el SVG en lugar de la imagen, se puede personalizar por gráfico con el elemento «svg=true|false»."
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+et:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+fa_IR:
@@ -0,0 +1,10 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+fi:
+  site_settings:
+    discourse_graphviz_enabled: "Ota Graphviz-lisäosa käyttöön"
+    graphviz_default_svg: "Käytä oletuksena SVG-hahmontamista kuvahahmontamisen sijaan, voidaan mukauttaa kaaviokohtaisesti \"svg=true|false\"-elementillä."
@@ -0,0 +1,10 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+fr:
+  site_settings:
+    discourse_graphviz_enabled: "Activer l'extension Graphviz"
+    graphviz_default_svg: "Rendu SVG par défaut au lieu du rendu d'image, peut être personnalisé par graphique avec l'élément « svg=true|false »."
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+gl:
@@ -0,0 +1,10 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+he:
+  site_settings:
+    discourse_graphviz_enabled: "הפעלת התוסף Graphviz"
+    graphviz_default_svg: "בררת המחדל היא עיבוד SVG במקום עיבוד תמונות, אפשר להתאים באופן נקודתי לכל תרשים עם הרכיב `svg=true|false`."
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+hr:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+hu:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+hy:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+id:
@@ -0,0 +1,10 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+it:
+  site_settings:
+    discourse_graphviz_enabled: "Abilita il plugin Graphviz"
+    graphviz_default_svg: "Il valore predefinito è il rendering SVG anziché il rendering delle immagini; tale opzione può essere personalizzata per ogni singolo grafico con l'elemento `svg=true|false`."
@@ -0,0 +1,10 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+ja:
+  site_settings:
+    discourse_graphviz_enabled: "Graphviz プラグインを有効にする"
+    graphviz_default_svg: "デフォルトは、画像レンダリングではなく SVG レンダリングです。`svg=true|false` 要素を使用して、グラフごとにカスタマイズできます。"
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+ko:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+lt:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+lv:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+nb_NO:
@@ -0,0 +1,10 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+nl:
+  site_settings:
+    discourse_graphviz_enabled: "Graphviz-plug-in inschakelen"
+    graphviz_default_svg: "Standaard ingesteld op SVG-rendering in plaats van afbeeldingsrendering, kan per grafiek worden aangepast met het element 'svg=true|false'."
@@ -0,0 +1,10 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+pl_PL:
+  site_settings:
+    discourse_graphviz_enabled: "Włącz wtyczkę Graphviz"
+    graphviz_default_svg: "Domyślnie renderowanie SVG zamiast renderowania obrazu, można dostosować dla każdego wykresu za pomocą elementu `svg=true|false`."
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+pt:
@@ -0,0 +1,10 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+pt_BR:
+  site_settings:
+    discourse_graphviz_enabled: "Ativar plugin do Graphviz"
+    graphviz_default_svg: "Padrão para renderização SVG em vez de por imagem, pode ser personalizado por gráfico com o elemento \"svg=true|false\"."
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+ro:
@@ -0,0 +1,10 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+ru:
+  site_settings:
+    discourse_graphviz_enabled: "Включить плагин Graphviz"
+    graphviz_default_svg: "По умолчанию используется SVG-рендеринг вместо рендеринга изображений. Для каждого графа можно настроить отдельно с помощью элемента `svg=true|false`."
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+sk:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+sl:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+sq:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+sr:
@@ -0,0 +1,10 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+sv:
+  site_settings:
+    discourse_graphviz_enabled: "Aktivera Graphviz-tillägget"
+    graphviz_default_svg: "Standardvärdet är SVG-rendering istället för bildrendering, kan anpassas per graf med elementet `svg=true|false`."
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+sw:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+te:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+th:
@@ -0,0 +1,10 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+tr_TR:
+  site_settings:
+    discourse_graphviz_enabled: "Graphviz eklentisini etkinleştirin"
+    graphviz_default_svg: "Görüntü oluşturma yerine SVG oluşturmayı varsayılan yapın, \"svg=true|false\" ögesi ile grafik başına özelleştirilebilir."
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+ug:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+uk:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+ur:
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+vi:
@@ -0,0 +1,10 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+zh_CN:
+  site_settings:
+    discourse_graphviz_enabled: "启用 Graphviz 插件"
+    graphviz_default_svg: "默认为 SVG 呈现而不是图片呈现，可以使用 `svg=true|false` 元素对每个图形进行自定义。"
@@ -0,0 +1,7 @@
+# WARNING: Never edit this file.
+# It will be overwritten when translations are pulled from Crowdin.
+#
+# To work with us on translations, join this project:
+# https://translate.discourse.org/
+
+zh_TW:
@@ -0,0 +1,6 @@
+plugins:
+  discourse_graphviz_enabled:
+    default: false
+    client: true
+  graphviz_default_svg:
+    default: true
@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+# name: discourse-graphviz
+# about: Provides the ability to add graphs to posts using the DOT language.
+# meta_topic_id: 97554
+# version: 0.0.1
+# authors: Maja Komel, Joffrey Jaffeux
+# url: https://github.com/discourse/discourse/tree/main/plugins/discourse-graphviz
+
+enabled_site_setting :discourse_graphviz_enabled
+
+register_asset "stylesheets/common/graphviz.scss"
+
+after_initialize do
+  module DiscourseGraphviz
+    class << self
+      def context
+        context = MiniRacer::Context.new
+        context.load("#{Rails.root}/plugins/discourse-graphviz/public/javascripts/viz-3.0.1.js")
+        context
+      end
+
+      def allowed_svg_xpath
+        @@allowed_svg_xpath ||=
+          "//*[#{UploadCreator::ALLOWED_SVG_ELEMENTS.map { |e| "name()!='#{e}'" }.join(" and ")}]"
+      end
+    end
+  end
+
+  on(:before_post_process_cooked) do |doc, post|
+    if SiteSetting.discourse_graphviz_enabled
+      doc
+        .css("div.graphviz")
+        .each do |graph|
+          engine = graph.attribute("data-engine").value
+          svg_graph =
+            begin
+              DiscourseGraphviz.context.eval(
+                "vizRenderStringSync(#{graph.children[0].content.inspect}, {engine: '#{engine}'})",
+              )
+            rescue StandardError
+              nil
+            end
+          next if svg_graph.nil?
+
+          should_use_svg = SiteSetting.graphviz_default_svg
+          should_use_svg ||= graph.classes.include?("graphviz-svg")
+          should_use_svg &&= !graph.classes.include?("graphviz-no-svg")
+
+          if should_use_svg
+            # Changing to Nokogiri::HTML5.fragment returns `nil` for `.css('svg')`
+            # rubocop:todo Discourse/NoNokogiriHtmlFragment
+            new_graph_node = Nokogiri::HTML.fragment(svg_graph).css("svg").first
+            # rubocop:enable Discourse/NoNokogiriHtmlFragment
+            new_graph_node["class"] = "graphviz-svg-render"
+            new_graph_node.xpath(DiscourseGraphviz.allowed_svg_xpath).remove
+            graph.replace new_graph_node
+            next
+          end
+
+          tmp_svg = Tempfile.new(%w[svgfile .svg])
+          tmp_png = Tempfile.new(%w[vizgraph- .png])
+
+          tmp_svg.write(svg_graph)
+          tmp_svg.rewind
+
+          graph_title =
+            Nokogiri
+              .parse(svg_graph)
+              .at("//comment()[contains(.,'Title')]")
+              &.content
+              &.match(/Title:\s(?<title>.+)\sPages:/)
+              &.[](:title)
+          filename = graph_title != "%0" ? graph_title : File.basename(tmp_png.path)
+
+          Discourse::Utils.execute_command("convert", "-density", "300", tmp_svg.path, tmp_png.path)
+
+          upload = UploadCreator.new(tmp_png, filename).create_for(-1)
+
+          # replace div.graphviz with image node
+          new_graph_node = Nokogiri::XML::Node.new("img", doc)
+          new_graph_node["src"] = upload.url
+          new_graph_node["alt"] = filename
+          graph.replace new_graph_node
+
+          tmp_svg.close!
+          tmp_png.close!
+        end
+    end
+  end
+end
@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+RSpec.describe "Core features", type: :system do
+  before { enable_current_plugin }
+
+  it_behaves_like "having working core features"
+end
@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+# rubocop:disable Discourse/NoChdir
+# rubocop:disable Discourse/Plugins/NamespaceMethods
+
+version = ARGV[0]
+if !version || version.empty?
+  STDERR.puts "Please specify a version eg: 3.0.1"
+  exit 1
+end
+
+link = "https://github.com/aduh95/viz.js/releases/download/v#{version}/viz.js.tar.gz"
+
+require "tmpdir"
+
+dest = File.expand_path(File.dirname(__FILE__), "public/javascripts/viz-#{version}.js")
+
+def wrap_iife(contents)
+  <<~JS
+    var vizRenderStringSync;
+    (function(module) {
+    #{contents}
+    vizRenderStringSync = module.exports;
+    })({});
+  JS
+end
+
+Dir.mktmpdir do |dir|
+  Dir.chdir(dir) do
+    `curl -L #{link} --output viz.js.tar.gz`
+    `tar -xzvf viz.js.tar.gz`
+    contents = File.read("package/dist/render_sync.js")
+    File.write(dest, wrap_iife(contents))
+  end
+end
+
+puts "#{dest} was written!"
@@ -171,3 +171,10 @@ files:
  - source_path: plugins/discourse-patreon/config/locales/server.en.yml
    destination_path: plugins/patreon/server.yml
    label: patreon
+
+  - source_path: plugins/discourse-graphviz/config/locales/client.en.yml
+    destination_path: plugins/graphviz/client.yml
+    label: graphviz
+  - source_path: plugins/discourse-graphviz/config/locales/server.en.yml
+    destination_path: plugins/graphviz/server.yml
+    label: graphviz