{"id":41701881,"url":"https://github.com/bulexu/docsify-infographic","last_synced_at":"2026-02-03T14:00:48.812Z","repository":{"id":333990739,"uuid":"1139561081","full_name":"bulexu/docsify-infographic","owner":"bulexu","description":"A plugin to render @antv/infographic diagrams in docsify","archived":false,"fork":false,"pushed_at":"2026-01-22T09:18:38.000Z","size":129,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-22T20:02:48.434Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bulexu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-22T05:46:34.000Z","updated_at":"2026-01-22T09:18:41.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/bulexu/docsify-infographic","commit_stats":null,"previous_names":["bulexu/docsify-infographic"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/bulexu/docsify-infographic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bulexu%2Fdocsify-infographic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bulexu%2Fdocsify-infographic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bulexu%2Fdocsify-infographic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bulexu%2Fdocsify-infographic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bulexu","download_url":"https://codeload.github.com/bulexu/docsify-infographic/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bulexu%2Fdocsify-infographic/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29047051,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-03T10:09:22.136Z","status":"ssl_error","status_checked_at":"2026-02-03T10:09:16.814Z","response_time":96,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-24T21:00:25.283Z","updated_at":"2026-02-03T14:00:48.797Z","avatar_url":"https://github.com/bulexu.png","language":"JavaScript","readme":"# docsify-infographic\n\nA docsify plugin to render [AntV Infographic](https://infographic.antv.vision/) diagrams.\n\n[English](#english) | [中文](#chinese)\n\n\u003cspan id=\"english\"\u003e\u003c/span\u003e\n\n## Demo Website\n\n\u003e The leaderboard is rendered using Infographic\n\n[Example](https://docs.what-if.top/#/zh-cn/guide/vibeCoding/README?id=%e6%8e%92%e8%a1%8c%e6%a6%9c)\n\n## Usage\n\nAdd Infographic and the plugin to your docsify project:\n\n```html\n\u003cscript\u003e\n  window.$docsify = {\n    infographicConfig: {\n      width: '100%',\n      height: '100%'\n    }\n  };\n\u003c/script\u003e\n\n\u003c!-- Load AntV Infographic --\u003e\n\u003cscript src=\"https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js\"\u003e\u003c/script\u003e\n\u003c!-- Load Plugin --\u003e\n\u003cscript src=\"https://unpkg.com/docsify-infographic@latest/dist/docsify-infographic.js\"\u003e\u003c/script\u003e\n```\n\n## Configuration Options\n\nConfigure rendering parameters via `window.$docsify.infographicConfig`:\n\n| Option | Default | Description |\n|------|--------|------|\n| width | '100%' | Infographic width, supports percentage or pixels |\n| height | '100%' | Infographic height, supports percentage or pixels |\n\n## Examples\n\nUse `infographic` as the code block language identifier in Markdown:\n\n```shell\n    ```infographic\n    infographic list-row-simple-horizontal-arrow\n      data\n        lists\n          - label Step 1\n            desc Start\n          - label Step 2\n            desc Processing\n          - label Step 3\n            desc Complete\n    ```\n```\n\n### Custom Size\n\nYou can specify width and height for a single infographic. Supports pixels (px) and percentages (%):\n\n```shell\n    ```infographic 100px*100px\n    infographic list-row-simple-horizontal-arrow\n      data\n        title: Small Chart\n    ```\n\n    ```infographic 50%*80%\n    infographic chart-column-simple\n      data\n        title: Wide Chart\n    ```\n\n    ```infographic 400px*auto\n    infographic chart-pie-donut-pill-badge\n      data\n        title: Fixed Width Chart\n    ```\n```\n\n- `infographic 100px*100px` - Fixed pixel size\n- `infographic 50%*80% ` - Percentage size relative to the parent container\n- Uses the default value from global configuration if not specified\n\nFor more chart types and syntax, please refer to [AntV Infographic Documentation](https://infographic.antv.vision/learn).\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Build plugin\nnpm run build\n\n# Run example\nnpm run example\n```\n\n## License\n\nMIT\n\n\u003cbr\u003e\n\u003cspan id=\"chinese\"\u003e\u003c/span\u003e\n\n## 示例网站\n\n\u003e 排行榜就是使用 Infographic 渲染的\n\n[Example](https://docs.what-if.top/#/zh-cn/guide/vibeCoding/README?id=%e6%8e%92%e8%a1%8c%e6%a6%9c)\n\n## 使用方法\n\n在 docsify 中添加 Infographic 和插件：\n\n```html\n\u003cscript\u003e\n  window.$docsify = {\n    infographicConfig: {\n      width: '100%',\n      height: '100%'\n    }\n  };\n\u003c/script\u003e\n\n\u003c!-- 加载 AntV Infographic --\u003e\n\u003cscript src=\"https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js\"\u003e\u003c/script\u003e\n\u003c!-- 加载插件 --\u003e\n\u003cscript src=\"https://unpkg.com/docsify-infographic@latest/dist/docsify-infographic.js\"\u003e\u003c/script\u003e\n```\n\n## 配置选项\n\n通过 `window.$docsify.infographicConfig` 配置渲染参数：\n\n| 选项 | 默认值 | 说明 |\n|------|--------|------|\n| width | '100%' | 信息图宽度，支持百分比或像素 |\n| height | '100%' | 信息图高度，支持百分比或像素 |\n\n## 示例\n\n在 Markdown 中使用 `infographic` 作为代码块语言标识：\n\n```shell\n    ```infographic\n    infographic list-row-simple-horizontal-arrow\n      data\n        lists\n          - label 步骤 1\n            desc 开始\n          - label 步骤 2\n            desc 进行中\n          - label 步骤 3\n            desc 完成\n    ```\n```\n\n### 自定义尺寸\n\n可以为单个信息图指定宽度和高度。支持像素（px）和百分比（%）：\n\n```shell\n    ```infographic 100px*100px\n    infographic list-row-simple-horizontal-arrow\n      data\n        title: 小尺寸图表\n    ```\n\n    ```infographic 50%*80%\n    infographic chart-column-simple\n      data\n        title: 宽图表\n    ```\n\n    ```infographic 400px*auto\n    infographic chart-pie-donut-pill-badge\n      data\n        title: 固定宽度图表\n    ```\n```\n\n- `infographic 100px*100px` - 固定像素尺寸\n- `infographic 50%*80%` - 相对父容器的百分比尺寸\n- 未指定时使用全局配置的默认值\n\n更多图表类型和语法请参考 [AntV Infographic 文档](https://infographic.antv.vision/learn)。\n\n## 开发\n\n```bash\n# 安装依赖\nnpm install\n\n# 构建插件\nnpm run build\n\n# 运行示例\nnpm run example\n```\n\n## License\n\nMIT\n","funding_links":[],"categories":["Plugins"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbulexu%2Fdocsify-infographic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbulexu%2Fdocsify-infographic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbulexu%2Fdocsify-infographic/lists"}