Simple Graphing Library with nice look and online features

Hi all Graphviz or PlantUml Users and Lovers,

you might be interested in a small tool I found some months ago. It is not a complete replacement but a nice tool that is available offline and online with a really compact.

After thinking and reading about visual generating graphs from draft links I made up this mock up"" %23spacing%3A%2032 %23padding%3A%2012 [Draft%20A]%20<->%20[Draft%20B] [Draft%20A]%20->%20[Draft%20C] [Draft%20A]%20->%20[<red>Draft%20Zero] [Draft%20B]%20--%20[<green>IBM] [Draft%20B]%20--%20[<green>BBC%20News] [Draft%20D]%20--%20[<green>Beeb%20News] [Draft%20D]%20->%20[Draft%20A]

I will tie it in a script action later on.



Nice example, too… :slight_smile:

Links missing compared to the original, BTW. I think that will matter.

Looking good, Andreas. I had thought that nomnoml syntax looked easy enough to work with, but I didn’t realise you could define a map through a URL. That certainly opens up some possibilities.

Further to the conversation in @martinpacker’s other thread, I’d be keen to see more discussion of how people might actually use this kind of graphing in meaningful ways. Use cases, anyone?

  1. It looks pretty. :slight_smile:
  2. It might make a “peer network” of drafts navigable.

yeah, did not get it fixed on ios.
I will investigate about the linking in nomnoml. it is able to export svg so it has to be possible somehow.

I love the style of the diagrams and the fact that I can render via an link and - I have to check - maybe even offline from ios (macOS works fine with an electron app)

1 Like

I want to build a printed crazy wall of my drafts topic
Starting to use drafts as a Zettelkasten that will be a representation of my digital brain.


Smaller snippets could be used as topic references or to check the cross referencing

on the other hand I as a software developer engineer am often in the need to create a graph of something. Being able to start this from Drafts and keep it there would be really nice.

The tag/note report from tadpole library could also benefit from a graphical representation - for my kind of brain at least

1 Like

I might add some HTML rendered charting in at some point, but probably as separate actions.

FYI, there will be even more data in that ThoughtAsylum Action group* action in the next release - I’ve given it a little update.

* TADpoLe is the library, not the action group :wink:

1 Like

This is useful!

I had stalled in my own experiments of visualising links between drafts via iThoughts because, while the results were visually appealing, I didn’t actually get much practical value from them and soon stopped using the actions I’d built. Hearing more about other people’s use cases helps me to see new/other possibilities for my own. :+1:

1 Like

your still the best!

Epiphany: I imagine this kind of graphing becomes particularly useful if you practise the kind of atomised note-taking (one draft per thought) that Zettelkasten encourages…

For example: if you’re making notes from an article, with a “structure” or “meta” note that essentially serves as an index for all of the notes from that article, graphing links provides a) a way to zoom out and visualise all of the notes linked directly to that article; b) a map of connections between the article’s individual notes and notes related to other articles/topics/themes/subjects. That sounds really useful, and sounds like it might support further discovery/insight.

Side note: this is one of the principles I feel like I’m in-between on— I’m used to a single draft containing a range of thoughts on any particular subject or topic. So all of my notes from one article/text/whatever would typically sit in a single draft, with quotes, my responses to those quotes, other thoughts, captured actions, etc. But I’m starting to see the benefit of breaking things down further, particularly since a draft is essentially Draft’s smallest functional unit, and cross-linking seems to more useful when linking at the level of the smallest functional unit.

@martinpacker / @Andreas_Haberle: For current graphing efforts, is there any way to indicate the number of connections a single node has (beyond the density of visible connection lines)? I think Roam-like graphs use node-size as a variable to indicate density of connections, right? Alternatively perhaps some way to manually specify/indicate “meta” nodes (perhaps based on a tag or text token within the draft content), where “meta” nodes could have a specific colour? Does any of that sound useful to consider?

1 Like

The code I posted could count the number of links.

It could also extract the first 100 or so characters and place them under the title.

I have other projects on the go right now, though.

we could create a github project to collect the different approaches.

I have posted an issue to the nomnoml developer to check for the linking support- as far as I read it it will not be possible right now.

So ‚mermaidJS’ comes into my mind as another player - it is not quite as nice looking as nomnoml but might be the better fit for our purpose

1 Like

Yes, if someone built it I think my employer would let me contribute. There’s a (brief) process I have to go through.

hi @martinpacker and @jsamlarose

the nomnoml library got an update to support clickable nodes.

Now the weekend project is set


Exciting news! Where did you see the update?

I really like the aesthetic for this one.

Since we first started this graphing conversation, I’ve been thinking about setting up a “topics” or “top pages” workspace containing a draft for each of the key themes/subjects I’m interested in. Jump-off points for note clusters/networks. Seems obvious, but that’s not the way I’ve been used to taking notes. Up until recently, my “active thinking via writing” process has been modelled on the practice of revising towards a final finished product (evolving “drafts” of the same emerging idea) married with supporting information/references.

I think this was my principle barrier in appreciating the value of a network graph. Funny thing is, I’ve done a fair amount of reading about this over the past year, and I understand the appeal of atomic note-taking, but I only just connected this with a bit of reflection on the way I actually work.

Takes a minute, sometimes… :wink:

1 Like

it on the issues

I tried to put it into work and failed until now.
a simple <a> with href around the right <rect> element does the trick though.

I already have a simple page working with two local java script files and one with a node generated svg.

Still some ground to cover to get the diagram. But it is progress anyway.

By investing the nomnoml docs I found a newer feature to generate table blocks which may give us a good frame for a nice diagram


Still pending due to interesting pythonic sidetracks with @martinpacker (mdpre+md2pptx porting to python 3 and integration into iOS - including Drafts)

I am wondering if we could get the nomnoml.js running in HTMLPreview like the MGChecklistPrompt library does.