架构、计划、数据,各有各的表达。

系统架构、项目排期、转化漏斗。选一张接近你需求的成图,复制提示词,把自己的内容交给 Agent。保留 HTML,再说一句“同时导出 PNG”,就能贴进文档。

先挑一张你想做的图。

产品演示

五种风格,都是技能实际生成的产物。点击图片,查看原始需求、复制提示词、下载源文件。

转化漏斗:从落地页到激活
渲染结果 打开 HTML 预览
转化漏斗glass

从落地页到激活

30 天同期群 · 48,200 位访客 → 8,700 人激活 · 合成示例数据

查看原始需求
请用 glass 风格画 30 天注册队列的漏斗:48,200 人访问落地页,18,795 人开始注册,12,640 人验证邮箱,8,930 人完善资料,8,700 人完成激活。每个阶段显示占全部访问者的比例,相邻阶段显示转化率和流失人数,全部从给定数量计算。不要补充数据不支持的结论。
甘特图:社区大会筹备排期
渲染结果 打开 HTML 预览
甘特图notebook

社区大会筹备排期

2027 年 4 月 5 日(周一)– 5 月 30 日(周日)· 七条工作线,三个定档里程碑

查看原始需求
请用 notebook 风格画社区大会筹备甘特图,共八周,第一周从 2027 年 4 月 5 日星期一开始。场地和日期确认:第 1–2 周;议题征集:第 3–5 周,在场地确认后开始;议题评审和排期:第 5–6 周;讲者确认:第 7 周,在评审后进行;售票和推广:第 3–8 周;志愿者招募和培训:第 5–7 周;彩排与大会周:第 8 周,在志愿者培训后进行。里程碑:第 5 周末征集截止,第 6 周末发布议程,5 月 29 日星期六开场。使用周序号坐标轴。
时间线:通往插件 API 的六个里程碑
渲染结果 打开 HTML 预览
时间线editorial

通往插件 API 的六个里程碑

图表库的公开规划:从首次渲染到可扩展内核,2031–2033。

查看原始需求
请用 editorial 风格画开源图表库的路线图,副标题“从首次渲染到可扩展内核”,包含六个里程碑:2031 Q2 v0.1 首次渲染(数值数组生成折线和柱形,仅一个画布,无交互和主题);2031 Q4 v0.4 比例尺与坐标轴(线性、时间、序数比例尺,刻度标签由数据范围决定);2032 Q1 v0.7 交互层(悬停、提示框、范围选择,键盘可达并向屏幕阅读器播报);2032 Q3 v1.0 稳定 API(开始语义化版本管理,1.x 冻结图元、比例尺和主题契约);2033 Q1 v1.4 服务端渲染(同一份定义无需浏览器即可生成静态 SVG,用于文档和邮件摘要);2033 Q3 v2.0 插件 API(图元、比例尺、主题独立打包,新增图表不再扩大内核)。结尾说明季度是目标而非承诺,优先调整范围而非日期,每个里程碑都从主分支发布。
组织架构:一家 14 人的产品工作室
渲染结果 打开 HTML 预览
组织架构warm

一家 14 人的产品工作室

三个层级:1 名工作室负责人、3 名专业负责人与 10 名一线成员 —— 仅标注头衔,不列姓名。

查看原始需求
请用 warm 风格画 14 人产品工作室的组织架构,只用职位不写姓名。工作室负责人负责方向、客户组合和招聘;三位专业负责人向其汇报。设计负责人负责产品和品牌的设计质量,团队含负责人共 5 人:2 位产品设计师(流程、页面、原型)、1 位品牌设计师(视觉识别、演示稿、网站页面)、1 位设计技术专家(可运行原型、UI 代码)。工程负责人负责技术方向、评审、发布,团队含负责人共 4 人:前端工程师(客户端、共享 UI 代码)、后端工程师(服务、数据模型、API)、平台工程师(构建、部署、工具)。交付负责人负责范围、排期、客户沟通,团队含负责人共 4 人:用户研究员(访谈、可用性测试)、技术写作者(产品文档、交接)、交付制作人(估算、排期、供应商)。标明每个分支人数与工作室总人数。
架构图:服务架构
渲染结果 打开 HTML 预览
架构图clean

服务架构

浏览器 → API 网关 → 认证服务 / 订单服务

查看原始需求
请用 clean 风格画一张架构图:浏览器连接 API 网关,网关连接认证服务和订单服务。认证服务使用自己独立的 PostgreSQL;订单服务使用另一套独立的 PostgreSQL 和自己的 Redis。按客户端、接入、服务、数据四层展示,用节点说明标明服务与数据存储的归属。不要补充云厂商、协议、端口或指标。

你的内容,适合哪一种图?

中英文案例都提供源数据与可下载的产物。所有案例内容均为合成示例。

做出你的第一张图

1. 安装技能

在终端运行下面的命令。需要 Node.js 22.12+ 和已安装的 Chrome 系浏览器;Agent 会在需要时安装本地运行依赖。

npx skills add GODVvVZzz/text2html2png -g -y

2. 把提示词发给 Agent

复制上方案例的提示词,把描述换成自己的内容,发给 Codex、Claude Code 或其他兼容 Agent。

默认产出 HTML。复制的提示词已明确要求同时导出 PNG。保留 JSON,后续可以修改内容、重新生成。

在本机试用渲染器

在浏览器中修改 Diagram JSON、预览和导出。本地试用页不理解自由文本;文字整理这一步由 Agent 完成。

git clone https://github.com/GODVvVZzz/text2html2png.git
cd text2html2png/skills/text2html2png
npm start

让图真正用得上的三个约定

保留给定的事实

技能要求 Agent 保留事实与关系,不补造指标。分享前,仍应对照原文检查图中的含义。

检查实际排版

浏览器质检检查裁字、重叠、对比度和中文短标题换行。PNG 导出会先通过版面审计。

留下可复用的源文件

HTML、PNG 和版本化 Diagram JSON 都能保留。渲染在本机运行;Agent 如何处理输入,取决于你使用的服务。

架构示例按层展示,具体依赖写在节点说明里。任意节点连线请使用图编辑工具;科学统计图请使用数据绘图库。