Content
Plugin
antv-infographic-skills
๐ฆ An Infographic Generation and Rendering Framework, bring words to life! AntV Infographic is AntV's next-generation declarative infographic visualization engine.
Plugin Signal66/100Solid
maintained66
capable37
documented100
adopted80
Install on Claude Code
> /plugin marketplace add antvis/infographic> /plugin install antv-infographic-skills@antv-infographic
Stats
5,857
Stars
448
Forks
Maintained
Maintenance
TypeScript
Language
MIT
License
2mo ago
Last commit
11mo ago
Created
Repo: antvis/infographic
What's inside
Skills
5/infographic-creatorๅบไบ็ปๅฎๆๅญๅ
ๅฎนๅๅปบ็ฒพ็พไฟกๆฏๅพใๅฝ็จๆท่ฏทๆฑๅๅปบไฟกๆฏๅพๆถไฝฟ็จใ/infographic-item-creatorGenerate or update infographic Item components for this repo (TypeScript/TSX in src/designs/items). Use when asked to design, implement, or modify data item visuals, layout logic, or registerItem composites./infographic-structure-creatorGenerate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked to design, implement, or modify structure layouts (list/compare/sequence/hierarchy/relation/geo/chart), including layout logic, component composition, and/infographic-syntax-creatorGenerate AntV Infographic syntax only. Use when asked to turn notes, outlines, reports, or other user content into the Infographic DSL with template selection, data structuring, and theme hints. Do not use for HTML rendering or TS/TSX component implementation./infographic-template-updaterUpdate template catalogs and UI prompts after adding new infographic templates (src/templates/*.ts), including SKILL.md template list, site gallery template mappings, and the AIPlayground prompt list.
Badges
1
README
1็ฎไฝไธญๆ | English
Infographic, bring words to life!
๐ฆ An Infographic Generation and Rendering Framework, bring words to life!
AntV Infographic is AntV's next-generation declarative infographic visualization engine. With a carefully designed infographic syntax, it can quickly and flexibly render high-quality infographics, making information presentation more efficient and data storytelling simpler.
โจ Features
- ๐ค AI-friendly: Configuration and syntax are tuned for AI generation, provide concise prompts, and support AI streaming output and rendering
- ๐ฆ Ready to use: ~200 built-in infographic templates, data-item components, and layouts to build professional infographics in minutes
- ๐จ Theme system: Hand-drawn, gradients, patterns, multiple preset themes, plus deep customization
- ๐ง๐ปโ๐ป Built-in editor: Includes an editor for infographics so AI-generated results can be edited further
- ๐ High-quality SVG output: Renders with SVG by default to ensure visual fidelity and easy editing
๐ Installation
npm install @antv/infographic
๐ Quick Start
import { Infographic } from '@antv/infographic';
const infographic = new Infographic({
container: '#container',
width: '100%',
height: '100%',
editable: true,
});
infographic.render(`
infographic list-row-simple-horizontal-arrow
data
lists
- label Step 1
desc Start
- label Step 2
desc In Progress
- label Step 3
desc Complete
`);
The rendered result looks like this:
Streaming Rendering
With a highly fault-tolerant infographic syntax you can stream AI output in real time and progressively render the infographic.
let buffer = '';
for (const chunk of chunks) {
buffer += chunk;
infographic.render(buffer);
}
๐ง Skills Integration
AntV Infographic provides skills to integrate with AI agents:
- infographic-creator: Create an HTML file that renders an infographic
- infographic-syntax-creator: Generate infographic syntax from descriptions
- infographic-structure-creator: Generate custom structure designs
- infographic-item-creator: Generate custom item designs
- infographic-template-updater: (For developers) update the template library
Claude Code
Claude marketplace is now available. You can install from marketplace, or keep using manual install.
/plugin marketplace add https://github.com/antvis/Infographic.git
/plugin install antv-infographic-skills@antv-infographic
Manual install:
set -e
VERSION=0.2.4 # Replace with the latest tag, e.g. 0.2.14
BASE_URL=https://github.com/antvis/Infographic/releases/download
mkdir -p .claude/skills
curl -L --fail -o skills.zip "$BASE_URL/$VERSION/skills.zip"
unzip -q -o skills.zip -d .claude/skills
rm -f skills.zip
Codex
Enter codex
# Replace <SKILL> with the skill name, e.g. infographic-creator
# https://github.com/antvis/Infographic/tree/main/skills/<SKILL>
$skill-installer install https://github.com/antvis/Infographic/tree/main/skills/infographic-creator
๐ Ecosystem
Community projects and products powered by AntV Infographic:
- ๐ผ Products
- Alma โ Desktop AI provider orchestration app with Infographic
- Markdown Viewer โ Markdown viewer with Infographic support, export to Word, extensions for Chrome/VS Code/Firefox
- InfographicAI โ Generate PPT slides powered by Infographic
- LangChat Slides โ Next-Gen AI Slide Generator using @antv/infographic
- Nowledge Mem โ AI Memory Bank with Presentation Creator supporting Infographic
- WeChat Markdown Editor โ Markdown to WeChat article editor with Infographic
- Welight โ WeChat article creation platform with Infographic support
- Zojo โ Generate professional infographics with simple syntax
- ๐ฆ Libraries
- astro-koharu โ Anime blog theme (Astro) with Infographic support
- docsify-infographic โ Plugin to render Infographic diagrams in Docsify
- feffery-infographic โ Create infographics in Python with Plotly Dash
- infographic-cli โ CLI tool to generate SVG infographics
- infographic-for-react โ React component wrapper for @antv/infographic
- markdown-it-infographic โ markdown-it plugin for @antv/infographic
- markstream-vue โ Streaming Markdown rendering for Vue 3 with Infographic
- obsidian-infographic โ Obsidian plugin for @antv/infographic
- slidev-addon-infographic โ @antv/infographic component for Slidev
- VSCode Extension โ Preview Infographic in VSCode Markdown files
๐ก Have a project using AntV Infographic? Share it in Issue #99!
๐ฌ Community & Communication
- Submit your questions or suggestions on GitHub
- Join GitHub Discussions to communicate with the community
- Contributions are welcome! Let's improve AntV Infographic together!
If you have any suggestions, feel free to communicate with us on GitHub! Star โญ us to show your support.
๐ License
This project is open source under the MIT license. See LICENSE for details.
File tree
777antvis/infographicView on GitHub
__tests__/
setup/
dom-polyfills.ts
tsconfig.json
unit/
designs/
structures/
chart-line.test.tsx
chart-pie.test.ts
utils/
color.test.ts
geometry.test.tsx
hierarchy-color.test.ts
item.test.ts
dev/
ItemPreview.test.tsx
editor/
commands/
batch.test.ts
update-element.test.ts
update-options.test.ts
update-text.test.ts
interactions/
brush-select.test.ts
click-select.test.ts
dblclick-edit-text.test.ts
drag-canvas.test.ts
drag-element.test.ts
hotkey-history.test.ts
select-highlight.test.ts
zoom-wheel.test.ts
managers/
command-manager.test.ts
interaction-manager.test.ts
plugin-manager.test.ts
state-manager.test.ts
sync-registry.test.ts
plugins/
components/
popover.test.ts
core-sync.test.ts
overlay-root.test.ts
reset-viewbox.test.ts
resize-element.test.ts
utils/
click-handler.test.ts
coordinate.test.ts
data.test.ts
element.test.ts
event.test.ts
extension.test.ts
hotkey.test.ts
object.test.ts
exporter/
svg.test.ts
jsx/
animate-examples.test.tsx
animate.test.tsx
components/
text.test.tsx
defs.test.tsx
jsx.test.tsx
layout.test.tsx
utils/
bounds.test.ts
bounds.test.tsx
children.test.ts
children.test.tsx
clone.test.ts
context.test.ts
defs.test.tsx
element.test.ts
escape.test.ts
is-fragment.test.ts
is-jsx-element.test.ts
is-number.test.ts
svg.test.ts
options/
parse-options.test.ts
renderer/
palette.test.ts
utils/
attrs.test.ts
id.test.ts
resource/
loaders/
svg.test.ts
utils/
data-uri.test.ts
parser.test.ts
ref.test.ts
runtime/
utils.test.ts
site/
live-editor/
templateManager.test.ts
ssr/
examples/
examples.test.ts
01-basic-list.txt
02-list-with-icons.txt
03-timeline.txt
04-themed-dark.txt
05-quarterly-revenue.txt
06-comparison.txt
07-hierarchy.txt
08-quadrant.txt
09-chart-bars.txt
10-swot-analysis.txt
11-list-with-icons-hand-drawn.txt
output/
01-basic-list.svg
02-list-with-icons.svg
03-timeline.svg
04-themed-dark.svg
05-quarterly-revenue.svg
06-comparison.svg
07-hierarchy.svg
08-quadrant.svg
09-chart-bars.svg
10-swot-analysis.svg
11-list-with-icons-hand-drawn.svg
syntax/
parse-syntax.test.ts
templates/
registry.test.ts
utils/
color.test.ts
data.test.ts
design.test.ts
font.test.ts
get-types.test.ts
hash.test.ts
icon.test.ts
is-browser.test.ts
is-node.test.ts
item.test.ts
join.test.ts
measure-text.test.ts
padding.test.ts
recognizer.test.ts
svg.test.ts
text.test.ts
types.test.ts
uuid.test.ts
viewbox.test.ts
version.test.ts
utils/
index.ts
svg.ts
.claude-plugin/
marketplace.json
plugin.json
.codecov.yml
.github/
workflows/
build.yml
deploy.yml
release.yml
.gitignore
.husky/
commit-msg
pre-commit
dev/
index.html
package.json
src/
App.tsx
Composite.tsx
data.ts
entry.tsx
hooks/
useKeyboardNavigation.ts
usePreviewData.ts
usePreviewInteractions.ts
usePreviewSettings.ts
Infographic.tsx
ItemPreview.tsx
Playground.tsx
Preview.tsx
StreamPreview.tsx
utils/
search-params.ts
storage.ts
tsconfig.json
vite.config.ts
eslint.config.ts
LICENSE
package.json
README.md
README.zh-CN.md
scripts/
version.mjs
shared/
datasets.ts
get-template-data.ts
site/
.eslintignore
.eslintrc
.gitignore
.npmrc
.prettierrc
colors.js
next-env.d.ts
next.config.js
package.json
plugins/
markdownToHtml.js
remark-header-custom-ids.js
remark-smartypants.js
postcss.config.js
public/
CNAME
favicon.svg
fonts/
Source-Code-Pro-Bold.woff2
Source-Code-Pro-Regular.woff2
google3a8bd2a83c072330.html
images/
antv.svg
claude.svg
deepseek.svg
gemini.svg
gradient-dark.png
gradient.png
logo.svg
openai.svg
qwen.svg
xai.svg
zenmux.svg
js/
jsfiddle-integration-babel.js
jsfiddle-integration.js
robots.txt
README.md
scripts/
deadLinkChecker.js
generate-llms.js
headingIDHelpers/
generateHeadingIDs.js
validateHeadingIDs.js
walk.js
headingIdLinter.js
watch-content.js
src/
components/
AIPlayground/
ChatPanel.tsx
ConfigPanel.tsx
constants.ts
helpers.ts
index.tsx
PreviewPanel.tsx
Prompt.ts
Service.ts
types.ts
Breadcrumbs.tsx
Button.tsx
ButtonLink.tsx
ContentReloader.tsx
CopyToast.tsx
DocsFooter.tsx
ErrorDecoderContext.tsx
ExternalLink.tsx
Gallery/
DetailPage.tsx
GalleryPage.tsx
templates.ts
Icon/
IconAntV.tsx
IconCanary.tsx
IconChevron.tsx
IconClose.tsx
IconCodeBlock.tsx
IconCopy.tsx
IconDeepDive.tsx
IconDownload.tsx
IconEllipsis.tsx
IconError.tsx
IconErrorCircle.tsx
IconExperimental.tsx
IconGitHub.tsx
IconHamburger.tsx
IconLink.tsx
IconNavArrow.tsx
IconNewPage.tsx
IconNote.tsx
IconPitfall.tsx
IconRestart.tsx
IconRocket.tsx
IconSearch.tsx
IconSolution.tsx
IconStarTwinkle.tsx
IconTerminal.tsx
IconThreads.tsx
IconWarning.tsx
IconPage/
index.tsx
Infographic.tsx
LanguageSwitcher/
index.tsx
Layout/
Footer.tsx
getRouteMeta.tsx
HomeContent.tsx
HomePage/
AIInfographicFlow.tsx
BrowserChrome.tsx
CodePlayground.tsx
Gallery.tsx
PadView.tsx
QuickStartDemo.tsx
StreamingSyntaxShowcase.tsx
StylizeDemo.tsx
Page.tsx
Sidebar/
index.tsx
SidebarButton.tsx
SidebarLink.tsx
SidebarRouteTree.tsx
SidebarNav/
index.tsx
SidebarNav.tsx
Toc.tsx
TopNav/
BrandMenu.tsx
index.tsx
TopNav.tsx
useTocHighlight.tsx
LiveEditor/
defaultSyntax.ts
EditorPanel.tsx
index.tsx
PreviewPanel.tsx
syntaxManager.ts
templateManager.ts
utils.ts
Logo.tsx
MDX/
BlogCard.tsx
CodeBlock/
CodeBlock.tsx
index.tsx
shared.tsx
CodeEditor.tsx
ConsoleBlock.tsx
ErrorDecoder.tsx
ExpandableCallout.tsx
ExpandableExample.tsx
Heading.tsx
InfographicPlayground.tsx
InlineCode.tsx
Intro.tsx
LanguagesContext.tsx
Link.tsx
MDXComponents.module.css
MDXComponents.tsx
PackageImport.tsx
Sandpack/
Themes.tsx
TocContext.tsx
PageHeading.tsx
ResourceLoader.ts
Search.tsx
Seo.tsx
SocialBanner.tsx
Tag.tsx
content/
index.en.md
index.md
learn/
contributing.en.md
contributing.md
core-concepts.en.md
core-concepts.md
core-theory.en.md
core-theory.md
custom-design.en.md
custom-design.md
custom-fonts.en.md
custom-fonts.md
custom-items.en.md
custom-items.md
custom-palette.en.md
custom-palette.md
custom-pattern.en.md
custom-pattern.md
custom-resource-loader.en.md
custom-resource-loader.md
custom-structure.en.md
custom-structure.md
custom-template.en.md
custom-template.md
custom-theme.en.md
custom-theme.md
data.en.md
data.md
design.en.md
design.md
editor.en.md
... 513 moreFAQ
antv-infographic-skills is a Claude Code plugin with 5 hand-picked skills for content work, indexed on Flowy. Install it with the command on its page. It includes infographic-creator, infographic-item-creator, infographic-structure-creator. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is antv-infographic-skills?
- ๐ฆ An Infographic Generation and Rendering Framework, bring words to life! AntV Infographic is AntV's next-generation declarative infographic visualization engine.
- How do I install antv-infographic-skills?
- Run these in Claude Code: /plugin marketplace add antvis/infographic then /plugin install antv-infographic-skills@antv-infographic. Then prompt normally.
- Does antv-infographic-skills auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is antv-infographic-skills free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.