Penrose – Create diagrams by typing notation in plain text

[hardmath123]

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!

[xigoi]

> 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…

[dahart]

> 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?

[sestep]

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...

[davidthewatson]

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.

[dang]

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)

[sestep]

Also our Penrose 3.0 release post from July 2023: https://news.ycombinator.com/item?id=36746047

[sstanfie]

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/

[thusjustin]

D2 is my current favorite: https://github.com/terrastruct/d2

[adaszko]

http://pikchr.org/ is great

[syndicatedjelly]

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.

[johanvts]

MetaPost. Shameless plug for my own introduction page: http://www.learnmetapost.com

[zczc]

https://www.plantuml.com/

[gmuslera]

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.

[asah]

I assume the future is an LLM where you specify everything in plain english...

[abdullahkhalids]

Tikz

[shakow]

Asymptote[0] is excellent IME.

[0] https://asymptote.sourceforge.io/gallery/

[zie1ony]

For quick flowchart I use https://www.websequencediagrams.com/

[sestep]

Here's a page listing several more: https://text-to-diagram.com/

[datashaman]

https://sequencediagram.org/

[seized]

D2 Lang is a nice one:

https://d2lang.com/

[laserbeam]

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...

[sanjeetsuhag]

This is the type of thing I want to use AI for. Beautiful tool, but this looks daunting.

[fatherzine]

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

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
       }
    }

[thrdbndndn]

I failed to see how it is "plain text". The code in all three tabs looks like, well, code to me.

[a2800276]

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.

[1] https://en.m.wikipedia.org/wiki/Plain_text

[lastdong]

Code is plain text, as opposed to binary for example

[schemescape]

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.

[jayknight]

> roger is a command-line tool for generating diagrams from Penrose trios and serving local files to a local editor.

https://penrose.cs.cmu.edu/docs/ref/using

[blobcode]

It looks like the CLI tool (@penrose/roger) just depends on a few npm packages with no browser engine and supports SVG export.

[Otternonsenz]

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

[pixelpoet]

CG hipsters have been enjoying Keenan Crane's diagrams long before he made a proper tool for it :)

[jw1224]

How do I see the notation? The diagrams sure look beautiful, but I must be missing something obvious… Thanks!

[podiki]

Oh, I thought these would be to create spacetime diagrams. As in Penrose Diagrams: https://en.wikipedia.org/wiki/Penrose_diagram

[softfalcon]

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.

[0] https://mermaid.js.org/

[b800h]

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.

[sestep]

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!

[A_D_E_P_T]

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.

[TeMPOraL]

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.

[charlieyu1]

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...

[desireco42]

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?

[xigoi]

What tools were already available for this?

[Gualdrapo]

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

[jhoechtl]

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?

[BarbaryCoast]

What's wrong with Pic? Been around for decades.

[a2800276]

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 :)

[low_tech_punk]

Based on its UI, is there some physics simulation and procedural generation involved? What does that slider represent?

[kuon]

Nice. I often use pgf tikz but the syntax is very convoluted. I like how Penrose separate substance from the rest.