Merge pull request #284 from emil0r/feature/graphviz

graphviz (js) added

Author: daslu

notebooks/clay_book/examples.clj

@@ -195,6 +195,20 @@ flowchart TD
     C -->|Three| F[fa:fa-car Car]
   ")
 
+;; ## graphviz
+
+(kind/graphviz "digraph D {
+
+  A [shape=diamond]
+  B [shape=box]
+  C [shape=circle]
+
+  A -> B [style=dashed, color=grey]
+  A -> C [color=\"black:invis:black\"]
+  A -> D [penwidth=5, arrowhead=none]
+
+}")
+
 ;; ## Code
 
 ;; Clojure code can be annotated with `kind/code`.

src/scicloj/clay/v2/item.clj

@@ -294,6 +294,25 @@
             (first value)]
    :deps [:mermaid]})
 
+(defn graphviz [{:as   _context
+                :keys [value]}]
+  {:hiccup [:div
+            ;; create a local closure and then execute it immediately
+            [:script {:type "text/javascript"}
+             (format "(function() {
+  const el = document.currentScript.parentElement
+  Viz.instance().then(viz => {
+    try {
+      const svg = viz.renderSVGElement(`%s`);
+
+      el.appendChild(svg);
+   } catch (e) {
+     console.error(e);
+   }
+  })})
+();" (first value))]]
+   :deps   [:graphviz]})
+
 (defn plotly [{:as context
                :keys [kindly/options value]
                {:keys [data layout config]

src/scicloj/clay/v2/page.clj

@@ -4,16 +4,15 @@
    [clj-yaml.core :as yaml]
    [clojure.java.io :as io]
    [clojure.java.shell :as shell]
-   [clojure.string :as string]
+   [clojure.string :as str]
    [hiccup.core :as hiccup]
    [hiccup.page]
+   [scicloj.clay.v2.files :as files]
+   [scicloj.clay.v2.item :as item]
    [scicloj.clay.v2.prepare :as prepare]
    [scicloj.clay.v2.styles :as styles]
    [scicloj.clay.v2.util.portal :as portal]
-   [scicloj.clay.v2.util.resource :as resource]
-   [scicloj.clay.v2.files :as files]
-   [scicloj.clay.v2.item :as item]
-   [clojure.string :as str]))
+   [scicloj.clay.v2.util.resource :as resource]))
 
 (def special-lib-resources
   {:vega {:js {:from-local-copy
@@ -26,6 +25,8 @@
                       ["https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css"]}}
    :mermaid {:js {:from-the-web
                   ["https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"]}}
+   :graphviz {:js {:from-the-web
+                   ["https://cdn.jsdelivr.net/npm/@viz-js/[email protected]/dist/viz-global.min.js"]}}
    :echarts {:js {:from-local-copy
                   ["https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"]}}
    :cytoscape {:js {:from-local-copy
@@ -295,7 +296,7 @@
           (map-indexed
            (fn [i item]
              (prepare/item->md item)))
-          (string/join "\n\n")))))
+          (str/join "\n\n")))))
 
 
 (defn gfm [{:as spec
@@ -305,7 +306,7 @@
        (remove nil?)
        (mapcat #(str/split % #"\n"))
        (remove #(re-matches #":::.*" %))
-       (string/join "\n")))
+       (str/join "\n")))
 
 (defn hiccup [{:as spec
                :keys [items title quarto]}]

src/scicloj/clay/v2/prepare.clj

@@ -543,6 +543,10 @@
  :kind/mermaid
  #'item/mermaid)
 
+(add-preparer!
+ :kind/graphviz
+ #'item/graphviz)
+
 (add-preparer!
  :kind/plotly
  #'item/plotly)