Penrose 數學繪圖工具，把集合關係打成文字自動生成向量圖

Facebook Line Messenger Telegram

在簡報軟體裡，幫一張集合示意圖多加一個集合，你得再拖一個圓出來、調大小、挪位置、確認沒有壓到旁邊的標籤。我最近在 Penrose 的網頁編輯器裡試了另一條路：在程式裡加兩行字，宣告一個新的集合 H，指定它在 C 裡面而且和 F 分開，按下 compile。畫面上多出一個青綠色的新圓，落在 C 裡、和 F 隔開，位置是對的。從頭到尾，我沒有輸入過任何一組座標。

這是 Penrose 和一般畫圖工具最根本的差別。它是卡內基美隆大學團隊主導的開源專案，採 MIT 授權，核心想法是讓你用接近數學課本的記號描述「關係」，版面配置交給程式去解。對論文、講義、教材裡會反覆修改的數學示意圖來說，這條路有機會把修改成本從重新畫一張，壓成改幾個字。

兩輪瀏覽器實測：先跑官方範例，再改自己的版本

Penrose 的編輯器免安裝，瀏覽器打開就能用，也不用註冊帳號。整個介面是三欄式：左欄放範例庫和工作區設定，中間是程式碼編輯區，右邊是圖表輸出區。剛開啟新工作區時，輸出區只寫著一行提示文字 press compile to see diagram，什麼都沒有，等你按了 compile 才會生出圖。我做了兩輪測試。

第一輪從左欄範例庫載入 Sets as Euler Diagram 這個集合論範例，直接按 compile：七個集合 A 到 G 的巢狀歐拉圖正確生成，B 和 C 在 A 裡面，D 和 E 在 B 裡面，F 和 G 在 C 裡面，和程式裡宣告的每一條 Subset 關係都對得上。輸出區渲染出來的就是 SVG 向量圖，標籤、配色、巢狀層次都是程式自己決定的。

TechMoon 截圖｜Penrose 網頁編輯器編譯集合論範例，右欄生成七個集合的巢狀歐拉圖 — Penrose 網頁編輯器的三欄介面：中間是 .substance、.style、.domain 三個程式分頁，右欄按 compile 後生成七個集合的巢狀歐拉圖（圖片：Penrose 官方編輯器）

第二輪換我自己的版本。我把 substance 程式改成八個集合，多宣告一個 Set H，加上 Subset(H, C) 和 Disjoint(F, H) 兩條關係，重新按 compile。H 以一個新的圓出現在 C 裡面，和 F 分開，同樣不需要我指定它該落在哪裡。你可以對照程式和這兩張輸出圖。

TechMoon 截圖｜Penrose 編譯作者自打的八集合程式，新增的 H 圓落在 C 裡面與 F 分開 — 把 substance 改成八個集合、新增 Subset(H, C) 與 Disjoint(F, H) 後重新編譯：H 以新的圓出現在 C 裡面，和 F 分開，全程沒有輸入任何座標（圖片：Penrose 官方編輯器）

範例庫本身值得先逛一圈。裡面收了數十個現成範例，從集合論的歐拉圖、四元數的凱萊圖、超立方體、咖啡因分子，到插入排序、隨機採樣、布朗運動這類機率與演算法主題都有，同一個集合論範例還有 2.5D 版本。每個範例都是完整的三份檔案，也就是說 domain 和 style 都有人替你寫好了，這也是它入門成本比想像中低的原因。

工作區的設計同樣單純：左欄放 saved 工作區、範例與匯入匯出設定，頂部只有 new workspace、說明、resample 和 compile 四顆按鈕，沒有廣告、沒有付費牆、沒有登入畫面。整個編輯器就是開源研究專案的樣貌，功能都在，包裝很少。

邊界先說清楚：這是單一瀏覽器、單次流程的測試，我沒有量編譯速度，沒有逐一跑範例庫裡其他數十個領域的範例，也沒有在本機架設。它能解答的問題是「打字宣告關係，真的能換到一張位置正確的圖」；它答不了「每個數學領域都畫得好」。

一個座標都沒寫，位置卻長對了

這次測試裡最反直覺的地方在這裡：我只寫了「誰在誰裡面」「誰跟誰分開」，圓要多大、放在哪裡，全部是程式解出來的。從官方文件看它的運作方式，視覺樣式檔裡寫著一堆條件，程式把這些條件當成約束，用數值方法解出一組形狀的位置和大小。以集合論範例的樣式檔為例，官方原始碼裡是這樣寫的：

forall Set x {
  shape x.icon = Circle { }
  shape x.text = Equation {
    string : x.label
    fontSize : "32px"
  }
  ensure contains(x.icon, x.text)
  encourage norm(x.text.center - x.icon.center) == 0
  layer x.text above x.icon
}

forall Set x; Set y
where Subset(x, y) {
  ensure contains(y.icon, x.icon, 5)
  ensure disjoint(y.text, x.icon, 10)
  layer x.icon above y.icon
}

讀起來幾乎是英文句子：每個集合是一個圓，確保圓包含自己的標籤，文字排在圓上面；當 x 是 y 的子集合時，確保 y 的圓把 x 的圓包進去。我的 H 會落在 C 裡的哪個角落、直徑多大，就是這些條件聯立求解的結果，不是任何人的手排。這也解釋了為什麼只改幾個字，圖能自己長對：位置的責任本來就不在畫圖的人身上。另外一個小細節：樣式檔裡標籤的型別是 Equation，從這個命名看，集合名稱會用數學式的排版方式畫進圖裡，要標 A’、ℝ² 這類記號時不會被當成普通文字處理。

「純文字生出圖片」這個說法，很容易讓人聯想到 AI 生圖，但兩者是不同的東西。這裡沒有生成式模型參與排版，同樣的輸入配同一個 variation，就會得到同樣的圖，差別只在 variation，標籤就是你的數學符號，不會被畫歪。要可重現、要精確的場合，例如論文和教材，這是本質上的分別，不是誰的出圖比較好看的問題。

也因為版面是解出來的，同一份程式可以配出不同的位置組合。編輯器裡留了 resample 按鈕和 Diagram Variations 分頁，官方文件也用 variation 名稱標記每次輸出。把這件事理解成「求解器給你一組夠好的解」，比「它會給你唯一正確的排法」更接近實況；真想調版面，樣式檔裡的條件才是該動的東西。同一份內容要分別放進講義和論文時，換一套樣式檔就能得到兩種視覺，數學關係一行都不用重打。

一張圖其實是三份檔案，但入門時你只需要改一份

Penrose 的完整程式分成三層：.domain 檔定義這個數學領域有哪些東西和關係；.substance 檔宣告你這張圖的具體內容，有哪些集合、誰包誰；.style 檔決定視覺，每個集合畫成圓、字級多大、要滿足哪些排版條件。官方教學用的比喻是整理房子：domain 像是在定義「家裡可能出現哪些種類的東西」，substance 是你家實際擁有的那張椅子，style 則是怎麼擺設、怎麼上色。換到數學世界，房子換成線性代數或集合論，椅子換成向量或集合。集合論範例的 domain 檔只有短短幾行：

type Set

predicate Disjoint(Set s1, Set s2)
predicate Intersecting(Set s1, Set s2)
predicate Subset(Set s1, Set s2)

這幾行等於在告訴系統：這個領域裡有一種東西叫集合，集合之間有三種可以宣告的關係。至於我第二輪測試打進去的 substance，則是這樣：

Set A, B, C, D, E, F, G, H

Subset(B, A)
Subset(C, A)
Subset(D, B)
Subset(E, B)
Subset(F, C)
Subset(G, C)
Subset(H, C)

Disjoint(E, D)
Disjoint(F, G)
Disjoint(B, C)
Disjoint(F, H)

AutoLabel All

官網的口號是打數學記號就出圖，完整的真相是三份檔案。不過範例庫裡每個範例都帶著現成的 domain 和 style，第一次接觸時你真的只動 substance 這一份，改完按 compile 就有圖；想換配色、字級或加排版條件，再打開 style 檔。這個三層結構的實際好處是內容和視覺分開：同一份數學內容可以套不同的樣式，同一套領域定義和樣式也可以重複餵不同的內容，一學期要出十幾張同風格圖的人，這裡省下的功夫會很明顯。

和你現在的畫法比起來，差在改圖的成本

拖放派工具，例如簡報軟體或 draw.io（先前介紹過它的 AI 分支 Next AI Draw.io），勝在什麼圖都能畫、上手最快；但內容一改就要手動重新排版，集合一多，圓和標籤就開始打架。寫文字派的老前輩是 LaTeX 陣營的 TikZ，輸出版質極高，但座標和路徑要自己指定，排版也得自己扛。Penrose 把「畫什麼」和「怎麼排」拆開：你管數學關係，它管版面，這是它在光譜上站的位置。

實際的差別發生在第三次修改之後。指導教授說 B 底下再切兩個子集合，拖放工具裡你要挪開現有的圓、騰出空間、重調對齊；在 Penrose 你加兩行 Subset 宣告，按 compile，既有的集合自己讓位。圖越大、改得越多次，這個差距越明顯。反過來說，如果一張圖從頭到尾只畫一次、之後不動，拖放派的直覺反而快，宣告式的優勢吃不到。

習慣 LaTeX 的人可以在這裡停一下。TikZ 的座標控制對精確幾何構造仍然是王道，但集合示意圖這種關係比位置重要的圖，把座標交出去通常不痛，換來的是修改時不用重算每一個點。要注意的是 Penrose 輸出的是 SVG，要進 LaTeX 排版流程得多轉一層檔案格式，這是它相對 TikZ 原生輸出要多付的一步工。

另外兩種打字出圖的工具和它也不同路。把文字轉成向量輪廓的工具（例如 Text To SVG）處理的是字形路徑，不是數學關係；匯入資料畫圖表的工具（例如 Graphy）處理的是數字和趨勢。Penrose 吃的是關係宣告，範例庫裡數十個現成範例幾乎都是集合、幾何、圖論、演算法這類內容。官方範例雖有電腦架構框線圖和網路拓撲，但主力明顯是數學示意圖；要畫流程圖，專門的工具仍快得多。

小語言、英文介面與研究節奏：三個現實

最先撞到的門檻是語言。只改 substance 的難度不高，語法貼近數學課本；但想畫自己領域的圖，就得寫 domain 檔，這一步才是真正在學一套小語言。而且編輯器和文件目前都是英文，實測時全站沒有中文選項，看著英文約束條件調樣式是常態。

能畫的範圍也有邊界。它的主場是數學與技術示意圖，範例庫從歐拉圖、四元數、超立方體到插入排序都有，但資料圖表、流程圖、架構圖都有更對口的工具，硬拿它畫不在行的圖，只會跟樣式檔纏鬥。

專案體質也得放進判斷。團隊頁列出的是以卡內基美隆大學資訊科學院為主的教授、博士生與學生，沒有商業公司的支援體系；好處是 MIT 授權、原始碼完整公開，長期使用可以自己掌握，風險是文件和功能以研究節奏前進。同一個團隊從 2024 年起還有一個叫 Bloom 的新方向，用 JavaScript 寫最佳化驅動的互動圖，可以在網頁裡直接引入；需要互動圖的人該看那一條線，兩者是互補而非取代。

授權標頭從 2017 寫到現在，8 月底還在發新版

Penrose 以 MIT 授權開源，授權標頭從 2017 年寫到現在。到 2026 年 9 月初為止，GitHub 上近 8,000 顆星，最新版 v3.3.1 在 2026 年 8 月底發布，主要語言是 TypeScript，仍處於活躍維護狀態。輸出的 SVG 如果要放進網頁，可以再交給 SVGOMG 這類壓縮工具處理，把檔案縮小再上線。

TechMoon 截圖｜Penrose 的 GitHub 專案頁，MIT 授權的開源 TypeScript 專案 — penrose/penrose 的 GitHub 專案頁，MIT 授權，主要語言 TypeScript，截圖時仍在活躍維護（圖片：GitHub）

改圖改到第三輪的人該用，畫流程圖的人先繞路

你的情境如果是教材、講義、論文裡會改到第三輪第五輪的數學示意圖，內容又是集合、幾何、圖論這一類，值得現在就試。成功的樣子很好認：改一行宣告，按 compile，圖自己更新，位置仍然正確，不用重畫。至於畫流程圖的人用流程圖工具、單次性的示意圖直接開簡報軟體、要互動網頁圖的人去看 Bloom，都會比這裡快。

第一步不用安裝任何東西：打開 Penrose 官方編輯器，載入 Sets as Euler Diagram 範例，在 substance 裡加一行 Set Z 之類的宣告，按 compile，親眼看一個新圓長出來。GitHub 專案頁和官方教學也都在，教學對述詞與約束條件、函數各有一章，真走到要寫自己領域的那一步，跟著練就有例子可抄。五分鐘之內你就會知道，把排版交給程式求解的這種做法，合不合你的工作方式。