Penrose looks great. Beautiful diagrams and readable code. What are some other text-driven diagramming languages / tools? I know of:
https://mermaid.js.org/ https://graphviz.org/ https://flowchart.fun/
Penrose looks great. Beautiful diagrams and readable code. What are some other text-driven diagramming languages / tools? I know of:
https://mermaid.js.org/ https://graphviz.org/ https://flowchart.fun/
Is this actually affiliated with Roger Penrose? Seems extraordinarily rude to use his name otherwise. Was his permission sought? In fact, this may be seen as "passing off" in English law.
You can say the same thing to Haskell, Curry, Ada or (more or less) Python as well.
Neither Ada Lovelace nor Haskell Curry is still alive. And Python is in a different category.
It's one thing to use the name of a historical figure, quite another to use the recognisable mark of a living person.
Of course, it could all be being done with endorsement, in which case, my comment is invalid, but otherwise it's incredibly rude and a borderline civil tort.
I also believe that passing off requires a demonstration of a substantial amount of probable damage in the future. The mere existence of a graphical software named Penrose can't do much harm. (If you name a malware after Penrose, that may be the case though.)
What about if the software is faulty?
https://en.wikipedia.org/wiki/Penrose_(surname)
https://en.wikipedia.org/wiki/Penrose
There's enough other Penroses to choose from; sir Roger doesn't own the (sur)name.
Yes, but his name is the obvious one. If I say "Dyson" and you're in the UK, you think of vacuums, "Penrose" and you think of Mathematical Physics.
I doubt this would come to court. The main problem is the temerity of using the name of a living person in this way. But, they could have sought permission, in which case, all is well.
If I say "Dyson" and you're in the UK, you think of
Mathematical Physics :)
The CLI tool which turns their code into pictures is named "roger" as well.
At first I thought that he actually had something to do with it!
To simply borrow his name is indeed, I think, in pretty poor taste. The trend of naming unrelated products after scientists and inventors (from "Tesla" and "Nikola," to Theranos' "Edison," to "Ada Lovelace," and so forth,) has become unbelievably low-effort and cringe.
Especially because Roger Penrose is still alive.
Not affiliated with Roger Penrose; we often hear this question about our project name: https://news.ycombinator.com/item?id=36749211 As Nimo mentioned in a response to that linked thread, we're open to suggestions for alternate names if a different one would better suit the project!
List of things named after Roger Penrose:
https://en.wikipedia.org/wiki/List_of_things_named_after_Rog...
I have always found "diagrams as code" tools to be limiting. There will be that scenario where the generated diagram is not what you expected. The flexibility you get by using code is outweighed by these limiting scenarios. I switched to Mermaid.js but ended up switching back to normal diagramming tools because of these limitations.
What’s a “normal” tool in this case?
Adobe Illustrator and more importantly, a good graphic designer
Ew, proprietary software that works only on a proprietary operating system.
Inkscape for WYSIWYG or Latex figure package.
I think the point of those tools is to abandon the idea that one needs full say over every aspect of a diagram. Or even that all diagrams must be done in one tool - the most flexible one. Having more version-controlled documentation next to code is only a plus to me.
Right; there seem to be cross-cutting benefits and drawbacks for declarative text-based specification of diagrams vs direct manipulation. One research project exploring this tension is Sketch-n-Sketch https://ravichugh.github.io/sketch-n-sketch/ which tries to combine both together in a single system via bidirectional programming. We've been wanting to explore similar ideas more in Penrose, but it's definitely challenging.
Barring bidirectionality, another possibility could just be to make it easier to integrate Penrose into existing workflows; for instance, if you're writing a LaTeX document then it'd be nice to have a package for Penrose diagrams rather than having to switch back and forth between your LaTeX editing environment and the Penrose editor.
But then, let's say you make a Penrose diagram and you want to tweak it in Illustrator to make it look better, because as you mentioned, the text-based input modality of Penrose is limited. So we could try to make it smoother to export Penrose diagrams to put in Illustrator. You edit the diagram and add it to your LaTeX document. But now, you decide you want to make a tweak to the original diagram by modifying the Penrose source code. This obliterates any changes you made in Illustrator, so now you have to manually repeat the tweaks you already made.
I'm not really sure what the best solution is... it seems hard to have a good workflow story without either being entirely text-based, supporting bidirectionality, or forcing a lot of repetitive manual rework when edits are made.
Mermaid.js is pretty great, but I agree you usually get to something that doesn't express nicely. I was hoping to find a graph language I might be able to tweak into a DSL. Mermaid is easy to onboard and get things done with but then it didn't quite cover what I wanted to achieve.
Yes, just use Excalidraw to sketch what you really meant. Limited styles, limited colors, no burden. Sketch easy and go back to work...
I also find them limiting if I want to diagram something from my brain. However I found them splendid for drawing logs, the internal state of my software, or other data. Sometimes it's great to just printf() stuff in a format that can be drawn.
Same here. My problem is that I consider these diagrams to be low value documentation gimmick. They are nice but not really worth spending a lot of time on.
The promise of text driven diagrams is that you don't spend a lot of time on them. Which is nice. But of course then you run in a brick wall when it's not that nice to look at and you want to fix it and it turns out that there are a lot of things that you just can't do with them.
And of course the real problem is that if it's simple, it probably doesn't need a diagram at all (or it will just state the bleeding obvious). And if it's not simple, the diagram is probably going to be a PITA to get right no matter what tool you use. Especially if you are not sure what the diagram is going to be exactly. These tools are almost universally horrible for sketching stuff out quickly because you get sucked into doing a depth first let's specify everything and the kitchen sink mode. And then you get it wrong and it's a pain to change everything. My brain just works a couple of orders of magnitude faster than most of these tools and I get frustrated with just spending ages on the stuff I already understand (i.e. the stuff that I already know the design for) vs. the stuff I'm still unsure about (i.e. the hard to diagram stuff). As a design tool these are horrible tools. As a documentation tool they are mostly redundant.
I default to just skip diagramming it entirely. I don't enjoy it. I don't believe in it. I usually have better things to do. I find the output is write only: nobody ever looks at it or appreciates it beyond a "ah cool, we have stuff". I've found extremely few counter examples in my decades long career of diagrams that actually add value and are widely appreciated. It's mostly just endless nonsense of trivial amounts of boxes and arrows connected in mostly unsurprising and obvious ways.
If I need something quick and dirty, whiteboards are much nicer. And you can just take a photo and call it a day. And in my experience, nobody ever looks at those either. Those photos have very little value. You draw something on a whiteboard, you use it as a talking point, and then you wipe the whiteboard. Photo optional. Do it if it makes you feel good. You could spend a lot of time translating those into a pretty diagrams. But that sounds like the kind of monkey work that somebody should automate and that you shouldn't be spending time on.
Our team uses diagrams-as-code (plantUML) to document processes, interactions, and state machines. Because our use case is functional, they don't have to look good - just good enough and understandable.
Some reasons on why we still use them: (1) They're source-control friendly. And (2) in some cases, we could generate them directly from code. We deal with a lot of state machines on embedded devices, and whenever management asks for "documentation", we run a transformer script that consumes the source code and spits out state diagrams that would placate them.
A lot of replies here are missing the key idea behind Penrose: that the "substance" and "style" of any mathematical diagram are separable. For example, the "substance" of a diagram might be a collection of sets with known subset relationships:
Set A, B, C
IsSubset(B, A)
IsSubset(C, A)
That same substance can then be rendered in many different styles, e.g. as a Venn diagram or as a tree diagram (substance vs. style is a lot like HTML vs. CSS). Importantly, Penrose's vision is that experts will author libraries of domains and styles, and end-users need only express the substance of their diagrams (i.e. the three lines of code above).
The second beautiful idea in Penrose is that diagram generation is expressed as a constrained optimization problem. This lets you easily experiment with layouts by writing constraints and sampling a variety of potential diagrams via stochastic search.
These two ideas set Penrose apart from most other diagram software out there. I really hope it gains wider adoption. Give it a try!
substance vs. style is a lot like HTML vs. CSS
Given the popularity of frameworks like TailwindCSS, it seems that people here don’t understand the advantage of separating HTML and CSS either, so I’m not sure if this analogy is helpful…
I think graphs are quite different from HTML. The "substance" in html is far too chaotic compared to the structured data for the graphs.
The substance in HTML is literally an annotated rooted tree (a subset of the complexity afforded by a graph).
The comparison to CSS for separating style vs (semantic) data was also the first thing that came to mind for me.
Or that they understand it just fine, but don't think it has a particular advantage worth the extra complexity tradeoff.
This makes sense!
However, as I've commented on other software like this, why are none of the examples style-free Venn diagrams? That is, black on white 3 circle overlapping each other in pairs with a single shared triangle intersection at center? I apologize if one of these is already present. Style has little value there since it may obscure reality.
I think upset diagram would be even better. https://upset.app/
Yeah, exactly! Also, possibly a third idea of Penrose is the way the selector matching blocks in the Style language can be used to construct the constrained optimization problem as you mention. This is inspired by CSS, but there are a lot of differences too.
With regard to the separation of substance and style, I think that idea can be profitably applied in other settings as well. For instance, Graphviz, tikz-cd, and Mermaid are all fairly declarative. But also, I feel like this idea could be even more profitably applied by building a diagramming library inside of a general-purpose programming language like Python.
For instance, take a look at the Substance code for our quaternion multiplication table example: https://penrose.cs.cmu.edu/try/?examples=group-theory/quater... It's about 83 lines of code. In contrast, by really taking the separation idea seriously, one can write a generic Python function for creating Cayley table diagrams, after which that particular example only takes about 5 lines of code: https://github.com/samestep/diagrams/blob/750f7a544635a6fd9f...
Importantly, Penrose's vision is that experts will author libraries of domains and styles, and end-users need only express the substance of their diagrams (i.e. the three lines of code above).
In that case, would it be a good idea to start the tutorial with some predefined domains and styles? Part of the intimidation factor here is not just the programming language, but also the abstraction one is faced with using and trying to understand before seeing their first picture. If the goal is to have predefined libraries, then why not start with pre-defined domains and styles and first teach people only how to do the substance, and leave domain & style definitions for advanced tutorials?
What are the advantages of making everything a constrained optimization problem? I like the idea that I can experiment with layouts sometimes, but I don’t really want a random diagram all the time. I realize it doesn’t have to be random, I have the choice to explicitly pin things down, but that takes extra work with Penrose, I’m asking why random is the default. Having done a lot of technical diagramming in papers and books, I would expect to almost always pin things down, and maybe once in a while free up a few elements to move around. Letting the whole thing go random is rarely if ever something I’d choose, especially near the end of making a more complicated diagram. What I’m wondering is whether this design is good for experts, and why, or if it mostly helps beginners.
I recently discovered GeoGebra, and would love to hear some compare & contrast notes. It doesn’t use constrained optimization, and it does separate style from substance as needed, but in a different way than Penrose. The important feature seems to be that it lets you define the relationships between elements of the diagram, so if you move a point, the line attached follows, and then parallel and perpendicular lines attached follow, and so on, everything in the diagram becomes responsive to adapt to the change while letting you put something right where you want it. This way I still get to experiment with layouts, but nothing in the construction needs to be random. Most of the style definitions are point & click GUI actions. Are there reasons that workflow is inferior to Penrose?
This is the type of thing I want to use AI for. Beautiful tool, but this looks daunting.
I've used ChatGPT to generate chart wireframes in Mermaid. Basically 'create a mermaid chart for the whole year'.
Not exactly the same as data viz, but it worked for my use case, and cut out a heap of stuffing around and googling.
Yeap there is ChatGPT for this.
It would be interesting to see someone like Wes Bos build an LLM from end to his graph packages.
Yeah, definitely a fair critique. Actually, we have been researching the usage of LLMs to generate Penrose diagrams! We presented a poster on this at SPLASH 2023 in October: https://2023.splashcon.org/details/splash-2023-Posters/14/Ge... I'm not sure if Rijul updated his poster before the conference, but here's a photo of it from a different poster session in August (hopefully this Discord media link works): https://cdn.discordapp.com/attachments/1136758988751503381/1...
Maybe if AI learns enough graphing, it can figure out why the Amish live longer, Could be huge for humanity.
These days I just use ChatGPT for my LaTeX documents. Works great.
The caffeine example is laughable. https://penrose.cs.cmu.edu/try/?examples=structural-formula/...
What is laughable about it?
The displayed structure has nothing to do with how it really looks like [0].
It seems they just used a naive algorithm for automatic atom placement with a goal to minimize overlaps between the atoms.
That naive algorithm isn't even good since it can clearly be laid out without any edge crossings.
It's completely, utterly wrong. To point out just one problem, the two central rings should be planar. Good thing they picked this one to show in the landing page carousel. That example was enough for me to close the page again.
Yeah :( To be honest, I think we got a bit overeager about this one, since none of us on the project are chemistry experts. At least for the front page, we should probably replace that with a different diagram from our registry.
I think this is actually a fairly deep issue with our approach where we try to express everything in terms of numerical optimization, pairwise energies on shapes, etc. Especially since Style is not a Turing-complete programming language and also doesn't support calling out to existing libraries written in, e.g., JavaScript, there isn't a way to do actually-correct layout of the caffeine molecule, so instead we do the "lazy" thing and just try to make the atoms not overlap. To anyone who actually knows what a caffeine molecule looks like, obviously this looks ridiculous.
In the same vein as the other HN comment about separation of substance and style, I think we could do a much better job on chemistry diagrams by actually placing the atoms where they should be in 3D space, then projecting onto a 2D SVG diagram. To illustrate what I mean, consider this other diagram in our registry, showing a methane combustion reaction: https://penrose.cs.cmu.edu/try/?examples=structural-formula/...
As you can see on that example, the methane molecule looks weird because all the bonds are drawn "below" the carbon atom, and the carbon dioxide molecule is all bent out of shape. In contrast, by just writing a bit of Python code, you can make the diagram both easier to specify https://github.com/samestep/diagrams/blob/3d7fe855b3a9634d17... (compared to the 70-line Penrose Substance file) and also more correct: https://raw.githubusercontent.com/samestep/diagrams/2c8fb334...
I think that a general-purpose text-based diagramming tool needs to support a variety of different layout engines.
Does this require a browser (or browser engine) for rendering (like Mermaid.js)? Or can it render (esp. to SVG) without a browser (like Graphviz)?
Penrose appears to be written in TypeScript, so my assumption is that it needs a browser.
It looks like the CLI tool (@penrose/roger) just depends on a few npm packages with no browser engine and supports SVG export.
Looks like that depends on the “canvas” package, which appears to use Cairo/Pango for text, similar to Graphviz.
This is great! I wanted something I could compile (the native code) to WebAssembly for use in a Deno-based SSG, and this looks promising.
roger is a command-line tool for generating diagrams from Penrose trios and serving local files to a local editor.
I think they were working on an Obsidian plug-in at some point, and got some primitive functionality up, but don’t know what the state of that is currently.
So possible rendering point, though I guess falls under browser engine
Oh, I thought these would be to create spacetime diagrams. As in Penrose Diagrams: https://en.wikipedia.org/wiki/Penrose_diagram
For Penrose spacetime diagrams I found xhorizon [1] and einsteinpy [2]
1: https://github.com/xh-diagrams/xhorizon
2: https://github.com/einsteinpy/einsteinpy/issues/480
There's a 'spacetime' GH topic: https://github.com/topics/spacetime
/? spacetime diagrams site:github.com : https://www.google.com/search?q=spacetime+diagrams+site%3Agi...
Also there there's
Penrose graphical notation aka Tensor Diagrams: https://en.wikipedia.org/wiki/Penrose_graphical_notation :
In mathematics and physics, Penrose graphical notation or tensor diagram notation is a (usually handwritten) visual depiction of multilinear functions or tensors proposed by Roger Penrose in 1971.[1] A diagram in the notation consists of several shapes linked together by lines.
Penrose graphical notation (tensor diagram notation) of a matrix product state of five particles
The notation widely appears in modern quantum theory, particularly in matrix product states and quantum circuits. In particular, Categorical quantum mechanics which includes ZX-calculus is a fully comprehensive reformulation of quantum theory in terms of Penrose diagrams, and is now widely used in quantum industry.
The notation has been studied extensively by Predrag Cvitanović, who used it, along with Feynman's diagrams and other related notations in developing "birdtracks", a group-theoretical diagram to classify the classical Lie groups.[2] Penrose's notation has also been generalized using representation theory to spin networks in physics, and with the presence of matrix groups to trace diagrams in linear algebra.
(From a post about Tensor Networks this week: https://news.ycombinator.com/item?id=38922467 )
There are multiple different things commonly called "Penrose Diagrams" he invented a lot of cool stuff. Here's another example
How do I see the notation? The diagrams sure look beautiful, but I must be missing something obvious… Thanks!
I just noticed there are 3 tabs for a diagram - substance style domain.
This seems too hard to use by person, but I look forward to seeing this plugged into chatgpt
It’s sad how artificial “intelligence” is making people immediately give up at just the thought of having to learn something.
On the header, "Learn Penrose" and "Documentation" seem to link to pages with what you want.
I failed to see how it is "plain text". The code in all three tabs looks like, well, code to me.
Code is plain text, as opposed to binary for example
It's plain text in the generally accepted definition [1] of the term. It's not a binary file that requires special software to author. It's possible to read and write the files in a text editor.
"Plain text" does not imply "natural language description", though I can see the term could be confusing.
Is there any tool to make animated diagrams by declaring them in code?
You can do animations with PGF/tikz, the problem is you can do everything with PGF/tikz and so the whole thing is a bit of a chaotic mess. The diagrams are beautiful but the code makes me very sad.
Processing? https://processing.org/
Or do you specifically mean mathematical diagrams and a DSL specifically for that?
What's wrong with Pic? Been around for decades.
Pic is wonderful! I think what's lacking the most is modern tool integration. It more or less requires troff which is itself somewhat deprecated. I've always thought that extracting pic as standalone tool with ~modern output objects would be a nice project for once I quit being lazy :)
That sounds a lot like https://pikchr.org/.
Thats pretty cool. Ran out of memory on my browser though.
Yeah, this is unfortunately a big pain point right now. Every time you click "compile" we allocate a new Wasm memory to use for running the optimizer. But garbage collectors in current browsers get confused when there are lots of these large Wasm memories floating around; I'm not entirely sure why, but I think it's because the GC engine doesn't correctly conceptualize how big the Wasm memories actually are, so they don't try to collect them as aggressively as they should. We're currently seeing if we can alleviate this issue by reusing the Wasm memory from compile to compile, but that's a bit tricky in the presence of concurrency (we're also trying to move computation from the main thread into a web worker). In future versions, we might try to sidestep this issue by just using the new Wasm GC that landed in Chrome recently, but for that we'd probably have to wait a bit longer until it's also supported in, e.g., mobile Safari.
I did take a look at the gallery. Penrose is no alternative for the majority of diagrams I can do with mermaid or D2, right? It's more about "mathematical" diagrams instead of ER, UML or EPKs right?
Yes, I think it’s more of an alternative to MetaPost.
That said, I’m intrigued how these two compare?
I feel like a lot of people are not aware of the tools that are available and they keep building the same thing over and over... or, the other amazing thing missing a feature and this thing now has this feature but lacks completeness of other etc, etc...
Which means we are doing two things bad: composability and informing us.
What do you think?
What tools were already available for this?
Related:
CMU’s ‘Penrose’ Turns Complex Math Notations into Illustrative Diagrams (2020) - https://news.ycombinator.com/item?id=31632841 - June 2022 (1 comment)
Penrose: From mathematical notation to beautiful diagrams - https://news.ycombinator.com/item?id=29674986 - Dec 2021 (21 comments)
CMU’s ‘Penrose’ Turns Complex Math Notations into Illustrative Diagrams - https://news.ycombinator.com/item?id=23430282 - June 2020 (48 comments)
Penrose: From mathematical notation to beautiful diagrams - https://news.ycombinator.com/item?id=23387687 - June 2020 (19 comments)
Penrose: Create diagrams by typing mathematical notation in plain text - https://news.ycombinator.com/item?id=23130646 - May 2020 (30 comments)
Penrose: Create diagrams by typing mathematical notation in plain text - https://news.ycombinator.com/item?id=20036776 - May 2019 (39 comments)
Penrose: create diagrams by typing mathematical notation in plain text - https://news.ycombinator.com/item?id=18178230 - Oct 2018 (48 comments)
Also our Penrose 3.0 release post from July 2023: https://news.ycombinator.com/item?id=36746047
My MetaPost-ed head hurts a bit while looking at three different files to generate one drawing - can't help it, MetaPost feels like writing in prose. Can't tell if they share the same syntax, but it's interesting that most of it looks like CSS with superpowers
True! Splitting every single diagram into three files feels quite heavy. For Penrose version 4.0, we're planning to combine all our DSLs into one so that they can be mixed together in one file.
how does Penrose compare to GraphViz and its "dot" syntax?
This feels like the LaTeX version of Mermaid.js [0]. I can do anything with it, but I gotta learn a lot of new syntax. So, really cool! Gonna have to dig into this.
CG hipsters have been enjoying Keenan Crane's diagrams long before he made a proper tool for it :)
Based on its UI, is there some physics simulation and procedural generation involved? What does that slider represent?
I looked at a random example [1], and this needs heavy rework if it needs to work as an example. I'm scared to look at other examples.
- The second half of the 900 line style file is commented out code. Ugh. Should I be learning from examples or reviewing code when I read this?
- The end if the style file define/replaces coordinates which are not defined in the substance file. Why? Isn't it the point that a substance file has all the data? All coordinates and whatnot?
Overall, it does look cool. I like the idea of distinct substance/style/domain files. I probably won't give it a spin until it looks rock solid from a distance.
[1]: https://penrose.cs.cmu.edu/try/?examples=walk-on-spheres/Sig...
Nice. I often use pgf tikz but the syntax is very convoluted. I like how Penrose separate substance from the rest.
great look, decent code.
examples at https://penrose.cs.cmu.edu/try/?examples each example has three tabs:
.substance => data
.style => low level 2d vector art
.domain => data ranges
forall repeatable Element a; Element b; Element c
where IsProduct( a, b, c )
{
shape productShape = Rectangle {
center: ( b.u, c.v )
width: a.width - global.boxPadding
height: a.height - global.boxPadding
cornerRadius: 2.0
fillColor: a.boxColor
}
shape productText = Equation {
string: a.label
center: productShape.center
fontSize: "8px"
fillColor: a.labelColor
}
}Absolutely no idea how it works. How do you control the position of points without inputting coordinates?
For example, how does one make an image similar to this? https://math.stackexchange.com/questions/1109967/problem-inv...
Mermaid has been nice to use. It's very much in a beta phase still, with some odd quirks and missing documentation. I'm excited to see where it will be in a year's time.
The fact it's supported natively by GitHub gives it a huge advantage over the others.
In GitLab too
I assume the future is an LLM where you specify everything in plain english...
yup but ... right now things are in a bit of a primitive state.
i have tried a lot of stuff with the ChatGPT Wolfram integration and it just fails all kinds of ways. its really cool when it works, but a lot of time it just gets really confused and cannot do basic things like "make that line black instead of red"
it already works really well with gpt4+mermaid.
D2 is my current favorite: https://github.com/terrastruct/d2
D2 is scripting language primarily for non-free back-end. Opensource back-ends give inferior results with it.
Here's a page listing several more: https://text-to-diagram.com/
This page was made by the company behind D2, so not exactly an unbiased source.
For quick flowchart I use https://www.websequencediagrams.com/
https://www.plantuml.com/
Asymptote[0] is excellent IME.
[0] https://asymptote.sourceforge.io/gallery/
D2 Lang is a nice one:
https://d2lang.com/
MetaPost. Shameless plug for my own introduction page: http://www.learnmetapost.com
Another approach may be https://google.github.io/typograms/
Anyway, I think that mermaid.js have an advantage there in a lot of environments as it is supported by a lot of markdown renderers, I would like that ChatGPT one does that too.
https://sequencediagram.org/
http://pikchr.org/ is great
Tikz