Create diagrams with code using Graphviz
ncona.com
ncona.com
We've gotten a lot of help lately from Magnus Jacobsson, Matthew Fernandez and Mark Hansen on cleaning up the website and the code base, even some persistent bugs we could never find ourselves.
Improvements that would benefit the community the most?
- better default styles that don't look like troff from 1985
- better default layout parameters in neato than statistical multidimensional scaling based on shortest path
- more expressive graph language with classes or templates
- more robust handling of error conditions like out of memory
- better documentation to help people find useful tools or just know what they should be looking for
- find someone to donate a generic orthogonal routing algorithm based on a modern algorithm since people want this
- it would be a big effort, but move the core algorithms to a framework that supports interaction with layout generation
Hope this makes sense.
Thanks for your hard work on it!
My favourite personal use of Graphviz: A few years ago I inherited a large, legacy codebase that was very hard to understand -- full of global state modified from dozens of functions, obscure function names, etc. I used a C parser (forget which one) to convert the code to a set of ASTs, and then hacked up a Web-based, interactive graph generator, using Graphviz to create the interactive SVGs. The "app" let you click on a function (node) and zoom in to examine its callers, callees, global accesses, global mutations, etc., with a "radius" parameter to decide how much of the large graph you wanted to see. Every node was clickable, and would ask the Web app to generate a new graph centered on that node.
It was an awful, throwaway hack, and was only about 90% accurate due to parsing/preprocessor challenges. (At times I resorted to annotating the code with magic comments to facilitate graph generation -- not a sustainable approach.) But a day spent hacking with Graphviz dramatically improved my learning rate, and it was also useful in helping describe the code to others.
I have done the same and it totally saved my ass on legacy code that I was tasked with extending or fixing.
I just pumped the output of dot to a static web page. It was awesome.
Also, I rendered the entire graph as a single page, and started printing it tiled to multiple 8.5x11 sheets. One of the women I worked with that did all our document versioning and tracking saw me taping the sheets together, and asked me for a copy of the document. An hour later she walked into my office with a single page print from a 42" plotter. That hung like artwork on my office wall for about eight years.
She was a wonderful soul for that. And the print was beautiful.
> - it would be a big effort, but move the core algorithms to a framework that supports interaction with layout generation
Yup, I think these are the ones that mean I never actually end up using Graphviz for anything :)
If I'm generating graphs, I want them laid out in a hierarchical style.
To do that, I need a library which can do that layout.
Those libraries are often written in a higher level language like C#, Java, etc, which come with their own simple drawing layer.
And then I don't need Graphviz anymore! (not that I'm suggesting graphviz should change)
Thank you for the kind words.
I've tried to make it mobile-friendlier, after our marketing team told me that most people who come via Twitter use a phone. But we kinda ran out of time, so I only managed to fix the most egregious problems. By now I also have a few ideas how to get the edge paths to be much better (and built-in Bézier spline routing would have helped, but that was only released publicly ... two days ago). Admittedly, while that layout has been produced by yFiles' hierarchical layout it needed a bit massaging to do so properly (about 200 lines of custom layout code, if I remember correctly). However, a proper library that gives you that flexibility helps tremendously, of course. Sometimes, trying to get Graphviz to do the right thing can be pretty complicated and may involve hacks like invisible edges to force a certain layering (although that was way back and I didn't know about "rank=foo" back then; perhaps the invisible edges were really not needed).
In any case, yEd Live (https://www.yworks.com/yed-live/), built on yFiles for HTML, also has an undocumented, incomplete, and rudimentary Graphviz import. I've got a fairly exhaustive list of issues and missing features, but little time to tackle it, sadly. This is further complicated by the fact that the DOT language uses attributes to describe the graph structure, visual attributes of items, and to control layout settings. That makes mapping Graphviz to anything else a bit hard.
Also, in my own experience, I was able to get hierarchical layouts Graphviz by using directional graphs with subgraphs.
granted, this was not fun, and also now 'modern' tex (not sure about graphviz) will use fontconfig on linux which may require different machinations.
so obviously your point on 'better integration' still stands unless I'm just out of date on how to do it..
So, I guess:
> - it would be a big effort, but move the core algorithms to a framework that supports interaction with layout generation
If that's what you mean by that.
It'd make it way easier to pretty up Graphviz output. I'd rather have "renderer" applications that run on top of Graphviz and have Graphviz itself lose all but its most basic build-in drawing capabilities, than have more of that built into Graphviz itself.
For example, in a graph with only two nodes, where each node contains a long text string, there is no "pressure" on the nodes, so the default result might be to not break the text, creating two wide, short node-boxes, and then to arrange them with one above the other. Whereas if you have many such nodes in a densely-connected web, the text in them will likely be wrapped in order to make the nodes more box-shaped, so that nodes can fit between the cuts of the pairwise-acute spirograph-like edge lines.
In order to resolve this sort of layout, Graphviz has to understand a lot of things about fonts, padding, and borders (just like TeX does.) It's already doing "rendering" at that point, even if the result gets thrown away.
Much cleaner (and way more useful) to be able to tell graphviz "this is how large I need this node to be, and that one this size, and the other one such-and-such, and they are connected thusly, now please give me coords for a layout"
This isn't just for looks, either: if you want the resulting graph to be interactive, and perhaps even graphically (drag-n-drop) editable after the initial graphviz auto-arranging, you're probably wanting output that's not exactly in graphviz's wheelhouse. You want to tell it node sizes and have it tell you where to put them.
I've used it a few times for visualizing aspects of my research, usually by writing .dot files directly from Racket. It turned out to be quite useful.
Design is not something that should be tied to a particular decade. It's not fashion. Good design is timeless and only adopts to new technologies/media. Design is how well a particular solution works for the purpose of it. If it looks like 1985 and works well, there is absolutely no reason to change it. If it doesn't, then there is no need to look at "modern trends", instead we need to go back to the drawing board and find out what the problem is first.
Can you identify the problem with the design besides the superficial aesthetic (which can be easily themed)?
That's one half. The other one is how people feel while using it. 1985 aesthetic makes people feel bad. Thus design is half bad. Or, for you maybe, half good.
Many would argue good fashion is timeless as well. A good chunk of haute couture from decades past would be seen as modern and appealing today. (Which is why the houses like to repackage and ship them as such...)
> Fashion is a popular aesthetic expression at a particular time, place and in a specific context, especially in clothing, footwear, lifestyle, accessories, makeup, hairstyle, and body proportions.
Fashion is inexplicably linked to a particular time. Just like Art - Art evolves with time and it is part of the culture, current events, etc.
Design is not (unless you want to include say media as it changes through time. For e.g. print -> digital media).
But not at every given point in time. That fashion ebbs and flows is a given, but that's not the same thing as being timeless.
Design does not exist in a vacuum. Technological progress, for example, creates the need for design change. Microsoft's switch from a serif to a sans serif font as the default typeface for Word was a good move, because we rarely print documents anymore and a the best design for print is not the same as the best design for screens.
20th century physics books had a distinct design for illustrations. It was beautiful and functional. But it was also designed around the limitations of their eventual monochrome (not even greyscale) print. A 2020 textbook does not have the same limitations and should not be designed with the same set of constraints.
This is a feature, not a bug.
The rest would be nice to have, though.
I will turn to Visio if I need to make something presentation-quality, so there's that.
I have similar feelings about the lack of ability to fine-tune the layout: I've started seeing it as a feature, because it gives me a great feedback mechanism: If the graph is too complicated for Graphviz to lay out nicely, I take that as a sign that the thing the graph represents needs to be simplified. I've even gone so far as to incorporate Graphviz into my definition of done for a refactoring project: I kept a dotfile representing the current state of the dependency graph, and stopped refactoring when the rendered graph stopped making my eyes water.
THANK YOU for making this wonderful program.
Also special thanks to the emscripten team for their wonderful transcompiler.
I am constantly amazed at all the WONDERFUL software that exists on unix as single threaded applications (required for emscriptem asm.js output). There could be a whole sub-culture of webdev which uses these old unix programs. I feel like it's an untapped resource, truly.
That said, I have spent entirely too much time manually searching through the 100-odd dimensional Graphviz parameter space trying to get aesthetic results. So much time in fact that occasionally it's easier to fire up Omnigraph and draw the thing manually.
Graphviz would be ideal if it had some kind of meta-parameter settings that could reduce the tendency of its output to resemble an unreadable rats nest when the number of nodes exceeds about 20. I know that's part of the point of neato vs. dot, and that some parameters are effectively meta-parameters, but Graphviz still needs a better "porcelain" (in git-speak) with fewer dimensions.
Recently I started teaching Software Development, and once again reached for graphviz for a huge variety of classroom uses.
Thanks!
What I want from graphviz is a rich library, based on D3, for building interactive web components for graphviz SVG output.
dot is an absolute dream for constructing automatic representations of graph and tree data, including great stuff like lexical scope and project maps. But simply building it into a raw SVG runs the risk of drowning in detail.
If this library were built in support of a graph generator SPA, something that lets a user tweak the huge state space of graphviz style parameters in real time, well, sky's the limit.
I work with parsers and abstract syntax trees professionally. I've been salivating over the kind of legibility we could introduce into this space with just such a library.
I know it's a huge undertaking! I think you'd find a lot of enthusiasm for actually doing it, if you organized the space to make it possible and put out a call to action.
EDIT: also, being able to create "venn diagrams" of sorts with subgraphs would be awesome, basically allowing a node to be in several clusters, and have the clusters borders cross each other so that the item is inside all of them.
"It is essential that a font which has the glyphs for your specified characters is available at final rendering time."
It sounds to me like UTF-8 encoded characters won't show if the font isn't available on the machine, in which case we'd have to either somehow force a font install or ideally just package the font with the application. The latter would require rebuilding Graphviz without fontconfig enabled, I think?
There are some who view the dot language as an "assembler" language, good as the output for graph generators. It would be desirable to have more expressive costructs, but barring that, a lot can be achieved by using gvpr, m4 or various scripting languages.
You mention a possible improvement of classes of nodes/edges. If I understood correctly, this is typically used for styling, and is most commonly achieved via a pre-processing step. We all use our own tools for that (I've personally used m4, cpp, sed, Tcl, and I'm sure others that I forget).
Graphviz is one of the tools that I use in a wide variety of circumstances. I'd say the most satisfying cases from all these years were (a) producing a genealogical graph of around 1000 people drawn with neato (very organic-looking!); and (b) producing orgcharts for an organization (that had to look acceptable to what people were used to seeing).
Many thanks for your work all this time!
In order to help us communicate, I wrote a script that built a data-dependency graph directly from the code and produced a diagram with Graphviz for the scientist to review. It helped us to catch a couple errors resulting from my misinterpretations and it gave the scientist confidence that the code accurately reflected his design.
https://github.com/Engelberg/ubergraph
Did you use something similar or roll your own?
In any case, your project sounds great and I am glad it was a success.
Thanks
1. For manual editing, dot -Tx11 foo.dot displays the graph in a window and updates it automatically whenever you save. So you can have an editor window open and the dot window and see the results of every tweak. For automatically generated graphs, this provides you with a window that you can update by overwriting a file with a new graph description.
2. Although HTML nodes are more versatile, shape=record is much easier, and sufficient for a pretty wide range of diagrams.
For doing quick stuff by hand if you don't have Graphviz installed, or if you're stuck on a Mac without X-Windows, there's https://graphviz.christine.website/. I like Graphviz a lot; as other people point out, TikZ is capable of a wider range of graphics, and also you can write programs to generate graphs in TikZ. But Graphviz is often enough.
A really simple graph like https://graphviz.christine.website/#digraph%20G%20%7Ba-%3E%7... is sometimes good enough without further tweaking, but for, e.g., the top diagram in https://github.com/kragen/dumpulse#dumpulse-an-embeddable-du..., you usually have to tweak stuff a bit.
subgraph types {
node [shape=square];
subgraph ints {
node [label=int];
int bool fd u32in die stride;
}
long int s32 u8 u32 -> ypix ywin;
...
I haven't ever been quite desperate enough to use m4 to generate Graphviz files, although clearly it is a good fit. My experiences with m4 are more in the nature of getting way too much rope to hang myself with and then having a terrible time debugging. I wrote an HTML-generating macro language in m4 in 1994 and have never stopped regretting it.dnl
I do agree about the Makefile. In Dumpulse I used the following Makefile rule:
%.png: %.dot
dot -Tpng < $< > $@
%.dot: %.dot.m4
m4 < $< > $@
define(`base_node', `width=1.75, height=1.0, fontname="Menlo", fontsize=13')
define(`file',`base_node, shape=note')
define(`directory',`base_node, shape=folder')
define(`important', `fontname="Menlo Italic"')
...
tarball [file, label="foo.tar"];
vardir [directory, label="/var"];
etcdir [directory, important, label="/etc"]; node [width=1.75, height=1.0, fontname="Menlo"];
subgraph files {
node [shape=note];
tarball [label="foo.tar"];
subgraph importantfiles {
node [fontname="Menlo Italic"];
...
}
}
subgraph dirs {
node [shape=folder];
vardir [label="/var"];
subgraph importantdirs {
node [fontname="Menlo Italic"];
etcdir [label="/etc"];
}
}
One huge advantage of Tikz is that you can use LaTeX equations natively. E.g. subscripts and superscripts in graphviz involve jumping through a few hoops, iirc.
That's exactly what "graph drawing" means [0]. Can tikz choose the position of the vertices itself or you have to specify the positions yourself? If it is you who chooses the positions, then tikz does not do "graph drawing".
And thankfully LuaLaTex was ready enough at that time, I can't imagine how bad it would've been to do this in pure Tex ...
Really cool project though, one of the few that made it outside of uni.
It's described in part IV of the pgf manual.
- Nicer, more modern looks (the original is too... LaTeX-y for my tastes)
- A different layout engine that uses straight arrows and 90 degree turns
So far I haven't been able to find any good replacements, although a few JS libraries come reasonably close.
Can you explain what do you mean by that, exactly? I think the looks of graphviz graphs are exceedingly beautiful and I cannot imagine a better looking way of drawing graphs (other than some minor technical issues with font kerning).
* Automatic edge placement can lead to visually ambiguous results and it is very hard to tweak it.
* Edge title placement engine is sort of naive and best solution is to not use edge titles at all.
* Bogus text wrapping. Text can leak outside of the node box.
* Default margins and padding lead to visual clutter.
It's not a property of the engine but of the graph itself:
It’s not a force directed graph, but does seem to me to look better. And since the output is javascript it can be styled and formatted as you like it.
OmniGraffle is one of the best commercial software packages every developed. Well worth a look if you are on macOS
I use it pretty often to illustrate state machines, system diagrams, or flowcharts.
Well, or I’ll reach for Inkscape.
I once made a script which would go through each subdirectory, open every Excel file, and document all dependencies, and output to a GraphViz diagram. This enabled me to move a file and know which files would break, absolutely vital for making changes in that environment.
It wasn't beautiful - VBA checking properties of tables, pivot tables, examining embedded VBA code searching for the network share URI - but it did work.
For safety, I copied 200 GB from the network drive locally. 6 months later the guy in IT was curious why imaging my replacement machine took so long.
--
Last week I documented how money moves around my various bank accounts. I needed to make sure all the bills get paid even though I'm switching banks. A quick GraphViz diagram is proving to be really handy.
- Dependency graph between chapters in the book: https://www.handsonscala.com/chapter-1-hands-on-scala.html#s...
- Tree-shaped `Vector` with structural sharing: https://www.handsonscala.com/chapter-4-scala-collections.htm...
- Singly-linked `List` with shared tails: https://www.handsonscala.com/chapter-4-scala-collections.htm...
- Collections class inheritance hierarchy: https://www.handsonscala.com/chapter-4-scala-collections.htm...
The book's home page above also has a nice actor-message-passing diagram rendered with Graphviz (might need to scroll down a bit).
My only preferred change to the default style is `node [shape=box width=0 height=0]`. Otherwise the nodes have tons of white space that makes the graph a lot more bulky than it really needs to be.
The automated layout engine gives me exactly what I want 90% of the time, and the last 10% is usually isn't too hard to coax into looking good via `rank=same`s or `constraint=false` or similar. In particular, the examples above required zero coaxing: I just specified the graph structure, and that's the layout that popped out.
I ended up doing a lot of prototyping in http://www.webgraphviz.com/ and before pasting the final DOT into my markdown file. IntelliJ has a Graphviz/DOT plugin, but it's not as seamless as using that web editor. The graphs definitely end up looking a lot more consistent than anything I could come up with dragging boxes around in microsoft office or google docs.
The graphs don't look fancy and design-y, but they're simple and straightforward and get the point across clearly.
I've sometimes been able to get surprisingly flashy results with cluster subgraphs with background colors.
Also, as a side note its funny that there is a lot of discussion (including Baez!) about theoretical maths, and one lone tweet about molecular symmetry.
We left that in when developing the <regex> module because it turned out to be very useful for debugging regular expressions, not just the regex implementation itself.
So if you have a huge diagram and want to find a node of interest, with a SVG, it's only a quick CTRL-F away.
We've found it quite useful for quant research, and in production it works nicely because you can serialize entire computation graph which gives an easy way to diagnose what failed and why in hundreds of interdependent computations. It's also useful for real-time displays, where you can bind market and UI inputs to nodes and calculated nodes back to the UI - some things you want to recalculate frequently, whereas some are slow and need to happen infrequently in the background.
[1] Github: https://github.com/janushendersonassetallocation/loman
[2] Docs: https://loman.readthedocs.io/en/latest/
[3] Examples: https://github.com/janushendersonassetallocation/loman/tree/...
1. Why the "cluster" word is needed on subgraph names? I am not making my project in English.
2. Why I can't move a whole subgraph to the "end" or "start" ? GViz attempts to make all graphs compact (regardless your settings) and thus tends to shove subgraphs in "random" places.
3. Why nodes sometimes leave their subgraph and end on another one? Even when the end result makes no sense? (My graph ended with several places where "a" and "c" is on one cluster and "b" is in a another, with lots of "U" shaped edges connecting then)
The official website has a bunch of broken links.
"Weight" attribute often is ignored...
And the list goes on.
Stack overflow is full of bizarre solutions to Graphviz behavior, for example minimum edge length (that for some reason is in inches despite most of the planet using mm)
More generally, Observable gives you a 'playground' where you can interactively see graphviz results: https://observablehq.com/@observablehq/graphviz
Another option - which for some applications is visually more appealing - is Elk: https://observablehq.com/@observablehq/notebook-visualizer-e...
There's a simple start notebook here: https://observablehq.com/@tmcw/elk
Btw. For those working with DOT I've always found it great to be able to copy-paste it right onto a webpage and see the results. My current favourite tool: https://dreampuf.github.io/GraphvizOnline/
https://github.com/reindeereffect/tools-from-blog/tree/maste...
I have a WIP version now using D3, and that one has been harder to manage (when the graph is too large you don't want to have it animate the layout on the fly). If you are curious, I used the same D3 code I have in the WIP to present a sitemap of my blog [2]
[1] https://github.com/rberenguel/bear-note-graph
[2] https://mostlymaths.net/sitemap/I've been pondering building a big interactive chart, like a decision tree or differential diagnosis chart, that maps goals/needs/problems to docs/examples/tools (for the Nix/NixOS/Nixpkgs ecosystem, but the basic concept applies to any sprawling ecosystem where discovery is hard).
I recently stumbled on https://github.com/mermaid-js/mermaid, which seems like it has an interaction model that could support what I have in mind (minus the question of whether there are performance cliffs that'd make it unsuitable).
If you considered mermaid while working on bear-note-graph, could you share the conclusions you came to?
Mermaid uses D3 under the scenes, so depending on your specifics it could be the best solution anyway, though. Performance wise, I'd expect it to be OK (D3 is pretty fast in most cases) although if there are any issues down the road, fixing them from such a high level library as mermaid could be daunting (it's "easier" to move down from D3 to paper.js or g.js or any other high performance canvas renderer if the case arises).
[0]: http://github.com/buserror/simavr [1]: https://github.com/buserror/simavr/blob/master/doc/simavr_ca...
I'm working on a Typescript Call Graph [0] and am leaning towards D3 for my visualization. But I hope I can generate something as pretty and useful as your link [1]
Are you aware of any similar tools for creating class diagrams from TS code?
I have a very rough draft of a graph working [1] (currently hardcoded with a specific function name) but I intend to make it interactive and to have more than one visualization of the files.
[0] https://github.com/Deskbot/TS-Call-Graph
[1] https://github.com/whyboris/TypeScript-Call-Graph/pull/1
See the diagram at https://niem.github.io/model/4.2/nc/ItemType/ . Hover over a term to see its definition. Click on a term to navigate to its diagram.
https://zwischenzugs.com/2017/12/18/project-management-as-co...
The OP page is a really great intro, I could have used it as a reference when I was doing that work.
However, I don't want to discount the value of Graphviz. Python has a little known class diagram generator built into pylint which uses Graphviz for its rendering and its pretty cool. You can find out just how bad your #BIGCORPS code architecture is just by checking a reasonably large project with Pylints class diagraming tool...
"https://www.plantuml.com/plantuml/img/" + encode(text);
Add this to any diagram to get the effect you want,
skinparam handwritten true
skinparam monochrome true
Notably, I don't want to free-design directional relationships that are counter intuitive to what people expect. Eg, if Service A calls Service B, does the arrow go to Service B? What about the response? I imagine there are a ton of little questions like this and I'd like to learn to write what people expect to see.
There are standards like UML, but I’ve never found those to be as useful to start with. It’s best to treat this as a “design problem”: first, answer the question: “what am I communicating”.
Then, maybe look into conventions - but often you’ll find less need for one “master UML diagram” and instead use many, smaller diagrams embedded within reference docs.
I feel like project reactor did a good job here: https://projectreactor.io/docs/core/release/api/reactor/core...
Personally I’d like to see more related to inheritance, but I’ll take what I can get. The tooling can be a pain to embed automatic diagrams in
One thing that I think was not mentioned in the article, are invisible nodes, which are really handy: https://stackoverflow.com/search?q=invisible+node+%5Bgraphvi...
Some times the existing layouts, ranks, clusters, etc, won't help you to produce the diagram you have in your mind. So instead of giving up and drawing it in draw.io or Inkspace (which I used to do), a co-worker showed me how he was using this technique in several of his diagrams.
https://quickchart.io/chart?cht=gv&chl=<DOT here>
https://quickchart.io/chart?cht=gv&chl=digraph%20MyGraph%20%7Bbegin%20-%3E%20end%7D
I use dot notation, and in spacemacs I can have a buffer with the the png file that reloads on save.
When debugging distributed enterprise systems, being able to type in the workflow as you go and then share your findings is awesome.
MIT-license code is here with screenshots:
Lots of interesting tools that use it being posted here, so here's a toy of mine: https://github.com/alexbrasetvik/graphspec
I've used it mostly to mix edge+node definitions in comments in asciidoc or code, and the non-nested nature makes it easy to compose different sources of edges and nodes.
(It's just a POC. If you know of something similar that's more actively developed, I'd be very interested)
If it helps to know how someone else thinks about it: I've been looking for a way to _compose_ or _import_ or _include_ a graph or subgraph defined in one file into multiple other graphs. I've started to assume I'll just need a preprocessor or template engine.
In my case, I'm interested in the feasibility of building a really big interactive chart, like a decision tree or differential diagnosis chart, to help users discover docs/examples/tools/tutorials etc. that can meet their needs or fix their problems, and I suspect a single-file approach just isn't going to scale well. (Composition/inclusion is a bit of an MVP focus, I guess. I think it would also be nice to be able to have a good way to generate versions of the graphs from multiple perspectives--like 1. a diagnosis chart that helps users identify a common formulation of their problem and its most-canonical solution, 2. a graph that helps users figure out what a command-line tool is used for by mapping each one to the problems they solve, 3. a graph that helps users who've run into trouble solving X with Y by mapping it to more known solutions and showing additional context on the pros/cons/limits of each.)
An aside: I noticed a TODO on your repo about supporting a comment syntax. Your existing syntax is very close to directives from reStructuredText (https://docutils.sourceforge.io/docs/ref/rst/restructuredtex...). Since it's already a Python project, I wonder if it makes sense to piggy-back on docutils, or at least borrow the comment syntax (https://docutils.sourceforge.io/docs/ref/rst/restructuredtex...).
(simple) Makefiles [0] XML [1] Json [2]
[0] https://github.com/TomConlin/MakefileViz [1] https://github.com/TomConlin/xpath2dot [2] https://github.com/TomConlin/json_to_paths
cd ~/projectdir pyan3 path/to/file/i/want.py --uses --no-defines --colored --grouped --annotated --dot > dotfile.dot dot -Tsvg dotfile.dot > diagram.svg
It's not free, however, though you can use the evaluation version indefinitely if you wanted to make your own graphs for personal use.
http://ysangkok.github.io/js-clrs-btree/btree.html#{%22actio...
Thank you, keep it as it is, it's just great!
Things I’d like is for example to draw a GCP cloud build file, or something like that.
What would be a good intermediate format for this? I’ll read an xml or yaml file into a python list of dicts and then loop through it and write ... Graphviz? Mermaid? Tikz?
What do you guys recommend?
print('digraph foo {')
# adj_list contains tuples of (parent node name, child node name)
for parent, child in adj_list:
print(f'{parent} -> {child}')
print('}')
I've done exactly this a few days ago to visualize the Linux build graph: https://q3k.org/u/73839114a0e5ee65002029892a069dd1b645a8f9f0...
With this I would be able to finish my data flow diagram out of a functional programming project. To describe in a visual way how the function calls are happening.
I’m all-in on Markdown + Github for writing, so working with text-driven diagrams is a natural fit.
I love text based tools but wanted to create something that users without technical backgrounds can use, I feel that a lot of existing tools are too complex for casual users.
Markdown forces me to focus on just the words, not the layout and fancy formatting. Mermaid does the same thing for diagrams: Anything I can draw with a pencil but can't express in Mermaid must be simplified or broken into separate sub-diagrams.
This would be terrible if I was trying to draw a diagram of the entire infrastructure of a modern SaaS company, but is actually good when I am trying to write a post explaining ideas: Multiple simple diagrams interspersed with text get the job done.
If you want to write something more general, then that would probably be much more complicated.
[1] https://github.com/suyjuris/obst/blob/feb8e766ce226ca1afe862...
https://ci.appveyor.com/project/ellson/graphviz-pl238/builds...
Not something I would trust out of the blue, but that's the best I see off of https://graphviz.org/download/
TikZ isn't fun, but at least it has the flexibility to get a great looking image at the end of the process. The theoretical simplicity advantages of Graphviz usually get worn down by the fact that the diagrams look bad. Use PowerPoint, and if code is needed bite the bullet and struggle through TikZ.
Maybe you are right, in today's decaying world. But any civilized person can see that tikz, latex and even graphviz are all ultimately hipster tools. Real men of course use pic and troff.
Isn't this the primary problem with TikZ? It makes you do all the time consuming layout stuff by hand. With Graphviz you just chuck your data at it and get results instantly. Sure it won't be eye-optimized, but it also didn't require work on your part, nor will it require more work on your part when your data changes.