beepb00p VS viz.js

I was annoyed by cron/fcron limitations and figured systemd is the way go because of its flexibility and power, but also was annoyed about manually managing tons of unit files. So I wrote a tool with a config that looks kinda like a crontab, but uses systemd (or launchd on mac) behind the scenes: https://github.com/karlicoss/dron#what-does-it-do

E.g. a simplest job definition looks like this

  job(every(mins=10), 'ping https://beepb00p.xyz', unit_name='ping-beepb00p')

https://beepb00p.xyz I mostly write about data liberation, quantified self and knowledge management.

Some notable links:

https://beepb00p.xyz/myinfra.html -- map of my personal data infrastructure (usually people say I'm a bit mad after seeing this :) )

https://beepb00p.xyz/blog-graph.html -- a nice visual way to explore my posts

https://beepb00p.xyz/exobrain -- my "external brain", basically public notes/links dump

Graphviz is awesome!

Here are a couple of my diagrams:

https://beepb00p.xyz/blog-graph.html -- graph of my blog pages with tags/connections between posts, generated with a DSL-ish python script https://github.com/karlicoss/beepb00p/blob/master/misc/index...

https://beepb00p.xyz/myinfra.html -- map of my personal data & infrastructure (discussed a year ago https://news.ycombinator.com/item?id=26269832 ). Also a similar DSL https://github.com/karlicoss/myinfra/blob/master/generate.py

The main downside for me is that sometimes it gets the positioning wrong, and you can see how it can be easily fixed, but it's hard to convince graphviz to actually do so. Basically I'd love a tool where I can do 10% of positioning manually and let the rest be constraint based like in graphviz.

You can define nodes and edges on the same line in graphviz. Here is an example: https://viz-js.com/?dot=ZGlncmFwaCB7CiAgYSAtPiBiIC0-IGMgLT4g... Of course depending on complexity of graph you might want to do it separately.

A potentially much bigger difference in verbosity comes from graphviz being a general purpose graph drawing software, while mermaid is more of a software for drawing software development related diagrams (not just graphs and tables). This is well reflected by the fact that in graphviz the diagram types are categorized by layout engine (hierarchical drawing, spring model, force directed placement, circular layout,...), but in Mermaid they are categorized by what data the diagram represents (flowchart, sequence diagram, class diagram, state diagram, entity relationship diagram, gant diagram). You can draw many of those types of diagrams in Graphviz but you will have to potentially do a lot more of reinventing the wheel and low level manual formatting (arrow and node shapes, line style, etc.), while Mermaid documentation uses more of diagram specific terms like cardinality, visibility(public, private, ...) and many others.

That's like comparing Excel with purpose built accounting software or an inventory management system. Excel might be a lot more flexible, but if the usecase specific software matches your needs it can be a lot more streamlined and less error prone.

So the conclusions will very much depend on your use case. If you are trying to draw one of the standard software engineering diagrams as part of design documentation, Mermaid can be great. For less formal design diagrams or quickly visualizing the state of some algorithm it's much more even playing field.

Generally, you're best off with Viz.js, an emscripten transcompile of GraphViz

Other resources - Graphviz and Viz.js helped me a lot in in creating graphing app I built before I knew of these other libraries. "Graph visualization" was what I was searching for.

To modify it, go to http://viz-js.com/, select Engine: circo and paste the following code: ``` digraph G { // Colors. See https://graphviz.org/doc/info/colors.html. Pikemen, MenAtArms [style=filled, fillcolor=lightskyblue1] Archers, Crossbowmen [style=filled, fillcolor=khaki] Horsemen, Knights [style=filled, fillcolor=lawngreen] Rams, Springalds, Mangonels, Trebuchets [style=filled, fillcolor=plum]

This might fit the bill in js land http://viz-js.com/

> but the bundle is enormous - over a megabyte of data

If only DOT layout engine and JSON output format is enabled at compile time it is about 600KiB, or less than 200KiB Gzipped. https://github.com/rapidlua/viz.js

> A nice thing about having an SVG render is that it's very easy to attach events, and inline SVGs can be styled with CSS.

Indeed it’s super handy! I’m using this approach in https://LuaJIT.me to produce an interactive visualisation of a graph of traces in a JIT compiler.