开发工具数据可视化【免费下载链接】penroseCreate beautiful diagrams just by typing notation in plain text.项目地址https://gitcode.com/gh_mirrors/pe/penrose点击查看免费下载penrose/roger是 Penrose 项目的命令行界面CLI它基于penrose/core把一份由.substance、.style、.domain三种文件组成的 Penrose trio 编译、优化并渲染为 SVG 图表。本文以 packages/roger/README.md 为主体结合 index.ts、watch.ts 等源码完整讲解 roger 的安装、四大命令的用法与全部参数以及从 trio 到 SVG 的底层处理流水线读完即可在本地用命令行批量产出图表并联动调试core模块。roger 是什么构建在 penrose/core 之上的 CLIPenrose 的核心理念是用纯文本符号写出美丽的图表一份substance描述要表达的内容一份domain定义该领域的抽象概念与关系一份style规定图形的视觉呈现规则三者合称一个Penrose trio。而roger就是处理这个 trio 的命令行程序——它本身不包含编译与渲染逻辑而是直接依赖penrose/core完成全部计算这一点在 packages/roger/package.json 的dependencies中可以看到penrose/core: ^3.3.0。从仓库根目录执行roger --help可以看到 README 中记录的完整帮助信息roger command Commands: roger trio [trio..] Generate a diagram from a Penrose trio. roger trios [trios..] Create diagrams from multiple .trio.json files. roger watch Watch the current folder for files changes (must end in .substance, .style, .domain) roger shapedefs Generate a JSON file that contains all shape definition s in the Penrose system. Options: --version Show version number [boolean] --help Show help [boolean]需要说明的是帮助文本中列出的shapedefs在当前的 index.ts 中并未看到对应的 yargs 注册实现实际注册的命令只有trio、trios与watch因此该条目可以推断为 README 中的历史遗留描述读者在使用时应以源码为准。安装与快速上手方式一无需安装直接运行官方文档 packages/docs-site/docs/ref/using.md 提供了两种使用方式。免安装方式npx penrose/roger全局安装方式npm i -g penrose/roger方式二从当前仓库源码构建并链接如果你要基于本仓库进行开发按 CONTRIBUTING.md 的指引先安装依赖并构建 roger 的依赖模块yarn yarn build:roger然后进入 roger 包目录通过npm link将其注册为全局可执行命令bin字段指向./bin/run.js再回到仓库根目录pushd packages/roger/ npm link popd快速验证生成第一张 SVG安装完成后在仓库根目录直接运行 README 给出的示例命令roger trio packages/examples/src/set-theory-domain/tree-euler.trio.jsonroger会读取这份 trio编译并优化后把生成的 SVG 直接打印到控制台。仓库中这份 tree-euler.trio.json 的内容如下{ substance: ./tree.substance, style: [./euler.style], domain: ./setTheory.domain, variation: MonsoonCaterpillar95943 }它展示了 trio JSON 的标准结构substance、style允许是数组多个 style 会被按顺序拼接、domain都是相对该 JSON 文件所在目录的路径variation用于指定优化器的随机种子/变体以便在不同运行间得到可复现或差异化的布局。核心命令详解roger trio生成单张图表roger trio接收两种形式的输入且三种文件可以以任意顺序传入。当传入的是三个独立文件如roger trio a.substance b.style c.domain时源码中的orderTrio函数见 index.ts会依据扩展名.substance/.style/.domain自动归类排序遇到无法识别的扩展名、同一类型文件重复、或三类文件不齐备时会打印错误并以非零状态退出。当传入的是单个.trio.json文件时则会从 JSON 中解析出substance、style、domain、variation以及可选的excludeWarnings。该命令在源码中注册的完整选项如下对应 index.ts 中trio命令的 yargs 定义选项别名类型默认值说明--out-ostring无输出 SVG 文件的名称不指定时 SVG 直接打印到控制台--path-pstring.三个 trio 文件共用的路径前缀--tex-labels无booleanfalse将 Equation 形状以纯 TeX 字符串形式渲染进输出 SVG而非排版后的公式--variation-vstring无Penrose 图表的变体随机种子--dump-svgs无booleanfalse优化过程中将中间态 SVG 转储到指定文件夹--dump-metadata无string无将收集到的元数据写入 JSON 文件需同时指定--out--dump-prefix无stringoutput/step-转储 SVG 的文件名前缀--dump-interval无number1每隔 n 个优化步转储一次中间 SVG其中转储中间 SVG 的功能由render的onStep回调实现每次优化step后若满足step % dumpInterval 0就调用toSVG把当前中间状态渲染成 SVG 并写入磁盘同时自动创建不存在的目录——这是观察优化器迭代过程、调试布局约束的利器。roger trios批量生成多张图表roger trios用于从多个.trio.json文件批量生成 SVG。它与trio共享--tex-labels选项并要求通过--out别名-o必填指定输出文件夹roger trios packages/examples/src/set-theory-domain/tree-euler.trio.json packages/examples/src/geometry-domain/complementary-angles.trio.json -o out源码实现会遍历每个 trio以文件名去掉.trio.json后缀作为 SVG 输出名写入--out文件夹不存在则自动创建并在生成后把优化过程中累积的警告打印到控制台。roger watch本地开发热更新服务roger watch会把当前目录变成被监视的工作区同时启动一个 WebSocket 服务器把文件列表与文件内容变化推送给连接的前端例如 packages/docs-site 或 editor 的本地开发页。命令只有一个可选参数--port, -p WebSocket 端口号默认 9160其底层实现在 watch.ts使用chokidar持久监听当前目录只收集扩展名为.substance、.style、.domain的文件以及文件名以.trio.json结尾的 JSON避免把普通 JSON 误收进来文件新增/变更/删除时通过 WebSocket 广播files完整文件清单与file_change文件内容消息客户端可发送retrieve_file、retrieve_file_from_style按 style 所在目录解析相对路径、retrieve_trio读取 trio JSON并把多个 style 拼接成一份组合 style后连同 domain、substance 一起下发等消息向服务端请求内容。配合仓库开发时典型用法是在packages/examples/目录下启动roger watchcd packages/examples/ roger watch看到watching on port 9160输出后再在另一个终端运行yarn start启动浏览器编辑器默认地址http://localhost:3000/try/即可在下拉框中搜索packages/examples/里的任意 Penrose trio 并实时预览效果见 docs/assets/roger-startup.pngroger watch启动画面。从 trio 到 SVGroger 的底层处理流水线roger的render函数见 index.ts完整复现了 Penrose 的核心流水线并对其中的每一步做了计时。整个流程可概括为四个阶段编译Compilation调用penrose/core的compile({ substance, style, domain, variation, excludeWarnings })把三种源文件解析为统一的中间表示initial state。编译失败时通过showError抛出带格式的错误信息。优化Optimizationoptimize函数循环调用step推进优化器直到isOptimized(state)与finalStage(state)同时满足即当前阶段已收敛且已进入最终阶段若某阶段已优化完成但尚未进入最终阶段则调用nextStage切换到下一阶段。每步默认推进 1 次numSteps 1。渲染Rendering对优化完成的PenroseState调用toSVG(optimizedState, resolvePath, roger, texLabels)生成 SVG DOM 字符串并交给prettier以 HTML 解析器格式化。元数据收集把编译、优化、渲染各阶段耗时借助convert-hrtime换算为毫秒以及优化问题的规模写入InstanceData定义见 types.ts字段包括timeTaken.overall/compilation/optimization/rendering和optProblem.constraintCount/objectiveCount供后续以 JSON 形式输出。路径解析方面resolvePath以第一个 style 文件所在的目录作为基准来解析相对路径若多个 style 不在同一目录会给出黄色警告若 style 中引用的图片/文件是http(s)://绝对 URL则通过node-fetch拉取内容否则用fs.readFileSync读取本地文件。这也是Image等形状能够引用外部资源的原因。下图为 roger 处理 Penrose 程序各阶段产物的示意截图自 packages/roger/docs/penrose-artifacts.png其中明确拆分出 Compilation、Optimization、Rendering 等阶段及其耗时与 core 模块的本地联动开发README 专门强调了用 roger 做本地开发的流程如果你正在开发core模块可以在仓库根目录运行yarn start它会持续监听core的改动并重新构建在运行 roger 之前先检查控制台输出确保改动没有引入编译错误。构建成功后roger 在批量处理 Penrose 程序时就会自动使用最新构建的core版本。由于 roger 通过npm link全局注册可执行入口是 CONTRIBUTING.md 中说明的packages/roger/bin/run.js当它表现异常、怀疑版本过时时可以重新链接pushd packages/roger/ npm unlink --global penrose/roger npm link popd此外index.ts 开头还有一个容易被忽略的细节由于npx默认以最近的工程根目录作为工作目录会阻止 roger 在packages/examples内部运行因此脚本在启动时检查环境变量INIT_CWDnpx 注入的原始调用目录并process.chdir切回用户实际所在的目录——这保证了在任意子目录下运行 roger都能按预期解析相对路径。常见问题与排查要点控制台输出 SVGroger trio不带--out时会把 SVG 直接打印到标准输出同时用黄色打印优化阶段产生的state.warnings带上--out则写入文件并打印绿色提示且只有此时--dump-metadata才生效。组合 style 的告警当 trio 的多个 style 不在同一目录时resolvePath只采用第一个 style 目录做图片基准并给出警告请将图片等资源放在第一个 style 附近。警告过滤trio JSON 中的excludeWarnings数组会在编译时传给compile用于屏蔽你已知且不关心的警告类别。版本兼容roger 与 core 的版本需保持一致当前均为^3.3.0跨版本混用时建议重新执行yarn build:roger与npm link。总而言之roger 是 Penrose 双端生态中的命令行枢纽单图生成、批量渲染、本地热更新开发一应俱全而其背后依赖的正是penrose/core的编译—优化—渲染流水线。把 packages/roger/README.md 与 index.ts、watch.ts 对照阅读即可完全掌握它的工作方式。赞分享开发工具数据可视化【免费下载链接】penroseCreate beautiful diagrams just by typing notation in plain text.项目地址https://gitcode.com/gh_mirrors/pe/penrose点击查看免费下载相关推荐掌握Penrose命令行工具roger与edgeworth的完整使用指南掌握Penrose命令行工具roger与edgeworth的完整使用指南 Penrose是一款通过纯文本符号创建精美图表的工具其命令行工具roger和edg开发工具数据可视化Penrose 本地绘图工作流从 penrose-web 前端到 runpenrose/roger 命令行渲染管线Penrose 本地绘图工作流从 penrose web 前端到 runpenrose / roger 命令行渲染管线 导读 本文以仓库内 docs/use开发工具数据可视化Penrose 打包集成指南使用 BundlerVite接入 penrose/corePenrose 打包集成指南使用 BundlerVite接入 penrose/core Penrose 是一个用纯文本符号描述数学对象、自动生成优雅图开发工具数据可视化上一篇DDrawCompat终极指南3分钟让老游戏在现代Windows上重生下一篇如何高效使用英雄联盟智能工具提升游戏效率的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
