ai-figure

Convert markdown or JSON diagram definitions into self-contained SVG diagrams.

24|1|Updated Mar 6, 2024
One-click install
npx skills add https://github.com/hustcc/ai-figure --skill ai-figure
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ai-figure
Source: https://github.com/hustcc/ai-figure/tree/main
Command: npx skills add https://github.com/hustcc/ai-figure --skill ai-figure

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

You can describe diagrams in plain text or code without manually calculating coordinates, then instantly get clean, self-contained SVG outputs.

Core Features & Use Cases

  • Markdown-to-SVG diagrams: Converts figure <type> definitions and simple syntax (nodes, edges, sections, axis ticks) into fully rendered SVG diagrams.
  • Typed JSON config via fig(): Produces the same diagrams programmatically with strongly structured inputs for each diagram type.
  • Auto layout across many diagram styles: Flowcharts, trees, mindmaps, architecture stacks, sequence diagrams, quadrant charts, Gantt charts, state machines, ER diagrams, timelines, swimlanes, bubble charts, and radar charts.
  • Theme and palette support: Generates light/dark variants and uses named or custom color palettes for consistent styling.

Quick Start

Ask the AI to generate a flowchart SVG by providing a markdown diagram definition starting with figure flow, then include nodes and edges using -->.

Frequently Asked Questions about ai-figure

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate SVG diagrams from markdown?▼

To generate SVG diagrams from markdown, you write diagram definitions starting with a `figure <type>` header and use simple syntax for nodes, edges, and sections to get a fully rendered SVG output.

What diagram types can I create using automatic layout?▼

Automatic layout supports generating SVG outputs for flowcharts, trees, mindmaps, architecture stacks, sequence, quadrant, Gantt, state machines, ER, timeline, swimlanes, bubble charts, and radar charts.

Can I use JSON config to create flowcharts programmatically?▼

Yes, you can produce flowcharts programmatically by using typed JSON config via the `fig()` function, which accepts strongly structured inputs for each diagram type to output clean SVGs.

Does the SVG generation support custom themes and color palettes?▼

Yes, SVG generation supports theme and palette styling, allowing you to generate light or dark variants and apply named or custom color palettes for consistent diagram styling.

Do I need any external dependencies to render markdown to SVG?▼

No external dependencies are required to render markdown to SVG. The Skill parses the diagram definition, validates the nodes and edges, and returns a complete self-contained SVG string suitable for browser or Node.js usage.