Predictygraph:用 CSS 设计动画图表的文本绘图工具,编辑时不重排布局
来源标题:Show HN: Predictygraph – animated diagrams styled with CSS, no reshuffle on edit
Predictygraph 发布,这是一个用可读文本描述图表、以纯 CSS 设置样式并支持动画的绘图工具。与 Mermaid 和 Graphviz 在改动一个节点时会重排整张图不同,它的每个分组独立选择布局,修改只影响局部位置。支持架构图、流程图以及 Mermaid 的常见图表类型。
以下正文由 AI 翻译自 Hacker News 最新(原文版权归原站所有),可能存在偏差,重要内容请以原文为准。
可预测的图形。图表即可读文本,按你说的方式布局,用纯 CSS 设计样式。 安装、编写你的第一个图表、渲染它。 布局、边、样式、注解、主题和动画,每项一页。 架构图、流程图以及常见的 Mermaid 图表类型。 完整的语言规范、每个命令行选项、编辑器配置。 Mermaid 和 Graphviz 在你改动一个方框时会重新排列整张图。 predictygraph 不会:每个组各自选择自己的布局,所以改动就停留在你改动的位置。
SPDX-FileCopyrightText: 2026 Hulk Predicty
SPDX-License-Identifier: CC-BY-4.0
graph dir=LR route=ortho css "theme.css" user "Data scientist" group k8s "Kubernetes cluster" layout=layered dir=TB { api "kube-apiserver" sched "HAMi scheduler" .hami api -> sched group gpus "GPU nodes" layout=grid cols=2 { default node .gpu g0 "A100"; g1 "A100"; g2 "H100"; g3 "H100" user -> api "submit pod" sched ==> gpus "bind" .hot 用 def 和 use 复用块,用 let 共享值:
SPDX-FileCopyrightText: 2026 Hulk Predicty
SPDX-License-Identifier: CC-BY-4.0
graph dir=LR route=ortho css "theme.css" let model = "H100" def server gpus=2 { cpu "CPU" gpu "${model} x${gpus}" .gpu cpu -> gpu sched "HAMi scheduler" .hami group rack "Rack" layout=column { use server node1 "Node 1" use server node2 "Node 2" gpus=8 sched -> node1-cpu, node2-cpu
正文由 探How 从来源站点 RSS 同步,内容未经改写;遇到排版缺失或需要图片、视频时请以原文为准。