docs: 用新画廊更新 README(SVG)；落实反slop规则(箭头减法/留白/LaTeX公式/眯眼必做)；新增 render-formula；瘦身 master

Author: OhBonsai

README.en.md

@@ -32,15 +32,25 @@ Use excali-design to draw a login/registration prototype flow
 
 The agent reads `SKILL.md`, follows the references routing table, and searches + reuses `drawlib/` components. Not sure how to start? Say "**read the excali-design skill, then ask me a few questions**" — it aligns on requirements first.
 
-## Examples (all produced by this skill)
+## Example gallery (all produced by this skill)
 
-Pipeline: semantic HTML layout → browser computes positions → convert to hand-drawn Excalidraw. Components via `data-lib`, charts via `data-chart` (real values), edges via `arch-connect`, then a model **squint-review** of the render.
+The product intro below was itself drawn with excali-design — the thumbnails inside it are real outputs:
 
-| Prototype · multi-screen flow | Dashboard · data-chart |
+![Excali-Design intro](assets/readme/gallery-intro.svg)
+
+Five of the most common diagram types, each stressing a different capability path:
+
+| Software architecture · swimlanes + diagonal routing + drawlib icons + arrow subtraction | Tech explainer · Transformer structure + embedded LaTeX formula |
 |---|---|
-| ![login flow](assets/readme/login-flow.png) | ![dashboard](assets/readme/dashboard.png) |
-| **Kanban · data-lib cards** | **Architecture · arch-connect** |
-| ![kanban](assets/readme/kanban.png) | ![architecture](assets/readme/architecture.png) |
+| ![architecture](assets/readme/gallery-architecture.svg) | ![Transformer](assets/readme/gallery-transformer.svg) |
+| **Everyday explainer · infographic + decay curve** | **Product prototype · multi-screen flow + drawlib excali-ui controls** |
+| ![caffeine half-life](assets/readme/gallery-caffeine.svg) | ![SaaS multi-screen prototype](assets/readme/gallery-saas.svg) |
+
+> Shared discipline: restrained color (≤4), omit rather than overlap arrows, whitespace as design, formulas via LaTeX, and a mandatory **squint test** on every diagram.
+
+And here's **how it works inside** (this technical diagram was itself drawn by the skill — using drawlib stick figures `excali-person` + sticky notes `excali-template`):
+
+![Excali-Design internal pipeline](assets/readme/gallery-internals.svg)
 
 ## Capabilities at a glance
 
@@ -51,6 +61,7 @@ Pipeline: semantic HTML layout → browser computes positions → convert to han
 | **Anti-AI-slop (hard gate)** | Unicode/emoji as icons → build fails; use `data-icon` hand-drawn shapes instead | `_antislop.mjs` · `references/anti-slop.md` |
 | **Architecture trifecta** | auto node layout + auto edge routing + geometric lint — never by hand | `arch-layout` / `arch-connect` / `arch-lint` |
 | **Mermaid → hand-drawn** | flowchart/sequence/state/ER/class/gantt/pie | `mermaid-to-excalidraw.mjs` |
+| **Math formulas** | render LaTeX to SVG and embed (no hand-drawn blocks, stays crisp when scaled) | `render-formula.mjs` (MathJax, optional dep) |
 | **Export** | headless SVG (no chromium) / pixel-perfect PNG (playwright) | `svg-export.mjs` / `excalidraw-to-image.mjs` |
 | **Squint-review** | render and let the model eyeball it (focus/text/edges/primitives); mechanical lint can't judge quality | `references/design-tokens.md` |
 
@@ -122,12 +133,12 @@ excali-design/
 ├── scripts/                  # pure Node (+ optional elkjs/roughjs/resvg/playwright)
 │   ├── arch-layout / arch-connect / arch-lint
 │   ├── html-to-excalidraw    # semantic HTML → hand-drawn; data-lib + data-chart + data-icon
-│   ├── mermaid-to-excalidraw
+│   ├── mermaid-to-excalidraw / render-formula (LaTeX→SVG)
 │   ├── drawlib-find / drawlib-sheet / build-drawlib-index / assemble-lib / fetch-candidates
 │   ├── svg-export            # headless hand-drawn SVG (no chromium)
 │   └── excalidraw-to-image   # playwright, highest fidelity
 ├── .github/workflows/release.yml   # tag → validate + package + Release
-└── test/ · demos/ · test-prompts.json
+└── demos/                    # example inputs for arch-layout / arch-connect
 ```
 
 ## Dependencies

README.md

@@ -32,15 +32,25 @@ npx skills add OhBonsai/excali-design -a opencode -y   # 只装 opencode,非交
 
 agent 会自己读 `SKILL.md`、按 references 路由表深入手册、检索复用 `drawlib/` 组件。不确定怎么开口?说「**读一下 excali-design 技能,然后问我几个问题**」,它会先和你对齐需求再动手。
 
-## 示例(全部本 skill 生成)
+## 示例画廊(全部本 skill 生成)
 
-走「语义 HTML 布局 → 浏览器算位置 → 转 Excalidraw 手绘风」流水线:组件用 `data-lib` 拉现成库,图表用 `data-chart` 按真实数值生成,连线交 `arch-connect`,转完渲图**眯眼回归**。
+下面这张产品介绍图,本身也是用 excali-design 画的——里面的缩略图都是真实成品:
 
-| 产品原型 · 多屏 flow | 数据看板 · data-chart |
+![Excali-Design 产品介绍](assets/readme/gallery-intro.svg)
+
+涵盖五类最常见的图,每类压不同的能力路径:
+
+| 软件架构图 · 分层泳道 + 斜线混合路由 + drawlib 图标 + 箭头减法 | 技术科普 · Transformer 结构 + LaTeX 公式内嵌 |
 |---|---|
-| ![登录注册流程](assets/readme/login-flow.png) | ![数据看板](assets/readme/dashboard.png) |
-| **项目看板 · data-lib 卡片** | **软件架构 · arch-connect** |
-| ![项目看板](assets/readme/kanban.png) | ![服务架构](assets/readme/architecture.png) |
+| ![软件架构图](assets/readme/gallery-architecture.svg) | ![Transformer 架构](assets/readme/gallery-transformer.svg) |
+| **日常科普 · 信息图 + 衰减曲线** | **产品原型 · 多屏 flow + drawlib excali-ui 控件** |
+| ![咖啡因半衰期](assets/readme/gallery-caffeine.svg) | ![SaaS 多屏原型](assets/readme/gallery-saas.svg) |
+
+> 共同纪律:配色克制(≤4 色)、宁可省略也不叠加箭头、留白当设计、公式走 LaTeX、每张图**眯眼测试**必做。
+
+再看一眼它**内部怎么工作**(这张技术图本身也是它画的,用了 drawlib 小人 `excali-person` + 便签 `excali-template`):
+
+![Excali-Design 内部流水线](assets/readme/gallery-internals.svg)
 
 ## 核心能力一览
 
@@ -51,6 +61,7 @@ agent 会自己读 `SKILL.md`、按 references 路由表深入手册、检索复
 | **反 AI slop(代码硬门)** | Unicode/emoji 冒充图标 → 构建直接失败;改用 `data-icon` 手绘小形状 | `_antislop.mjs` · `references/anti-slop.md` |
 | **架构图三板斧** | 节点自动布局 + 连线自动路由 + 几何 lint,都别手做 | `arch-layout` / `arch-connect` / `arch-lint` |
 | **Mermaid → 手绘风** | flowchart/sequence/state/ER/class/gantt/pie | `mermaid-to-excalidraw.mjs` |
+| **数学公式** | LaTeX 渲染成 SVG 内嵌(不用手绘块拼,缩放不糊) | `render-formula.mjs`(MathJax,可选 dep) |
 | **导出** | headless SVG(无 chromium)/ 像素级 PNG(playwright) | `svg-export.mjs` / `excalidraw-to-image.mjs` |
 | **眯眼回归** | 转完渲图给模型看一遍(焦点/文字/连线/图元),机械 lint 判不了好坏 | `references/design-tokens.md` |
 
@@ -122,12 +133,12 @@ excali-design/
 ├── scripts/                  # 纯 Node(+ 可选 elkjs/roughjs/resvg/playwright)
 │   ├── arch-layout / arch-connect / arch-lint
 │   ├── html-to-excalidraw    # 语义 HTML → 手绘;data-lib 复用 + data-chart 图表 + data-icon
-│   ├── mermaid-to-excalidraw
+│   ├── mermaid-to-excalidraw / render-formula(LaTeX→SVG)
 │   ├── drawlib-find / drawlib-sheet / build-drawlib-index / assemble-lib / fetch-candidates
 │   ├── svg-export            # headless 手绘 SVG(无 chromium)
 │   └── excalidraw-to-image   # playwright 最高保真
 ├── .github/workflows/release.yml   # 打 tag → 校验 + 打包 + 建 Release
-└── test/ · demos/ · test-prompts.json
+└── demos/                    # arch-layout / arch-connect 的示例输入
 ```
 
 ## 依赖

SKILL.md

@@ -162,10 +162,11 @@ Excalidraw 也有自己的 AI slop——它不是紫渐变,是**另一组「视
 | 颜色 | 彩虹色框、每框一色 | 语义编码,全图 ≤ 3-4 色,主体黑灰 |
 | 手绘度 | 全 roughness 2 抖到飞 | 默认 1,正式架构图 0 |
 | 连线 | 箭头交叉成网、手估坐标 | 交给 arch-connect 路由(正交/面向边/不交叉) |
+| **连线·架构图** | **把每条依赖都画成线 → 叠加成束** | **宁可没箭头也不要叠加箭头**:只画主干+核心 hero,其余靠分层+留白+注释。斜线直连可接受(时序/流程图箭头是本体,不省) |
 | 图标 | 每个框配 emoji | 只给需区分类型的节点配(excali-tech 库) |
 | 对齐 | 居中乱摆 | 吸附 20px 网格,同层 y 对齐 |
 | 组件 | 手绘已有控件 | 复用 drawlib(原则 #2) |
-| 填充 | 把所有组件都画上 | 删到只剩 earn-its-place 的 |
+| 填充 | 把所有组件都画上 | 删到只剩 earn-its-place 的;留白当设计 |
 
 ## References 路由表
 
@@ -211,5 +212,8 @@ Excalidraw 也有自己的 AI slop——它不是紫渐变,是**另一组「视
 - **复用 > 手绘**:drawlib 有的组件绝不手绘(原则 #2)。
 - **Junior 先 show 骨架,再做**:Excalidraw 改得快,用足这个优势。
 - **反手绘 slop**:彩虹色、抖到飞的手绘度、面条箭头——每一个都先问「这真的必要吗」。
-- **连线绝不手估坐标**:节点摆好后,连线交给 `arch-connect` 路由(正交/面向边/分布端口/消交叉)。
+- **🛑 架构图箭头做减法**:**宁可没有箭头,也不要叠加的箭头。要学会省略和留白**。只画入口主干 + 一条核心 hero,其余依赖靠分层位置 + 留白 + 注释表达。跨层斜线直连可接受。(只管架构/拓扑图;时序/流程/状态机的箭头是本体,不省)
+- **连线绝不手估坐标**:节点摆好后,连线交给 `arch-connect`(正交)或几何直连器(斜线)算坐标,不手估。
+- **🛑 眯眼测试必做**:每张图导出 PNG 后重度模糊再看一遍(分层/焦点/分组还认得出?是手绘图不是 web 截图?有"条形码"噪音吗?),汇报里说结果。详见 `references/verification.md`。
+- **🛑 公式一律用 LaTeX 渲染成 SVG 内嵌,不用 drawlib 手绘块拼**:数学公式(注意力、损失、概率…)用 `scripts/render-formula.mjs`(MathJax TeX→SVG)渲成 SVG,再作为 image 元素 + dataURL 内嵌进 `.excalidraw`(自包含),用 `excalidraw-to-image.mjs`(playwright)导出。drawlib 的公式块是手绘小框拼的,一缩放就糊。
 - **lint 只是辅助扫描**:抓机械错误,不判好坏;别为 lint 全绿牺牲表达力。