mmm​.s‑ol.nu

While writing some of the main section of the thesis today, I felt the need to illustrate some subject matter with a diagram depicting a folder structure. Knowing of some similar tools that generate SVG diagrams from textual descriptions, some quick research turned up mermaid JS.

I tried it in their online live editor first to verify that it would indeed do what I needed it to, and then added it to the set of supported types in mmm (on the clientside only) [2ff6f90]. This was pretty easy in the end, all it took was adding mermaid.js to the interactive version’s resources (in build/server.moon) and then definig the convert (and thereby implicitly defining the corresponding type, text/mermaid-graph):

{
  inp: 'text/mermaid-graph'
  out: 'mmm/dom'
  cost: 1
  transform: (source) =>
    with container = document\createElement 'div'
      cb = (svg, two) =>
        .innerHTML = svg
      window.mermaid\render "mermaid-#{id_counter}", source, cb
}

The code is quite short, since all it needs to do is create a container element, then tell mermaid.js to render the textual definition. Once mermaid.js is done, the rendered content is added in the container element.

Here is one of the two diagrams that I implemented the feature for, you can also follow the link through to the source and view the textual representation using the ‘inspect’ button.

graph TD
  Documents --> Movies --> m1{{A Movie.mp4}}
  Documents --> Pictures --> vacation[Summer Vacation]
  vacation --> v1{{1.jpg}}
  vacation --> v2{{2.jpg}}
  Pictures --> Projects
  Projects --> p1{{1.jpg}}
  Projects --> p2{{2.jpg}}

  classDef file fill:#f9f;
  class m1,v1,v2,p1,p2 file;