Preview for nomnoml code

Hey everyone,

Just a heads up: I made a quick plugin for viewing nomnoml code in a HTML preview:

Any code in a nomnoml fenced block gets transformed. Hopefully you guys find it useful!


Know some other users have mentioned nomnoml in the past: Simple Graphing Library with nice look and online features

Looks nice. Can you get it to render to a graphic in data: URI form? Then it could be inline in a draft.

It’s a good question. I bet that canvas.toDataURL() could be used on each nomnoml drawing — but don’t think I’m proficient enough at Drafts Scripting yet for passing it back to the original text?

After reading through the Advanced HTML Previews documentation:

  1. Converting to a data: image is certainly doable for a single nomnoml code block
  2. Pretty complex for multiple code blocks

Here’s what I currently have running in a separate test action:

1 Like

great stuff. I am still planing to integrate the new feature to make nodes inside nomnoml clickable.

it is based on my request at

if you have a github account lets join forces.

the tool mdpre could integrate nomnoml graph generation as an upcoming feature


Yes: We’d have to find a suitable semantic for it. =nomnoml and =endnomnoml as a bracket round the lines with the actual diagram?

BTW, not to promise anything but in md2pptx I’m investigating whether we could support data: URI graphics. That way you could include them inline in Drafts - if it supported them. (Transclusion with mdpre might be the best way of managing them.)


By the way, my filterCSV project turns iThoughts CSV-encoded trees into DiGraphs - with .dot language. It might be able to generate nomnoml.

(It does lots of other things besides, but these probably aren’t relevant here.)

I am having trouble to set it up

fenced block should be

some text

[some] - [awesome]
[awesome] - [diagram]

more text

But the diagram does not get converted in the preview

Any help?

I gave this a quick go with the action posted above.

It gave me this preview.

Which looks right to me at first glance.

Any chance you are using a different or modified action?

What is the HTML output you get?

1 Like

it is not working on my side…

i have to check this (urls to scripts…)

Hey @Andreas_Haberle ,

I could see how my screenshots could lead to some confusion.

The current action displays nomnoml in a HTML preview.

Based on @martinpacker’s idea of inline data: base64 PNG, I had been prototyping an additional nomnoml action (but haven’t released that one yet).

1 Like

You’re making me hurry up with the idea of supporting data: URIs for graphics in md2pptx. :slight_smile:

1 Like

I am not surexit did.
What was my misunderstanding?

It works!!!

The trick was to switch the markdown parser settings to Multi Markdown


I feel an action to 1) take selected text and render it this way and 2) create a md2pptx graphics slide coming on. I guess I’m being offered the first part of this.

1 Like

I guess the thing I did with the links should easily be added via extending @zach action … my weekend gets busy

This is the next iteration

It uses the nomnoml-svg version and clickable links…

I have a working version in a html file (chrome and safari) if anyone is interested in experimenting further on that road.

I am not quite happy about some things:

  • url ) seems not be working inside the preview neither on macOS nor on iOS
  • alert( ... ) even seems to crash/freeze the preview on macOS
  • @zach code selector is not working either yet

So I think I have to read deeper inside some documentations (Drafts Script API and Documentation …)

Investigate more …

1 Like

One done - three more to go …

Solution: link object does not get to the template

[Discussion] draft.setTemplateTag( tagName, tagString); // 2.Parameter is String!

Did you publish a test source file?

this would be the action for now:

newline around the link make it more visible (it was referenced in context of the paragraph of my previous post)

yesterday I sacrifices some sleep to:

  • learn more about the templates in Drafts
  • learn how to not use HTML Preview
  • then learned a new totally different reason why to use HTML Preview (borowserly and DOMParser)

… in this sense it is more like a second automation engine than simple HTML viewer (I could have already guessed it after learning about this nice list input GUI in Drafts last week)