Hacker News Reader

Comment by stefco_ | Hacker News Reader

The dot language used by graphviz is simple enough and portable to web implementations [0][1]. I think this is more useful for its specific domain.

[0] https://github.com/dagrejs/dagre-d3/wiki

[1] https://github.com/mdaines/viz.js

View on HN

TBH I think the Argdown source is much more readable than this I found from one of your links:

    /* Example */
    digraph {
        /* Note: HTML labels do not work in IE, which     lacks support for <foreignObject> tags. */
        node [rx=5 ry=5 labelStyle="font: 300 14px     'Helvetica Neue', Helvetica"]
        edge [labelStyle="font: 300 14px 'Helvetica Neue',     Helvetica"]
        A [labelType="html"
           label="A <span style='font-    size:32px'>Big</span> <span style='color:red;'>HTML</span>     Source!"];
        C;
        E [label="Bold Red Sink" style="fill: #f77; font-    weight: bold"];
        A -> B -> C;
        B -> D [label="A blue label" labelStyle="fill:     #55f; font-weight: bold;"];
        D -> E [label="A thick red edge" style="stroke:     #f77; stroke-width: 2px;" arrowheadStyle="fill: #f77"];
        C -> E;
        A -> D [labelType="html" label="A multi-rank <span     style='color:blue;'>HTML</span> edge!"];
    }

Like I said, I agree for verbose cases like complex logical arguments, where the contents of each node are longer and should look more paragraph-like. You're also picking an example with tons of formatting in it. If you have a bit less formatting, shorter node labels, and proper indentation, it looks great. From the second library I linked's demo page [0]:

  digraph G {
  
   subgraph cluster_0 {
    style=filled;
    color=lightgrey;
    node [style=filled,color=white];
    a0 -> a1 -> a2 -> a3;
    label = "process #1";
   }
  
   subgraph cluster_1 {
    node [style=filled];
    b0 -> b1 -> b2 -> b3;
    label = "process #2";
    color=blue
   }
   start -> a0;
   start -> b0;
   a1 -> b3;
   b2 -> a3;
   a3 -> a0;
   a3 -> end;
   b3 -> end;
  
   start [shape=Mdiamond];
   end [shape=Msquare];
  }

Or, if you don't care about colors and shapes (which you probably don't on a first pass-through):

  digraph G {
  
   subgraph cluster_0 {
    a0 -> a1 -> a2 -> a3;
    label = "process #1";
   }
  
   subgraph cluster_1 {
    b0 -> b1 -> b2 -> b3;
    label = "process #2";
   }
   start -> a0;
   start -> b0;
   a1 -> b3;
   b2 -> a3;
   a3 -> a0;
   a3 -> end;
   b3 -> end;
  }

It's not the prettiest once you start using the advanced formatting features (some of which are already present in the first example), but it's simple and straightforward enough for manual or scripted graph layout/rendering across a broad range of use cases, and I highly recommend it as a go-to. I use it to autogenerate DAG plots in my multi-messenger astrophysics library documentation [1] and also manually to reason through things, though, again, I agree that Argdown's syntax looks better for the latter verbose use case.

I was just disagreeing with the notion that Argdown is useful in the general case, where I find that graphviz .dot format is already closer to what I would want a general graph-layout markup language to look like (despite being far-from-perfect). It's less optimized for the verbose case, but it starts pretty minimal and can be extended without too much pain in whatever direction is best.

[0] http://viz-js.com

[1] https://multimessenger.science/llama.pipeline.html

This uses Graphviz

...as one of the rendering backends. The syntax is what I assume was being referred to.

Reply on news.ycombinator.com