Mindchart

Create exquisite infographics from user-uploaded files or given text. Used when user requests to create an infographic.

Security Scan

The skill's files, instructions, and requested runtime dependencies are coherent with its stated purpose of generating infographics; no unexplained credential access or network endpoints were found.

Purpose & Capability

Name/description (create infographics) match the included artifacts: many template files, a large font file, and two Node scripts (ifgc2svg.js and svg2png.js) that convert the skill's DSL to SVG and then to PNG. The dependencies listed in SKILL.md (@antv/infographic, opentype.js, sharp) are appropriate for rendering and rasterizing infographics.

Instruction Scope

SKILL.md confines output to the AntV Infographic DSL and gives a strict generation workflow — appropriate for this skill. The two scripts read files from the current working directory and write outputs (input.ifgc/input.svg → output.svg/output.png). This means running the skill will cause file reads/writes relative to the agent's working directory; no instructions request unrelated system credentials or external network calls. Note: the DSL is rendered by a library (@antv/infographic/ssr) which interprets the DSL; that is expected for this use case but could be a place to review if you are concerned about malicious template content.

Install Mechanism

There is no automated install spec (instruction-only), which reduces installer risk. The SKILL.md asks to install standard Node dependencies; no download-from-URL, no obscure package hosts, and no install-time scripts were included in the registry metadata. The required packages are proportionate to the task.

Credentials

The skill declares no required environment variables, no primary credential, and no special config paths. The code reads local files only (templates, a bundled font file) and does not attempt to access environment secrets or network endpoints.

Persistence & Privilege

The skill is not always-enabled and has default agent-invocation settings. It does not request permanent elevated privileges or modify other skills or global agent configuration. The scripts operate only within the working directory.

Assessment

This skill appears internally consistent for generating infographics: it includes many template files and two Node scripts to render the custom DSL to SVG and convert to PNG. Before installing/using it, consider: 1) it requires you to run Node (or bun) and install @antv/infographic, opentype.js, and sharp — install in a controlled environment or sandbox; 2) the scripts read and write files in the agent's current working directory, so avoid running them where sensitive files exist; 3) the bundled font file is named with a .txt extension (likely an embedded binary) — verify the font is legitimate if that matters to you; 4) if you allow the agent to run this autonomously, it will execute file conversion commands locally (no network exfiltration was observed). If you need higher assurance, review the full SKILL.md workflow and run the scripts in an isolated container before granting broader access.

Infographics transform data, information, and knowledge into perceptible visual language. They combine visual design with data visualization, using intuitive symbols to compress complex information, helping audiences quickly understand and remember key points.

Before starting the task, you need to understand the AntV Infographic syntax specification, including template list, data structure, theme, etc.

Strictly follow the generation workflow without any deviation

Specifications

AntV Infographic Syntax

AntV Infographic syntax is a custom DSL for describing infographic rendering configuration. It uses indentation to express structure, suitable for AI to directly generate and stream output. Core information includes:

1. template: Expresses information structure using templates.
2. data: Infographic data, containing title, desc, and main data fields.
3. theme: Theme configuration, containing palette, fonts, stylization, etc.

Mandatory Syntax Rules

• The first line must be infographic <template-name>.
• Template list only contains the template name itself; when actually outputting, the first line must explicitly write the infographic prefix.
• Use data / theme blocks, with uniform two-space indentation within blocks.
• Key-value pairs use key space value; object arrays use - as item prefix.
• icon uses icon keywords, e.g., star fill, mingcute/server-line.
• value should preferably use pure numeric values; numeric units should preferably be expressed in label or desc.
• palette recommends using inline simple array syntax, e.g., palette #4f46e5 #06b6d4 #10b981.
• Color values in palette are bare values, no quotes, no commas.
• data should contain only one main data field matching the template, avoid mixing lists, sequences, compares, values, root, nodes simultaneously.

Main data field selection rules:

• list-* → lists
• sequence-* → sequences, optional order asc|desc
• sequence-interaction-* → sequences + relations
  • sequences represents swimlane list
  • Each swimlane must contain label
  • children of each swimlane represents node list
  • Each item under children must be written as an object entry and contain label
  • Nodes optionally have id, icon, step, desc, value
  • step is used to indicate time hierarchy; same step is at the same height
• compare-* → compares
  • compare-binary-* / compare-hierarchy-left-right-*
    • The first layer of compares must have exactly two root nodes, representing the two parties being compared
    • Both root nodes should contain children
    • The actual comparison items are written under their respective children
    • Each item under children must be written as an object entry and contain label
    • Even if each side has only 1 metric, write it as 1 object entry inside children
  • compare-swot
    • compares can directly contain multiple root nodes
    • Each root node optionally has children
  • compare-quadrant-*
    • compares directly contains 4 quadrant root nodes
• hierarchy-structure → items
• hierarchy-* → single root, recursively nested through children
• relation-* → nodes + relations
  • Simple relations can also directly use arrow syntax to express relationships
• chart-* → values
  • chart-line-plain-text / chart-bar-plain-text / chart-column-simple all use single ordered values
  • Each data point uses label for category, uses value for numeric value
  • Line chart order is expressed by the order of entries in values
• When structure cannot be clearly determined, use items as fallback

Theme rules:

• theme is used for custom themes, e.g., palette, base, stylize
• Use theme.base.text.font-family to specify font, e.g., 851tegakizatsu
• Use theme.stylize to select built-in styles and pass parameters
  • rough: hand-drawn effect
  • pattern: pattern fill
  • linear-gradient / radial-gradient: gradient style
• Only output Infographic syntax itself, do not output JSON, explanatory text, or additional Markdown paragraphs

Template Selection Guidelines

• Strict sequence, step progression, stage evolution → sequence-*
• Multi-role or multi-system interaction → sequence-interaction-*
• Parallel point enumeration → list-row-* / list-column-* / list-grid-*
• Two-party comparison, plan comparison, before/after comparison → compare-binary-*
  • First determine who the two parties are
  • Then expand children for each party respectively
• SWOT analysis → compare-swot
• Quadrant analysis → compare-quadrant-*
• Hierarchical tree structure → hierarchy-tree-*
• Statistical trends, single sequence changes → chart-line-plain-text
• Statistical comparison, single group numeric comparison → chart-bar-plain-text / chart-column-simple
• Node relationships, process dependencies → relation-*
• Word frequency theme display → chart-wordcloud
• Mind map → hierarchy-mindmap-*

Output Format

Only output one plain code block, without any explanatory text:

infographic list-row-horizontal-icon-arrow
data
  title Title
  desc Description
  lists
    - label Item
      value 12.5
      desc Description
      icon document text
theme
  palette #3b82f6 #8b5cf6 #f97316

Generation Workflow

Step 1: Understand User Requirements and Select Suitable Template

Deeply think and understand user requirements, select one appropriate template according to the Template Selection Guidelines above.

Template directory: mindchart/templates/

Step 2: Generate Infographic Syntax File

Generate infographic syntax file according to template syntax and the Specifications above.

• Syntax file format: {title}.md
• Ensure the generated infographic displays with white background and black text and icons
• Ensure the length of desc field is less than 17 tokens

Self-Check Checklist

Before outputting, check the following:

• Is the first line infographic <template-name>?
• Is only one main data field matching the template used?
• Is palette using bare color values without quotes and commas?
• Are swimlane nodes of sequence-interaction-* all written as children -> - label ...?
• Do compare-binary-* / compare-hierarchy-left-right-* have only two root nodes, with content on both sides placed under their respective children?
• Does each item under children explicitly contain label?
• Does chart-line-plain-text use single ordered values?
• Is there no JSON, explanatory text, or extra code blocks in the output?

Step 3: Generate SVG File

node mindchart/scripts/ifgc2svg {title}.md {title}.svg

Step 4: Convert to PNG File

node mindchart/scripts/svg2png {title}.svg {title}.png

Step 5: Return PNG/SVG File

• If user is using openclaw or other bot, send png and svg as images to the user
• In other cases, save svg and png to the specified directory or project directory