Fork me on GitHub
#clerk
<
2024-05-28
>
mathpunk18:05:38

I'd like to view some Mermaid diagrams. I am perhaps not understanding what's going on in https://github.clerk.garden/nextjournal/book-of-clerk/commit/b4c03cfb272f516a287c51133dd2dc0a71f274f0/#loading-libraries because I pasted that code in, restarted Clerk in case some dependency needed to be downloaded, and get

mathpunk18:05:23

> Note that this library isn't bundled with Clerk but we use a component based on https://github.com/d3/d3-require to load it at runtime. If this implies I'm supposed to do something other than the code shown, I don't know what the implication is.

mkvlr19:05:27

and nextjournal.clerk.render/with-d3-require doesn’t work either?

mathpunk20:05:39

that's right

mathpunk20:05:02

My editor autocomplete agrees that it's never heard of this...

mathpunk20:05:08

Maybe I have an older Clerk version

mathpunk20:05:16

oh hello, I'm many versions behind.... I am now remembering that I used the version from a blog post to ensure that what I got is what she got

mathpunk20:05:21

I bet I'm about to fix this now~

mkvlr20:05:47

copied this from the book of clerk and it works fine (I’m on the latest main)

(ns notebooks.viewers.mermaid
  (:require [nextjournal.clerk :as clerk]))

(def mermaid-viewer
  {:transform-fn clerk/mark-presented
   :render-fn '(fn [value]
                 (when value
                   [nextjournal.clerk.render/with-d3-require {:package ["[email protected]/dist/mermaid.js"]}
                    (fn [mermaid]
                      [:div {:ref (fn [el] (when el
                                             (.render mermaid (str (gensym)) value #(set! (.-innerHTML el) %))))}])]))})

;; We can then use  the above viewer using `with-viewer`.
(clerk/with-viewer mermaid-viewer
  "stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]")

mathpunk20:05:18

Yeah I had an outdated version

👍 1
mathpunk20:05:31

D'oh! Thanks for the sanity check

mathpunk20:05:49

(also, wow, what a beautiful new 7777 home page! 😍 )

🙌 2