FEATURE: use svg=true to force graphviz to avoid image conversion

FEATURE: use svg=true to force graphviz to avoid image conversion

Image conversion misses some of the svg features so sometimes images do not look right.

The tradeoff here is that we get jitter on page load at the moment, but at least we have a way of sanely generating graphs.

Also adds some CSS to make sure graphviz graphs always fit on page.

diff --git a/assets/javascripts/discourse-markdown/discourse-graphviz.js.es6 b/assets/javascripts/discourse-markdown/discourse-graphviz.js.es6
index f4e2f20..6ff31ed 100644
--- a/assets/javascripts/discourse-markdown/discourse-graphviz.js.es6
+++ b/assets/javascripts/discourse-markdown/discourse-graphviz.js.es6
@@ -3,7 +3,11 @@ export function setup(helper) {
     return;
   }
 
-  helper.whiteList(["div.graphviz", "div.graphviz.is-loading"]);
+  helper.whiteList([
+    "div.graphviz",
+    "div.graphviz.is-loading",
+    "div.graphviz-svg"
+  ]);
 
   helper.registerOptions((opts, siteSettings) => {
     opts.features.graphviz = siteSettings.discourse_graphviz_enabled;
@@ -29,7 +33,12 @@ export function setup(helper) {
             ? `data-engine='${inputEngine}'`
             : "data-engine='dot'";
 
-          token.content = `<div class="graphviz is-loading" ${engine}>\n${escaped}\n</div>\n`;
+          let svgOnly = "";
+          if (tagInfo.attrs.svg === "true") {
+            svgOnly = " graphviz-svg";
+          }
+
+          token.content = `<div class="graphviz is-loading${svgOnly}" ${engine}>\n${escaped}\n</div>\n`;
 
           return true;
         }
diff --git a/assets/stylesheets/common/graphviz.scss b/assets/stylesheets/common/graphviz.scss
index 7a83984..f8b1cb7 100644
--- a/assets/stylesheets/common/graphviz.scss
+++ b/assets/stylesheets/common/graphviz.scss
@@ -1,4 +1,7 @@
 div.graphviz {
+  svg {
+    max-width: 100%;
+  }
   &.is-loading {
     padding: 2em;
     background: $primary-very-low;
diff --git a/plugin.rb b/plugin.rb
index 6795bab..92a8cef 100644
--- a/plugin.rb
+++ b/plugin.rb
@@ -12,12 +12,16 @@ register_asset "stylesheets/common/graphviz.scss"
 
 after_initialize do
 
+  def context
+    context = MiniRacer::Context.new
+    context.load("#{Rails.root}/plugins/discourse-graphviz/public/javascripts/viz-1.8.2.js")
+    context
+  end
+
   DiscourseEvent.on(:before_post_process_cooked) do |doc, post|
     if SiteSetting.discourse_graphviz_enabled
-      context = MiniRacer::Context.new
-      context.load("#{Rails.root}/plugins/discourse-graphviz/public/javascripts/viz-1.8.2.js")
 
-      doc.css('div.graphviz').each do |graph|
+      doc.css('div.graphviz:not(.graphviz-svg)').each do |graph|
         engine = graph.attribute('data-engine').value
         svg_graph = context.eval("Viz('#{graph.children[0].content.gsub(/[\r\n\t]/, "")}', {engine: '#{engine}'})")

GitHub sha: 97ea8700

@jjaffeux I wonder if we should still do the SVG conversion that way we can at least embed the svg inside the post? This gives us a chance of sometimes rendering something in emails plus a lot less jitter.

I think this sorts out the concerns here: FEATURE: render svg to actual svg and replace inline