Penrose – Create diagrams by typing notation in plain text
penrose.cs.cmu.edu
penrose.cs.cmu.edu
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!
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…
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.
Thanks so much for sharing upset given the context of my question!
Their explication of Venn diagrams is exemplary and compelling, particularly the banana and the way the Venn is elucidated and visualized through the accompanying meta-detail, for lack of a better phrase.
I cannot thank you enough. This will literally propel much of my work on data going forward.
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...
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?
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)
https://mermaid.js.org/ https://graphviz.org/ https://flowchart.fun/
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.
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"
- 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...
Not exactly the same as data viz, but it worked for my use case, and cut out a heap of stuffing around and googling.
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
heavy lifting done by .style, random fragment: 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
}
}"Plain text" does not imply "natural language description", though I can see the term could be confusing.
Penrose appears to be written in TypeScript, so my assumption is that it needs a browser.
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.
So possible rendering point, though I guess falls under browser engine
This seems too hard to use by person, but I look forward to seeing this plugged into chatgpt
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...
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 )
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.
https://en.wikipedia.org/wiki/Penrose
There's enough other Penroses to choose from; sir Roger doesn't own the (sur)name.
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.
Mathematical Physics :)
As a British national, I always called that category of cleaning device "hoovers": https://en.wikipedia.org/wiki/The_Hoover_Company
I'm sufficiently nerdy to think "Sphere" whenever the name Dyson comes up, but I'm sure that to most normal people even "Dyson sphere" will mean one of these rather than a K2 civilisation: https://www.dyson.co.uk/vacuum-cleaners/uprights/ball-animal...
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.
https://en.wikipedia.org/wiki/List_of_things_named_after_Rog...
Especially given the clear linkage with code references: https://github.com/search?q=repo%3Apenrose%2Fpenrose%20roger... - it seems more personal than Diagram/Graphical Notation/Tiling/Stairs/Triangle etc.
For example, how does one make an image similar to this? https://math.stackexchange.com/questions/1109967/problem-inv...
Which means we are doing two things bad: composability and informing us.
What do you think?
That said, I’m intrigued how these two compare?
Or do you specifically mean mathematical diagrams and a DSL specifically for that?
It seems they just used a naive algorithm for automatic atom placement with a goal to minimize overlaps between the atoms.
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.
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.
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.
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.