infographic-cli 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,33 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2025-01-20
+
+### Added
+- Initial release of `@antv/infographic-cli`
+- Simple command `ifgc` to render infographics from .info files to SVG
+- Support for 236+ built-in infographic templates
+- `template` command to list all available templates
+- Theme support (`--theme` option)
+- Background color customization (`--background` option)
+- Config file support (`--config` option)
+- Stdin input support for AI integration
+- Comprehensive test suite (26 tests)
+
+### Features
+- Render from file: `ifgc -i input.info -o output.svg`
+- Render from stdin: `echo "..." | ifgc -o output.svg`
+- List templates: `ifgc template`
+- Automatic output file naming (defaults to input.svg)
+- Quiet mode for script usage (`--quiet`)
+
+### Dependencies
+- `@antv/infographic` ^0.2.11
+- `chalk` ^5.4.1
+- `commander` ^12.1.0
+
+[0.1.0]: https://github.com/lyw405/infographic-cli/releases/tag/v0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 lyw405
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,190 @@
+# @antv/infographic-cli
+
+[![npm version](https://badge.fury.io/js/%40antv%2Finfographic-cli.svg)](https://www.npmjs.com/package/@antv/infographic-cli)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Node.js Version](https://img.shields.io/node/v/%40antv%2Finfographic-cli.svg)](https://www.npmjs.com/package/@antv/infographic-cli)
+
+Command-line interface for [AntV Infographic](https://github.com/antvis/Infographic) - render declarative infographic syntax to SVG images.
+
+## Quick Start
+
+```bash
+# Install
+npm install -g @antv/infographic-cli
+
+# Render from stdin
+echo 'infographic list-row-simple-horizontal-arrow
+data
+  title My First Infographic
+  items
+    - label Step 1
+    - label Step 2' | ifgc -o output.svg
+
+# Render from file
+ifgc -i input.info -o output.svg
+
+# List available templates
+ifgc template
+```
+
+## Installation
+
+```bash
+npm install -g @antv/infographic-cli
+```
+
+This installs two commands: `ifgc` (short) and `infographic` (long).
+
+## Usage
+
+### Basic Rendering
+
+```bash
+# From file (output defaults to input.svg)
+ifgc -i input.info
+
+# Specify output file
+ifgc -i input.info -o output.svg
+
+# From stdin
+echo '...' | ifgc -o output.svg
+
+# From stdin with file input
+cat input.info | ifgc -o output.svg
+```
+
+### Options
+
+| Option | Description |
+|--------|-------------|
+| `-i, --input <file>` | Input .info file (omit to read from stdin) |
+| `-o, --output <file>` | Output file (default: input.svg) |
+| `--background <color>` | Background color (default: transparent) |
+| `-c, --config <file>` | JSON configuration file |
+| `-t, --theme <name>` | Theme name |
+| `-q, --quiet` | Suppress log output |
+
+### List Templates
+
+```bash
+ifgc template
+```
+
+Visit [AntV Infographic](https://github.com/antvis/Infographic) to see template previews.
+
+## Examples
+
+### Example 1: Simple Step List
+
+```bash
+cat > steps.info << EOF
+infographic list-row-simple-horizontal-arrow
+data
+  title Getting Started
+  desc Three simple steps to begin
+  items
+    - label Step 1
+      desc Install the package
+    - label Step 2
+      desc Create your first infographic
+    - label Step 3
+      desc Export and share
+EOF
+
+ifgc -i steps.info -o steps.svg
+```
+
+### Example 2: Timeline
+
+```bash
+cat > timeline.info << EOF
+infographic timeline-horizontal-basic-date
+data
+  title Project Roadmap
+  items
+    - label Q1
+      desc Planning
+    - label Q2
+      desc Development
+    - label Q3
+      desc Testing
+    - label Q4
+      desc Launch
+EOF
+
+ifgc -i timeline.info -o timeline.svg
+```
+
+### Example 3: Using Theme
+
+```bash
+cat > swot.info << EOF
+infographic compare-quadrant-four-areas-card
+data
+  title SWOT Analysis
+  items
+    - label Strengths
+      desc Internal advantages
+    - label Weaknesses
+      desc Internal limitations
+    - label Opportunities
+      desc External possibilities
+    - label Threats
+      desc External risks
+EOF
+
+ifgc -i swot.info -o swot.svg -t dark
+```
+
+### Example 4: From stdin
+
+```bash
+echo 'infographic list-row-simple-horizontal-arrow
+data
+  title Quick Tasks
+  items
+    - label Task A
+    - label Task B
+    - label Task C' | ifgc -o tasks.svg
+```
+
+## Output Format
+
+### SVG (Default)
+
+Infographic is a vector graphics format, perfect for:
+
+- **Web use** - Scalable, interactive, small file size
+- **Documentation** - GitHub, GitLab, Notion, etc.
+- **Design tools** - Figma, Sketch, Illustrator
+- **Code documentation** - Docusaurus, VitePress, etc.
+
+### Converting to PNG
+
+If you need PNG for specific use cases, you can convert the SVG:
+
+**Online tools**:
+- [SVG to PNG](https://svgtopng.com/)
+- [CloudConvert](https://cloudconvert.com/svg-to-png)
+
+**Command line** (requires additional tools):
+- ImageMagick: `convert output.svg output.png`
+- Node.js with sharp: `sharp('output.svg').png().toFile('output.png')`
+
+## Infographic Syntax
+
+Learn more about the declarative infographic syntax at [antvis/Infographic](https://github.com/antvis/Infographic).
+
+## See Also
+
+- [AntV Infographic](https://github.com/antvis/Infographic) - The core library
+- [Infographic Documentation](https://infographic.antv.vision/) - Official documentation
+- [Infographic Editor](https://infographic.antv.vision/examples) - Online examples
+
+## License
+
+MIT &copy; 2026 [lyw405](https://github.com/lyw405)
+
+## Changelog
+
+See [CHANGELOG.md](CHANGELOG.md) for a list of changes in each version.

package/dist/cli.js

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+import { error } from './utils/error.js';
+import { program } from './index.js';
+try {
+    await program.parseAsync(process.argv);
+}
+catch (err) {
+    error(err instanceof Error ? err.message : String(err));
+}

package/dist/commands/render.js

@@ -0,0 +1,59 @@
+import fs from 'fs/promises';
+import { renderToString } from '@antv/infographic/ssr';
+import { error, info, success } from '../utils/error.js';
+import { getInputData } from '../utils/input.js';
+import { getDefaultOutput, writeOutput } from '../utils/output.js';
+export async function renderCommand(options) {
+    const { input, output: userOutput, quiet, config: configFile, theme, } = options;
+    const log = quiet ? () => { } : info;
+    // Validate input
+    if (input && input !== '-') {
+        try {
+            await fs.access(input);
+        }
+        catch {
+            error(`Input file "${input}" doesn't exist`);
+        }
+    }
+    // Read config file if provided
+    let config = {};
+    if (configFile) {
+        try {
+            const configContent = await fs.readFile(configFile, 'utf-8');
+            config = JSON.parse(configContent);
+        }
+        catch {
+            error(`Configuration file "${configFile}" is invalid or doesn't exist`);
+        }
+    }
+    // Merge CLI options with config
+    if (theme)
+        config.theme = theme;
+    // Determine output file (always SVG)
+    let output = userOutput;
+    if (!output) {
+        const actualInput = input && input !== '-' ? input : undefined;
+        output = getDefaultOutput(actualInput);
+    }
+    else if (output === '-') {
+        output = '/dev/stdout';
+    }
+    // Read input data
+    const inputData = await getInputData(input && input !== '-' ? input : undefined);
+    if (!inputData.trim()) {
+        error('No input data provided');
+    }
+    log(`Rendering infographic...`);
+    try {
+        // Render using SSR
+        const svgString = await renderToString(inputData, config);
+        await writeOutput(output, svgString);
+        if (output !== '/dev/stdout') {
+            success(`Infographic rendered to ${output}`);
+        }
+    }
+    catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        error(`Failed to render: ${message}`);
+    }
+}

package/dist/commands/template.js

@@ -0,0 +1,11 @@
+import { getTemplates } from '@antv/infographic';
+import { info } from '../utils/error.js';
+export async function templateCommand() {
+    const templates = getTemplates();
+    info(`Available templates (${templates.length}):\n`);
+    for (const templateName of templates) {
+        console.log(`  • ${templateName}`);
+    }
+    console.log('');
+    console.log('📖 Visit https://github.com/antvis/Infographic to see template previews and examples');
+}

package/dist/commands/validate.js

@@ -0,0 +1,33 @@
+import { parseSyntax } from '@antv/infographic';
+import { error, success, warn } from '../utils/error.js';
+import { getInputData } from '../utils/input.js';
+export async function validateCommand(input) {
+    const inputData = await getInputData(input);
+    if (!inputData.trim()) {
+        error('No input data provided');
+    }
+    const result = parseSyntax(inputData);
+    if (result.errors.length > 0) {
+        console.error('\nSyntax errors:\n');
+        for (const err of result.errors) {
+            console.error(`  • ${err.message}`);
+            console.error(`    at line ${err.line}`);
+            if (err.raw) {
+                console.error(`    near: ${err.raw.substring(0, 50)}...`);
+            }
+        }
+        console.error('');
+        process.exit(1);
+    }
+    if (result.warnings.length > 0) {
+        warn('Syntax validated with warnings:\n');
+        for (const warning of result.warnings) {
+            console.warn(`  • ${warning.message}`);
+            console.warn(`    at line ${warning.line}`);
+        }
+        console.warn('');
+    }
+    else {
+        success('Syntax is valid!');
+    }
+}

package/dist/index.js

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import { renderCommand } from './commands/render.js';
+import { templateCommand } from './commands/template.js';
+import { error } from './utils/error.js';
+const packageJson = await import('../package.json', {
+    with: { type: 'json' },
+});
+const program = new Command();
+program
+    .name('ifgc')
+    .description('Command-line interface for AntV Infographic - render declarative infographics to SVG')
+    .version(packageJson.default.version);
+// Main options (render by default, like mmdc)
+program
+    .option('-i, --input <file>', 'Input .info file (omit to read from stdin)')
+    .option('-o, --output <file>', 'Output file (default: input file with .svg extension)')
+    .option('--background <color>', 'Background color (default: transparent)', 'transparent')
+    .option('-c, --config <file>', 'JSON configuration file')
+    .option('-t, --theme <name>', 'Theme name')
+    .option('-q, --quiet', 'Suppress log output')
+    .action(async (options) => {
+    try {
+        await renderCommand(options);
+    }
+    catch (err) {
+        error(err instanceof Error ? err.message : String(err));
+    }
+});
+// Template subcommand (helper)
+program
+    .command('template')
+    .description('List available infographic templates')
+    .action(async () => {
+    try {
+        await templateCommand();
+    }
+    catch (err) {
+        error(err instanceof Error ? err.message : String(err));
+    }
+});
+export { program };

package/dist/utils/error.js

@@ -0,0 +1,11 @@
+import chalk from 'chalk';
+export function error(message) {
+    console.error(chalk.red(`\n✖ ${message}\n`));
+    process.exit(1);
+}
+export function info(message) {
+    console.info(chalk.cyan(message));
+}
+export function success(message) {
+    console.info(chalk.green(`\n✔ ${message}\n`));
+}

package/dist/utils/input.js

@@ -0,0 +1,23 @@
+import fs from 'fs/promises';
+import readline from 'readline';
+export async function getInputData(inputFile) {
+    if (inputFile) {
+        return await fs.readFile(inputFile, 'utf-8');
+    }
+    return await new Promise((resolve, reject) => {
+        const rl = readline.createInterface({
+            input: process.stdin,
+            crlfDelay: Infinity,
+        });
+        let data = '';
+        rl.on('line', (line) => {
+            data += line + '\n';
+        });
+        rl.on('close', () => {
+            resolve(data);
+        });
+        rl.on('error', (err) => {
+            reject(err);
+        });
+    });
+}

package/dist/utils/output.js

@@ -0,0 +1,19 @@
+import fs from 'fs/promises';
+import path from 'path';
+export async function writeOutput(output, data) {
+    if (output === '/dev/stdout') {
+        process.stdout.write(data);
+    }
+    else {
+        const outputDir = path.dirname(output);
+        await fs.mkdir(outputDir, { recursive: true });
+        await fs.writeFile(output, data);
+    }
+}
+export function getDefaultOutput(input) {
+    if (input) {
+        const inputWithoutExt = input.replace(/\.(info|txt)$/, '');
+        return `${inputWithoutExt}.svg`;
+    }
+    return 'out.svg';
+}

package/dist-types/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist-types/commands/render.d.ts

@@ -0,0 +1,9 @@
+export interface RenderOptions {
+    input?: string;
+    output?: string;
+    background?: string;
+    quiet?: boolean;
+    config?: string;
+    theme?: string;
+}
+export declare function renderCommand(options: RenderOptions): Promise<void>;

package/dist-types/commands/template.d.ts

@@ -0,0 +1 @@
+export declare function templateCommand(): Promise<void>;

package/dist-types/commands/validate.d.ts

@@ -0,0 +1 @@
+export declare function validateCommand(input?: string): Promise<void>;

package/dist-types/index.d.ts

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+declare const program: Command;
+export { program };

package/dist-types/utils/error.d.ts

@@ -0,0 +1,3 @@
+export declare function error(message: string): never;
+export declare function info(message: string): void;
+export declare function success(message: string): void;

package/dist-types/utils/input.d.ts

@@ -0,0 +1 @@
+export declare function getInputData(inputFile: string | undefined): Promise<string>;

package/dist-types/utils/output.d.ts

@@ -0,0 +1,2 @@
+export declare function writeOutput(output: string, data: string | Buffer): Promise<void>;
+export declare function getDefaultOutput(input: string | undefined): string;

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "infographic-cli",
+  "version": "0.1.0",
+  "description": "Command-line interface for AntV Infographic",
+  "license": "MIT",
+  "author": "lyw405",
+  "type": "module",
+  "bin": {
+    "ifgc": "./dist/cli.js",
+    "infographic": "./dist/cli.js"
+  },
+  "engines": {
+    "node": "^18.19 || >=20.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist-types/index.d.ts"
+    }
+  },
+  "types": "./dist-types/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "lint": "eslint src",
+    "test": "vitest --run",
+    "test:examples": "vitest --run __tests__/integration/examples.test.ts",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@antv/infographic": "^0.2.11",
+    "chalk": "^5.4.1",
+    "commander": "^12.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.53.1",
+    "@typescript-eslint/parser": "^8.53.1",
+    "eslint": "^9.39.2",
+    "eslint-plugin-import": "^2.32.0",
+    "globals": "^17.0.0",
+    "typescript": "^5.9.2",
+    "vitest": "^3.2.4"
+  },
+  "files": [
+    "dist",
+    "dist-types",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "infographic",
+    "cli",
+    "visualization",
+    "antv"
+  ]
+}