Markdown Article Formatter
JimLiu/baoyu-skills
Reformats plain text or Markdown articles with frontmatter, a title, a summary, headings, bold, lists and code blocks, and saves a separate formatted copy.
当回答涉及流程、架构、机制、因果、对比、时间线、状态机、层级关系，或用户明确要求画图 / 图解 / 示意图时使用。把内容画成对话内直接渲染的图（自包含 HTML/SVG），而不是用文字罗列。不承接数值图表（折线/柱状/饼图，当前无图表库）、海报、头像、写实插画、地图。
Install Inline Visualization
$ npx skills add guyi-a/pi-ling --skill inline-visualization -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install guyi-a/pi-ling inline-visualization --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/guyi-a/pi-ling.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/inline-visualization .claude/skills/inline-visualization && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "inline-visualization" agent skill from https://github.com/guyi-a/pi-ling/tree/main/.agents/skills/inline-visualization into .claude/skills/inline-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "inline-visualization", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/guyi-a/pi-ling/tree/main/.agents/skills/inline-visualizationType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add guyi-a/pi-ling --skill inline-visualization -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install guyi-a/pi-ling inline-visualization --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/guyi-a/pi-ling.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/inline-visualization .agents/skills/inline-visualization && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "inline-visualization" agent skill from https://github.com/guyi-a/pi-ling/tree/main/.agents/skills/inline-visualization into .agents/skills/inline-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "inline-visualization", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add guyi-a/pi-ling --skill inline-visualization -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install guyi-a/pi-ling inline-visualization --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/guyi-a/pi-ling.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/inline-visualization .cursor/skills/inline-visualization && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "inline-visualization" agent skill from https://github.com/guyi-a/pi-ling/tree/main/.agents/skills/inline-visualization into .cursor/skills/inline-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "inline-visualization", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/guyi-a/pi-ling.git --path .agents/skills/inline-visualization--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add guyi-a/pi-ling --skill inline-visualization -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install guyi-a/pi-ling inline-visualization --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/guyi-a/pi-ling.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/inline-visualization .gemini/skills/inline-visualization && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "inline-visualization" agent skill from https://github.com/guyi-a/pi-ling/tree/main/.agents/skills/inline-visualization into .gemini/skills/inline-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "inline-visualization", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install guyi-a/pi-ling inline-visualizationInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add guyi-a/pi-ling --skill inline-visualization -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/guyi-a/pi-ling.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/inline-visualization .github/skills/inline-visualization && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "inline-visualization" agent skill from https://github.com/guyi-a/pi-ling/tree/main/.agents/skills/inline-visualization into .github/skills/inline-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "inline-visualization", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add guyi-a/pi-ling --skill inline-visualization -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install guyi-a/pi-ling inline-visualization --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/guyi-a/pi-ling.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/inline-visualization .opencode/skills/inline-visualization && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "inline-visualization" agent skill from https://github.com/guyi-a/pi-ling/tree/main/.agents/skills/inline-visualization into .opencode/skills/inline-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "inline-visualization", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
inline-visualization- GitHub stars
- 106
- Token cost
- ~555 tokens
- SKILL.md length
- 134 words
- Files
- 1
- Skills in repo
- 5
- Repo updated
- First seen
- Licence
- MIT
At a glance
当回答涉及流程、架构、机制、因果、对比、时间线、状态机、层级关系，或用户明确要求画图 / 图解 / 示意图时使用。把内容画成对话内直接渲染的图（自包含 HTML/SVG），而不是用文字罗列。不承接数值图表（折线/柱状/饼图，当前无图表库）、海报、头像、写实插画、地图。
- Documents & Office work in your project
- SKILL.md covers 输出格式（唯一的硬约定）, 不使用本 skill, 硬规则 and 怎么画, plus 2 more sections
- Reaches w3.org
What it does
Inline Visualization is an agent skill from guyi-a/pi-ling. 当回答涉及流程、架构、机制、因果、对比、时间线、状态机、层级关系，或用户明确要求画图 / 图解 / 示意图时使用。把内容画成对话内直接渲染的图（自包含 HTML/SVG），而不是用文字罗列。不承接数值图表（折线/柱状/饼图，当前无图表库）、海报、头像、写实插画、地图。
Its SKILL.md is about 560 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Documents & Office. The licence is MIT.
When your agent uses it
- Documents & Office work in your project
Example prompts
- “/inline-visualization”
What it can do on your machine
Read from SKILL.md and the folder at commit 17a71f6. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
w3.org
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Inline Visualization loads about 555 tokens when it runs. Until then it costs about 39 tokens; SKILL.md has 134 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from guyi-a/pi-ling at commit 17a71f6, republished under its MIT licence (© guyi-a). 134 words, ~555 tokens.
Download SKILL.mdSave it as
.claude/skills/inline-visualization/SKILL.md (or your agent's skills folder).- name
- inline-visualization
- description
- 当回答涉及流程、架构、机制、因果、对比、时间线、状态机、层级关系，或用户明确要求画图 / 图解 / 示意图时使用。把内容画成对话内直接渲染的图（自包含 HTML/SVG），而不是用文字罗列。不承接数值图表（折线/柱状/饼图，当前无图表库）、海报、头像、写实插画、地图。
对话内联可视化
把适合图示的内容画成在对话里直接渲染出来的图，而不是让用户读一长串文字或自己想象。
输出格式（唯一的硬约定）
先给一句结论，然后输出一个把语言标成 html、并把 type="renderer" 写进围栏信息的代码块：
结论：读路径是 请求 → 校验 → 缓存 → 落库。
```html type="renderer"
<svg viewBox="0 0 600 160" xmlns="http://www.w3.org/2000/svg">
...
</svg>
```只有带 type="renderer" 的围栏会被渲染成图。 不加这个标记就是普通代码块，用户看到的是源码。反过来，如果你确实想让用户看到源码，就不要加这个标记。
不使用本 skill
- 简短事实、确认、翻译、闲聊 —— 文字足够清楚时不要画图
- 数值图表（折线 / 柱状 / 饼图 / 散点）：当前没有图表库，画不了；这类内容用表格或文字
- 海报、头像、写实插画、艺术创作
- 地图、地理轨迹
硬规则
静态优先。 图里不要写脚本，也不要做动画。当前渲染环境不执行脚本，写了不仅无效，还可能让整块渲染失败。
必须自包含。 不允许任何外部资源：
- 不要
<script src="...">、不要 CDN - 不要外部图片 / 字体（
<img src="https://...">、url(https://...)会被剥掉） - 需要图片时用内联 SVG 画，或用 CSS 渐变 / 形状
不依赖交互。 核心结论必须在初始静态状态下就看得懂 —— 不要设计成「悬停才显示详情」或「点击展开」。
数据可复核。 真实数字、名称、术语只来自用户材料或工具结果。示例数据要显式标注（例如标题里写「示意」）。
一个图只讲一件事。 默认只输出一个图块。确实需要第二个时才加，最多两块。
失败可降级。 结构或事实不足以可靠绘制时，改用文字或表格，不要硬画一张含糊的图 —— 一张错误的图比没有图更糟。
怎么画
优先用 SVG 画结构（流程图、架构图、时间线、状态机、层级树），用 HTML + CSS 画卡片式版面（对比、清单、要点归纳）。
布局要点：
- SVG 一定要写
viewBox，宽度交给外层自适应；width="100%"但不要写死height - 文字用
font-family="inherit"或直接继承，不要指定具体字体名 - 留出内边距，不要让元素贴着边框
- 连线用
stroke，不要用border拼
避免这些常见问题：
- 文字溢出容器（估算文本宽度时留足余量；中文按 1 字 ≈ 1 em 估）
- 深色模式下看不清（不要写死颜色，见下）
- 元素重叠、连线穿过文字
颜色与主题
不要写死颜色值（如 #333 / white），否则切到另一个主题就看不见了。用 CSS 变量，它们会自动跟随浅色 / 深色：
| 用途 | 变量 |
|---|---|
| 正文 | var(--text) |
| 次要文字 | var(--muted) / var(--muted-2) |
| 边框、分隔线 | var(--border) / var(--border-strong) |
| 面（卡片背景） | var(--surface-1) / var(--surface-2) / var(--surface-3) |
| 强调 | var(--accent) / var(--accent-soft) |
| 语义色 | var(--info) / var(--success) / var(--warning) / var(--danger) |
字号遵循应用的阶梯，只用这几档：10 / 11 / 12 / 13 / 14 / 16 / 18px。正文用 14px，标题 16 或 18px，标注 11 或 12px。
圆角用 var(--radius-sm)（3px）/ var(--radius-md)（5px）/ var(--radius-lg)（9px）。
自检清单（输出前过一遍）
- 这张图是否真的比文字更好懂？如果只是把文字换个排列，就别画
- 是否所有颜色都用了变量、没有写死？
- 是否完全没有脚本和外部资源？
- 初始状态（不悬停、不点击）能否看懂？
- 窄屏下会不会溢出、文字会不会被裁？
- 示例数据是否标注了「示意」？
© guyi-a, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .agents/skills/inline-visualization of guyi-a/pi-ling.
Open the folder on GitHubat commit 17a71f6
Compare with similar skills
Inline Visualization next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Inline Visualization this skillguyi-a/pi-ling | 106 | — | ~555 | Automated safety check: Pass | MIT | |
| Markdown Article FormatterJimLiu/baoyu-skills | 26k | 7 repos | ~3.5k | Automated safety check: Pass | MIT | |
| MarkitdownImCa0/just-laws | 781 | 14 repos | ~3.2k | Automated safety check: Notes | MIT | |
| Obsidian MarkdownAtmosphere/atmosphere | 3.8k | 20 repos | ~1.3k | Automated safety check: Pass | Apache-2.0 | |
| DOCXrvdbreemen/OTGW-firmware | 207 | 33 repos | ~4.3k | Automated safety check: Pass | Proprietary | |
| Gzh Designisjiamu/gzh-design-skill | 3.9k | 1 repos | ~2.2k | Automated safety check: Pass | AGPL-3.0 |
Similar skills
Markitdown
ImCa0/just-laws
Convert files and office documents to Markdown. An agent skill from ImCa0/just-laws.
Obsidian Markdown
Atmosphere/atmosphere
Create and edit Obsidian Flavored Markdown with wikilinks, embeds, callouts, properties, and other Obsidian-specific syntax.
DOCX
rvdbreemen/OTGW-firmware
A skill your agent uses whenever the user wants to create, read, edit, or manipulate Word documents (.docx files).
Gzh Design
isjiamu/gzh-design-skill
微信公众号文章排版引擎，将 Markdown 转换为可直接粘贴到公众号编辑器的 HTML。主题风格从 references/theme-index.md 注册的自定义主题库中选取，自动章节编号、关键词下划线标记、引言卡片、目录导航、代码块、图片/GIF、作者签名。支持 Markdown / Word(.docx) / PDF / 纯文本输入（非 Markdown…
Word Document Reader and Writer
HKUDS/DeepTutor
Reads, creates and edits Word .docx files with python-docx, and drops to raw OOXML for tracked changes, comments and byte-exact edits.
More from guyi-a/pi-ling
PDF
guyi-a/pi-ling
PDF 相关的所有操作：从零生成（reportlab / pypdf）、格式转化（md/html → PDF）、修改（合并 / 拆分 / 旋转 / 加水印 / 提图片 / 元数据）、读内容（pdfplumber / extractdocumenttext）、OCR 扫描件、加密解密。触发场景：用户说"生成 PDF" / "做份 PDF 简历" / "合并这几份 PDF" / "给 PDF…
PPTX
guyi-a/pi-ling
PowerPoint 幻灯片（.pptx / .potx）的所有操作：从零生成（pptxgenjs Node 库）、基于模板编辑（unpack XML → 改 → clean → pack）、格式转化（pptx → PDF / 图片、.ppt → .pptx）、读取分析。触发场景：用户说"做份 PPT" / "生成幻灯片" / "演讲 slide" / "培训材料" / "项目汇报" /…
Bosszp
guyi-a/pi-ling
Boss 直聘岗位搜索的完整操作手册。触发场景：用户说"找工作"/"看岗位"/"搜招聘"/"投简历"/"跳槽"/"Boss 直聘"/"看看有什么工作"/"帮我看下 XX 岗位"等。前提：必须走 browserbridge（Boss 需要用户 Chrome 登录态；browseruse 独立环境登不上）。包含 URL 模板、城市编码表、Vue data 抽取…
DOCX
guyi-a/pi-ling
Word 文档（.docx）的日常处理：md → docx（生成简历/报告）、docx → PDF/图片（分享预览）、.doc → .docx（老格式升级）。触发场景：用户说"生成 Word 版" / "做份 Word 简历" / "把这份报告转 Word" / "这份 .doc 打不开" / "docx 转 PDF" 等。读 docx 内容走 agent 已有的…
Related
Categories
Questions about Inline Visualization
What does Inline Visualization do?
当回答涉及流程、架构、机制、因果、对比、时间线、状态机、层级关系，或用户明确要求画图 / 图解 / 示意图时使用。把内容画成对话内直接渲染的图（自包含 HTML/SVG），而不是用文字罗列。不承接数值图表（折线/柱状/饼图，当前无图表库）、海报、头像、写实插画、地图。. Inline Visualization is an agent skill from guyi-a/pi-ling.
When should I use Inline Visualization?
Inline Visualization fits situations like: documents & Office work in your project.
How do I install Inline Visualization in Claude Code?
Run `npx skills add guyi-a/pi-ling --skill inline-visualization -a claude-code`. Or copy the skill folder (.agents/skills/inline-visualization in guyi-a/pi-ling) into .claude/skills/inline-visualization in your project. Claude Code loads it when a task matches its description.
How do I install Inline Visualization in Codex?
Run `npx skills add guyi-a/pi-ling --skill inline-visualization -a codex`. Or copy the skill folder (.agents/skills/inline-visualization in guyi-a/pi-ling) into .agents/skills/inline-visualization in your project. Codex loads it when a task matches its description.
Can I use Inline Visualization in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add guyi-a/pi-ling --skill inline-visualization -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/inline-visualization, .gemini/skills/inline-visualization, .github/skills/inline-visualization and .opencode/skills/inline-visualization in your project.
What does Inline Visualization need to run?
SKILL.md names no scripts, command-line tools or credentials: Inline Visualization is instructions for the agent only.
Does Inline Visualization access the network?
SKILL.md names 1 domain. In commands or code: w3.org; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Is Inline Visualization safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Inline Visualization use?
Inline Visualization is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Inline Visualization use?
About 555 tokens (SKILL.md is roughly 2.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Inline Visualization?
Skills that share tags, products or a category with Inline Visualization: Markdown Article Formatter (JimLiu/baoyu-skills, 26k stars), Markitdown (ImCa0/just-laws, 781 stars), Obsidian Markdown (Atmosphere/atmosphere, 3.8k stars) and DOCX (rvdbreemen/OTGW-firmware, 207 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Inline Visualization?
guyi-a (a GitHub user) maintains it in guyi-a/pi-ling, which has 106 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on September 16, 2026.
Source: guyi-a/pi-ling on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.