Our great sponsors
-
mermaid
Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
DFB
A mini development environment for developing and troubleshooting the Cypress PSoC Digital Filter Block
-
Joplin
Joplin - the secure note taking and to-do app with synchronisation capabilities for Windows, macOS, Linux, Android and iOS.
-
KeenWrite
Discontinued Free, open-source, cross-platform desktop Markdown text editor with live preview, string interpolation, and math.
-
graphme
A Elixir Mix Task to generate a relationship graph of your project modules using the DOT language
-
sfgrantreport
Discontinued Snowflake Grant Report offers a way of visualizing role hierarchy and rapid diagnosis of as-is permissions, giving customers insight without difficult discovery.
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
I use graphviz to get a quick postgresql schema overview (good for small to medium databases)
https://github.com/enter-haken/schema
Dendron[1] note taking extension for VS Code has Mermaid support builtin to its markdown renderer as well.
That's how I recently found that Mermaid can't handle graphs with no flow https://github.com/mermaid-js/mermaid/issues/1227
[1] https://wiki.dendron.so/notes/ba97866b-889f-4ac6-86e7-bb2d97...
I used to generate most of my diagrams in PlantUML[0], but recently found that my not-taking app, Joplin[1], has Mermaid built in.
PlantUML has the benefit that you can include it in your builds, e.g. parse any .plantuml files in `make doc` or in your CI.
But I like Mermaid more: its easier to read, less quirky and easily integratable in the markdown (or note-taking apps) without the need for extra build steps.
[0] https://plantuml.com/
A fast 3D alternative for visualizing large graphs is Graphia: https://github.com/graphia-app/graphia https://graphia.app However, it's currently suffering from the Qt switch from 5 to 6.
Regarding Graphviz itself, I wonder why is there no special layout logic for planar graphs? They can be recognized and embedded on the plane in linear time without intersecting edges, so it would be very nice if some of the Graphviz tools actually did that.
A recent set of minimal graph coloring Graphviz visualizations of mine: https://gitlab.com/nsajko/example_optimally_colored_graphs
Not sure what you mean, you can install it other ways, and the dist is packaged up in a variety of ways. (https://github.com/cytoscape/cytoscape.js)
"Very poor" seems harsh, but, yes, it hurts us, too. (That, and text with slightly-off baselines.)
The relevant code starts around https://gitlab.com/graphviz/graphviz/-/blob/main/lib/common/... If this isn't right, maybe somebody can figure out why. Perhaps the loop stops sometimes on the wrong side of the boundary? Anyway, it's equally possible that when the endpoint coord is handed off to a lower level driver, the arrowhead mitering is wrong. There is no question there was once upon time explicit code to try to cope with this problem, at least in the native PSgen, but I can't find it now. Maybe it wore away as waves of open source development washed over it, along with static tables for a bunch of "standard" PS fonts.
For more background, see for example https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/s...
In the worst case, this has to be debugged for all the drivers in https://gitlab.com/graphviz/graphviz/-/tree/main/plugin
No doubt there are more details if anyone can remember them.
I used it for visualization on my project https://github.com/srce/roadmap/blob/master/stacks/java/data...
.XML -> Python script -> .DOT -> Graphviz -> *.SVG
It's very useful and probably the best example of using DOT language, unfortunately.
Graphviz is one of my favorite tools. I use it for most of my diagraming https://github.com/dylanowen/mdbook-graphviz and I use it as debugging output when I'm working through graph problems.
Graphviz made it really easy for me to plot dependencies in Go data structures! After I put together a lexer, Graphviz took care of all the difficult work of making sense of the data: https://github.com/davidschlachter/embedded-struct-visualize...
Graphviz made it really easy for me to plot dependencies in Go data structures! After I put together a lexer, Graphviz took care of all the difficult work of making sense of the data: https://github.com/davidschlachter/embedded-struct-visualize...
I've used GraphViz a number of times and highly recommend it as a standard tool on your belt. Having a stand-alone executable that can export to SVG is great.
The most complex thing I've done with it [1]: a tool (MIT-license) that builds diagrams of the data and addressing pipeline for a DSP processor, and lets one 'scrub through' the assembler code frame by frame and see the values propagate through the blocks.
Also PlantUML [2] uses it for most diagrams.
Getting layout and positioning the way you want can be tricky but is usually achievable with patience and hidden objects.
[1] https://github.com/paphillips/DFB
A fast 3D alternative for visualizing large graphs is Graphia: https://github.com/graphia-app/graphia https://graphia.app However, it's currently suffering from the Qt switch from 5 to 6.
Regarding Graphviz itself, I wonder why is there no special layout logic for planar graphs? They can be recognized and embedded on the plane in linear time without intersecting edges, so it would be very nice if some of the Graphviz tools actually did that.
A recent set of minimal graph coloring Graphviz visualizations of mine: https://gitlab.com/nsajko/example_optimally_colored_graphs
I maintain an open-source project [1] that uses graphs to model data. I wanted to make my project as accessible as possible, so Graphviz was perfect since it's dead-simple to install and use on all major OS platforms.
[1] https://github.com/nccgroup/PMapper
Way fewer features but probably easier to use ~> https://flowchart.fun
Exports to SVG, PNG, JPG
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.
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.
PSGraph is a PowerShell module to dynamically generate dot files.
I used it (with a various degree of success) to plot some diagrams for my personal usage.
https://github.com/KevinMarquette/PSGraph
There's viz.js. I use it at objectplayground.com to visualize JavaScript object layouts. This file shows how I use it:
https://github.com/jamesshore/object_playground/blob/master/...
In a similar vein there is Schemaspy[1]. It generates a static documentation website for your DB, which also uses GraphViz to build ER diagrams.
[1] https://github.com/schemaspy/schemaspy
My text editor, KeenWrite[0] renders Graphviz diagrams in near real-time. KeenWrite extends the functionality a little by allowing the use of variables inside the diagrams. In the example diagram[1], the 350 is a variable and its value is shown near the top.
[0]: https://github.com/DaveJarvis/keenwrite
[1]: https://i.ibb.co/CVfsJDh/hacker-news.png
An alternative to dagre-d3 is d3-dag: https://github.com/erikbrinkman/d3-dag
I've had good success with cytoscapejs as well, integrating with react so the graph will animate layout on transition. I use elk, which is apparently superior to sugiyama (the algorithm graphviz uses for force-directed dag layouts).
Graphviz was excellent for documenting my sailboat's electrical, plumbing, and data networks: https://github.com/aaronaxvig/hunter-376-docs
Odds are slim that its future owner will have the skills to work with such a resource. But I did leave a couple printouts on the boat before leaving it!
I love using Graphviz to document projects, because its just a text file that I can keep with the project on git.
I also used it to make a small tool to generate the relationships of Elixir's modules: https://github.com/shiryel/graphme
Note that the page is simply a wrapper of Graph::Easy [1], so nothing technically interesting to see in the repo - it just passes the HTML input to a command-line tool and prints the result.
You can either use Graph::Easy directly on the command-line or you can use python to make an HTTP request to my page (example is shown in the README of [0]).
[0] https://github.com/ggerganov/dot-to-ascii
[1] https://metacpan.org/pod/Graph::Easy
Autogenerated database documentation is often pretty hit and miss but tbls[1] does a pretty good job in that space. Especially when you comment on your tables, fields, views, functions etc (which is a good habit anyway!) the output is quite useful
[1] https://github.com/k1LoW/tbls
I love Graphviz, here's a citation graph tool I build with it:
https://github.com/shanedrabing/gref
will generate a real-time network graph using the Graphviz DOT language. It's a cool feature that I find quite useful.
[0] https://tinc-vpn.org/
I love graphviz!!!
Used it as a helper in my first project at Snowflake (role hierarchy layout) https://github.com/Snowflake-Labs/sfgrantreport and won a nice hacking award for it. Then the product saw it and folded what I made into the main UI.
Huge props to the graphviz for making it easy to draw my ideas from whiteboard into svg/pdf/png!
Haven't tried it yet, but this looks pretty spot on: https://github.com/gpotter2/sketchviz