skills.rest
Lingjie-wang
Lingjie-wangCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figure-spec

Generate deterministic architecture, workflow, and pipeline diagrams from JSON specs into editable SVG.

Updated Jul 9, 2026
Search Tags:#workflow#architecture#json#svg#deterministic#diagram#vector graphics
One-click install
npx skills add https://github.com/Lingjie-wang/autoRL --skill figure-spec-lingjie-wang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figure-spec
Source: https://github.com/Lingjie-wang/autoRL/tree/main/Auto-claude-code-research-in-sleep/skills/figure-spec
Command: npx skills add https://github.com/Lingjie-wang/autoRL --skill figure-spec-lingjie-wang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Creating precise, publication-quality architecture and workflow diagrams for technical papers is tedious with GUI tools and unpredictable with AI illustration. This Skill renders structured JSON specs into deterministic, editable SVG vector graphics. ## Core Features & Use Cases - Deterministic JSON-to-SVG Rendering: The same FigureSpec JSON always produces identical SVG output, with schema validation and clear error messages. - Shape-Aware Diagrams: Supports rect, rounded, circle, ellipse, and diamond nodes with correct edge clipping, groups, self-loops, curved edges, and CJK multi-line labels. - Use Case: You need a layered system architecture figure for a paper. Describe the layers and connections, and the Skill drafts the FigureSpec JSON, validates it, renders an SVG, and converts it to PDF for LaTeX inclusion. ## Quick Start Ask the assistant to draw an architecture diagram of your system as a deterministic SVG figure using figure-spec.

Frequently Asked Questions about figure-spec

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

FAQPage Schema
How do I generate an architecture diagram as SVG from JSON?▼

Write a FigureSpec JSON file defining canvas size, nodes with positions and shapes, edges, and groups, then run the renderer with the render command. The output is an editable SVG that can be converted to PDF with rsvg-convert for LaTeX.

What diagram types can FigureSpec render?▼

FigureSpec renders layered architecture diagrams, left-to-right workflow pipelines, hub-and-spoke topologies, and audit cascades. It supports rect, rounded, circle, ellipse, and diamond node shapes with solid, dashed, or dotted edges.

When should I use FigureSpec instead of Mermaid or AI illustration?▼

Use FigureSpec when node positions, groupings, and determinism matter, such as formal paper architecture figures. Use Mermaid for quick simple flowcharts and AI illustration for natural or qualitative figures; use data-plot tools for charts.

Does the SVG renderer support Chinese or multi-line labels?▼

Yes, the renderer estimates CJK character width at 1.0 times font size and supports multi-line labels via newline characters in the label field. Sublabels render in smaller text below the main label.

Why does my FigureSpec fail validation?▼

Validation fails on critical issues like duplicate node IDs, missing x or y coordinates, edges referencing unknown nodes, or invalid hex colors. Run the validate command to list all issues, fix the JSON, and re-render.

Does the figure renderer require network access or API keys?▼

No, the renderer runs fully locally with Python standard libraries only. PNG preview optionally uses rsvg-convert or cairosvg if installed, but SVG rendering itself needs no external dependencies.

Related Skills

Explore More Education & Research Skills→
agentic-inagentic-in
577

Excalidraw

Generate editable Excalidraw diagrams from textual system descriptions.

Official
Intermediate
GRIND-Lab-CoreGRIND-Lab-Core
100

paper-writing-pipeline

Automate paper writing from outline to LaTeX, PDF, and DOCX manuscripts.

Official
Advanced
tqLi99tqLi99

paper-figure

Generate publication-quality figures and LaTeX-ready tables from JSON or CSV data.

Community
Advanced
haitao2016haitao2016

diagram-generator

Convert natural language game system descriptions into Mermaid diagrams.

Community
Intermediate