[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73588":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":35,"lastSyncTime":36,"discoverSource":37},73588,"Infographic","antvis\u002FInfographic","antvis","🦋 An Infographic Generation and Rendering Framework, bring words to life with AI!","https:\u002F\u002Finfographic.antv.vision",null,"TypeScript",5241,393,16,14,0,96,112,206,288,113.79,"MIT License",false,"main",true,[27,28,29,30,31],"ai","antv","infographic","llm","visualization","2026-06-12 04:01:10","\u003Cimg src=\"https:\u002F\u002Fgw.alipayobjects.com\u002Fzos\u002Fantfincdn\u002FR8sN%24GNdh6\u002Flanguage.svg\" width=\"18\"> [简体中文](.\u002FREADME.zh-CN.md) | English\n\n\u003Cdiv align=\"center\">\n\n# Infographic, bring words to life!\n\n🦋 An Infographic Generation and Rendering Framework, bring words to life!\n\n\u003Ca href=\"https:\u002F\u002Ftrendshift.io\u002Frepositories\u002F15838\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Ftrendshift.io\u002Fapi\u002Fbadge\u002Frepositories\u002F15838\" alt=\"antvis%2FInfographic | Trendshift\" style=\"width: 250px; height: 55px;\" width=\"250\" height=\"55\"\u002F>\u003C\u002Fa>\n\n[![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@antv\u002Finfographic.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@antv\u002Finfographic)\n[![build status](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Factions\u002Fworkflow\u002Fstatus\u002Fantvis\u002Finfographic\u002Fbuild.yml)](https:\u002F\u002Fgithub.com\u002Fantvis\u002Finfographic\u002Factions)\n![Visitors](https:\u002F\u002Fhitscounter.dev\u002Fapi\u002Fhit?url=https:\u002F\u002Fgithub.com\u002Fantvis\u002Finfographic&label=Visitors&icon=graph-up&color=%23dc3545&message=&style=flat&tz=UTC)\n[![license](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fl\u002F@antv\u002Finfographic.svg)](.\u002FLICENSE)\n\n\u003Cimg src=\"https:\u002F\u002Fmdn.alipayobjects.com\u002Fhuamei_qa8qxu\u002Fafts\u002Fimg\u002FA*EdkXSojOxqsAAAAAQHAAAAgAemJ7AQ\u002Foriginal\" width=\"256\">\n\n\u003C\u002Fdiv>\n\n**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.\n\n\u003Cdiv align=\"center\">\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Finfographic.antv.vision\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWebsite-2F54EB?style=for-the-badge\" alt=\"Website\" \u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fantvis\u002Finfographic\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FGitHub-000000?style=for-the-badge&logo=github&logoColor=white\" alt=\"GitHub\" \u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Finfographic.antv.vision\u002Flearn\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDocs-722ED1?style=for-the-badge\" alt=\"Docs\" \u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Finfographic.antv.vision\u002Fgallery\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FGallery-13C2C2?style=for-the-badge\" alt=\"Gallery\" \u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fantvis\u002FInfographic\u002Ftree\u002Fmain\u002Fskills\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FSkills-FA8C16?style=for-the-badge\" alt=\"Skills\" \u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Finfographic.antv.vision\u002Fai\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FAI%20Agent-EB2F96?style=for-the-badge\" alt=\"AI Agent\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cimg src=\"https:\u002F\u002Fmdn.alipayobjects.com\u002Fhuamei_qa8qxu\u002Fafts\u002Fimg\u002FA*ZdeISZWHuyIAAAAAbEAAAAgAemJ7AQ\u002Ffmt.webp\" width=\"768\" alt=\"AntV Infographic Preview\">\n\n\u003C\u002Fdiv>\n\n## ✨ Features\n\n- 🤖 **AI-friendly**: Configuration and syntax are tuned for AI generation, provide concise prompts, and support AI streaming output and rendering\n- 📦 **Ready to use**: ~200 built-in infographic templates, data-item components, and layouts to build professional infographics in minutes\n- 🎨 **Theme system**: Hand-drawn, gradients, patterns, multiple preset themes, plus deep customization\n- 🧑🏻‍💻 **Built-in editor**: Includes an editor for infographics so AI-generated results can be edited further\n- 📐 **High-quality SVG output**: Renders with SVG by default to ensure visual fidelity and easy editing\n\n## 🚀 Installation\n\n```bash\nnpm install @antv\u002Finfographic\n```\n\n## 📝 Quick Start\n\n[![](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FGetting%20Started-2F54EB)](https:\u002F\u002Finfographic.antv.vision\u002Flearn\u002Fgetting-started)\n[![](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FInfographic%20Syntax-13C2C2)](https:\u002F\u002Finfographic.antv.vision\u002Flearn\u002Finfographic-syntax)\n[![](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FConfiguration-722ED1)](https:\u002F\u002Finfographic.antv.vision\u002Freference\u002Finfographic-options)\n\n```ts\nimport { Infographic } from '@antv\u002Finfographic';\n\nconst infographic = new Infographic({\n  container: '#container',\n  width: '100%',\n  height: '100%',\n  editable: true,\n});\n\ninfographic.render(`\ninfographic list-row-simple-horizontal-arrow\ndata\n  lists\n    - label Step 1\n      desc Start\n    - label Step 2\n      desc In Progress\n    - label Step 3\n      desc Complete\n`);\n```\n\nThe rendered result looks like this:\n\n\u003Cimg src=\"https:\u002F\u002Fmdn.alipayobjects.com\u002Fhuamei_qa8qxu\u002Fafts\u002Fimg\u002FA*uvj8Qb26F1MAAAAARAAAAAgAemJ7AQ\u002Ffmt.webp\" width=\"480\" alt=\"AntV Infographic DEMO\">\n\n## Streaming Rendering\n\n[![](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDemo-D46A6A)](https:\u002F\u002Finfographic.antv.vision\u002Flearn\u002Finfographic-syntax)\n\nWith a highly fault-tolerant infographic syntax you can stream AI output in real time and progressively render the infographic.\n\n```ts\nlet buffer = '';\nfor (const chunk of chunks) {\n  buffer += chunk;\n  infographic.render(buffer);\n}\n```\n\n\u003Cimg src=\"https:\u002F\u002Fmdn.alipayobjects.com\u002Fhuamei_qa8qxu\u002Fafts\u002Fimg\u002FA*e_PFSZrR9AQAAAAASdAAAAgAemJ7AQ\u002Foriginal\" width=\"480\" alt=\"AntV Infographic Streaming Rendering\">\n\n## 🔧 Skills Integration\n\nAntV Infographic provides skills to integrate with AI agents:\n\n- **infographic-creator**: Create an HTML file that renders an infographic\n- **infographic-syntax-creator**: Generate infographic syntax from descriptions\n- **infographic-structure-creator**: Generate custom structure designs\n- **infographic-item-creator**: Generate custom item designs\n- **infographic-template-updater**: (For developers) update the template library\n\n### Claude Code\n\n> Claude marketplace is now available. You can install from marketplace, or keep using manual install.\n\n```bash\n\u002Fplugin marketplace add https:\u002F\u002Fgithub.com\u002Fantvis\u002FInfographic.git\n\u002Fplugin install antv-infographic-skills@antv-infographic\n```\n\nManual install:\n\n```bash\nset -e\n\nVERSION=0.2.4 # Replace with the latest tag, e.g. 0.2.14\nBASE_URL=https:\u002F\u002Fgithub.com\u002Fantvis\u002FInfographic\u002Freleases\u002Fdownload\nmkdir -p .claude\u002Fskills\n\ncurl -L --fail -o skills.zip \"$BASE_URL\u002F$VERSION\u002Fskills.zip\"\nunzip -q -o skills.zip -d .claude\u002Fskills\nrm -f skills.zip\n```\n\n### Codex\n\n> Enter codex\n\n```codex\n# Replace \u003CSKILL> with the skill name, e.g. infographic-creator\n# https:\u002F\u002Fgithub.com\u002Fantvis\u002FInfographic\u002Ftree\u002Fmain\u002Fskills\u002F\u003CSKILL>\n$skill-installer install https:\u002F\u002Fgithub.com\u002Fantvis\u002FInfographic\u002Ftree\u002Fmain\u002Fskills\u002Finfographic-creator\n```\n\n## 🌐 Ecosystem\n\nCommunity projects and products powered by AntV Infographic:\n\n- 💼 **Products**\n  - [Alma](https:\u002F\u002Falma.now\u002F) — Desktop AI provider orchestration app with Infographic\n  - [Markdown Viewer](https:\u002F\u002Fdocu.md) — Markdown viewer with Infographic support, export to Word, extensions for Chrome\u002FVS Code\u002FFirefox\n  - [InfographicAI](https:\u002F\u002Finfographic-ai.tuntun.site\u002F) — Generate PPT slides powered by Infographic\n  - [LangChat Slides](https:\u002F\u002Fgithub.com\u002FTyCoding\u002Flangchat-slides) — Next-Gen AI Slide Generator using @antv\u002Finfographic\n  - [Nowledge Mem](https:\u002F\u002Fmem.nowledge.co\u002F) — AI Memory Bank with Presentation Creator supporting Infographic\n  - [WeChat Markdown Editor](https:\u002F\u002Fmd.doocs.org\u002F) — Markdown to WeChat article editor with Infographic\n  - [Welight](https:\u002F\u002Fwaer.ltd\u002F) — WeChat article creation platform with Infographic support\n  - [Zojo](https:\u002F\u002Fzojo.ai\u002Finfographic) — Generate professional infographics with simple syntax\n- 📦 **Libraries**\n  - [astro-koharu](https:\u002F\u002Fgithub.com\u002FcosZone\u002Fastro-koharu) — Anime blog theme (Astro) with Infographic support\n  - [docsify-infographic](https:\u002F\u002Fgithub.com\u002Fbulexu\u002Fdocsify-infographic) — Plugin to render Infographic diagrams in Docsify\n  - [feffery-infographic](https:\u002F\u002Fgithub.com\u002FHogaStack\u002Ffeffery-infographic) — Create infographics in Python with Plotly Dash\n  - [infographic-cli](https:\u002F\u002Fgithub.com\u002Flyw405\u002Finfographic-cli) — CLI tool to generate SVG infographics\n  - [infographic-for-react](https:\u002F\u002Fgithub.com\u002Flyw405\u002Finfographic-for-react) — React component wrapper for @antv\u002Finfographic\n  - [markdown-it-infographic](https:\u002F\u002Fgithub.com\u002Fhcg1023\u002Fmarkdown-it-infographic) — markdown-it plugin for @antv\u002Finfographic\n  - [markstream-vue](https:\u002F\u002Fgithub.com\u002FSimon-He95\u002Fmarkstream-vue) — Streaming Markdown rendering for Vue 3 with Infographic\n  - [obsidian-infographic](https:\u002F\u002Fgithub.com\u002Fhcg1023\u002Fobsidian-infographic) — Obsidian plugin for @antv\u002Finfographic\n  - [slidev-addon-infographic](https:\u002F\u002Fgithub.com\u002Ffxss5201\u002Fslidev-addon-infographic) — @antv\u002Finfographic component for Slidev\n  - [VSCode Extension](https:\u002F\u002Fgithub.com\u002Fliwx2000\u002Finfographic-vscode-extension) — Preview Infographic in VSCode Markdown files\n\n> 💡 Have a project using AntV Infographic? Share it in [Issue #99](https:\u002F\u002Fgithub.com\u002Fantvis\u002FInfographic\u002Fissues\u002F99)!\n\n## 💬 Community & Communication\n\n- Submit your questions or suggestions on GitHub\n- Join [GitHub Discussions](https:\u002F\u002Fgithub.com\u002Fantvis\u002Finfographic\u002Fdiscussions) to communicate with the community\n- Contributions are welcome! Let's improve AntV Infographic together!\n\nIf you have any suggestions, feel free to communicate with us on GitHub! Star ⭐ us to show your support.\n\n- [AntV Official Website](https:\u002F\u002Fantv.antgroup.com\u002F)\n- [GitHub Repository](https:\u002F\u002Fgithub.com\u002Fantvis\u002Finfographic)\n- [Issue Tracker](https:\u002F\u002Fgithub.com\u002Fantvis\u002Finfographic\u002Fissues)\n\n## 📄 License\n\nThis project is open source under the **MIT** license. See [LICENSE](.\u002FLICENSE) for details.\n","AntV Infographic 是一个信息图生成和渲染框架，旨在通过AI技术将文字转化为生动的视觉内容。其核心功能包括对AI友好的配置与语法设计、支持流式输出与渲染，内置约200个信息图模板及组件，以及多样的主题系统，允许用户快速构建专业且美观的信息图表。该框架采用TypeScript开发，具有高度的可定制性和易用性。适用于需要高效传达复杂信息或讲述数据故事的各种场景，如新闻报道、市场分析报告、教育材料等。",2,"2026-06-11 03:46:16","high_star"]