This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2024-05-28
Channels
- # announcements (19)
- # aws (4)
- # babashka (17)
- # beginners (74)
- # biff (2)
- # calva (5)
- # cider (6)
- # clerk (14)
- # clj-kondo (12)
- # cljs-dev (3)
- # clojure (40)
- # clojure-dev (26)
- # clojure-europe (28)
- # clojure-nl (1)
- # clojure-norway (39)
- # clojure-sweden (1)
- # clojure-uk (4)
- # conjure (2)
- # docker (35)
- # emacs (24)
- # graalvm (15)
- # graphql (1)
- # gratitude (4)
- # holy-lambda (2)
- # hyperfiddle (8)
- # introduce-yourself (3)
- # jobs (3)
- # nrepl (2)
- # off-topic (9)
- # pedestal (8)
- # reitit (5)
- # releases (3)
- # remote-jobs (3)
- # yamlscript (1)
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
> 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.
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
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 --> [*]")