fabioyamate / mermaid-clj

DSL in clojure to build mermaidjs diagrams

mermaid-clj

mermaid-clj is a library DSL in clojure to build mermaidjs diagrams. The main purpose is to support reuse of subdiagrams and also leverage structural editing to manage them.

Usage

A sample diagram that renders all syntax support for mermaid can be described as:

(def sample
  (sequence-diagram
   (participants :b :c :d :e :a)
   (synchronous
    :a :b "send"
    (synchronous
     :b :c
     (loop-block
      "retry"
      (highlight :yellow
                 (synchronous :c :c "query db")
                 (synchronous :c :a "fetch data")
                 (synchronous :d :f "woops"))))
    (synchronous
     :b :d "out" "d"))
   (alt "true"
        (loop-block "retry"
                    (synchronous :c :d "query db"
                                 (note-over :c :d "over c and d"))
                    (synchronous :c :c "query db"
                                 (note-over :c "over c")))
        "false-async"
        (async :c :d "WAIT")
        "false-sync"
        (synchronous :c :d "query db"))
   (highlight :gray
              (opt "alternative"
                   (highlight :red
                              (synchronous :c :a
                                           (note-left :a "this is note left of a")))
                   (synchronous :d :e)))
   (parallel "send message"
             (async :a :g "MESSAGE"
                    (synchronous :g :h "save data"))
             "deliver email"
             (async :b :e "ARCHIVE"
                    (message :e :a "ARCHIVED"))
             "webhook"
             (synchronous :a :third-party "POST /api/webhook" "200 OK"))
   (highlight :blue
              (note-right :a "this is note right of a")
              (synchronous :a :b "send"
                           (synchronous :b :c
                                        (loop-block "retry"
                                                    (synchronous :c :c "query db")
                                                    (synchronous :c :a "fetch data")
                                                    (synchronous :d :f "woops")))
                           (synchronous :b :d "out" "d")))))

From this you can output the string version of this diagram for debugging:

(println sample)

Our you can either:

(download-image sample) ;; rendering a png image from mermaidjs website
(browser-edit sample)   ;; viewing render data on mermaidjs website

Reusable blocks

Each expression is a group in the diagram, so the above diagram could be break into:

(def sync-1
  (synchronous
   :a :b "send"
   (synchronous
    :b :c
    (loop-block
     "retry"
     (highlight :yellow
                (synchronous :c :c "query db")
                (synchronous :c :a "fetch data")
                (synchronous :d :f "woops"))))
(def sync-2
  (synchronous
   :b :d "out" "d"))

;; joining the groups

(def full
  (sequence-diagram
    sync-1
    sync-2))

;; grouping is possible
(def group-1
  (group sync-1 sync-2))

(sequence-diagram
  (autonumber)
  group-1)