figure-spec

Convert structured FigureSpec JSON into deterministic editable SVG diagrams.

Updated Apr 21, 2026
One-click install
npx skills add https://github.com/Shallow-W/llm-wiki --skill figure-spec-shallow-w
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: figure-spec
Source: https://github.com/Shallow-W/llm-wiki/tree/main/.claude/skills/figure-spec
Command: npx skills add https://github.com/Shallow-W/llm-wiki --skill figure-spec-shallow-w

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill removes the manual, error-prone work of drawing formal architecture/workflow figures by generating deterministic, publication-quality SVG diagrams from structured JSON.

Core Features & Use Cases

  • Deterministic JSON → SVG rendering: the same FigureSpec JSON produces the same editable SVG for consistent paper/slide outputs.
  • Publication-ready architecture & workflow diagrams: supports architecture, workflow pipelines, audit cascades, and system topology figures.
  • Editable vector output: outputs SVG as plain text so you can precisely tweak fonts, spacing, and styling after generation.
  • Schema validation & guardrails: validates the spec structure (nodes, edges, groups) and reports clear issues before rendering.
  • Shape-aware edges and CJK label handling: performs shape-based edge clipping and supports multi-line CJK labels.
  • Local, offline execution: runs without external APIs or network calls.

Quick Start

Ask to generate an editable SVG architecture diagram from your FigureSpec JSON by running the figure-spec renderer on the spec and saving it as an SVG file.

Frequently Asked Questions about figure-spec

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

FAQPage Schema
How do I convert JSON to SVG for architecture diagrams?

You can convert JSON to SVG for architecture diagrams by passing structured FigureSpec JSON to a deterministic renderer. This process generates a publication-quality, editable vector representation without relying on AI illustration.

Can I generate publication-quality SVG workflow pipelines offline?

Yes, you can generate publication-quality SVG workflow pipelines entirely offline. The rendering executes locally without external API calls, ensuring deterministic vector output from your structured JSON input.

Does deterministic SVG generation support multi-line CJK labels?

Yes, deterministic SVG generation supports multi-line CJK labels. The renderer performs shape-aware edge clipping and schema validation to ensure precise node placement and labeled relationships in the final editable vector output.

What is the best way to create editable vector graphics from structured data?

The best way to create editable vector graphics from structured data is using a deterministic JSON-to-SVG renderer. It outputs plain text SVG, allowing you to precisely tweak fonts, spacing, and styling after the initial generation.

Why does my JSON to SVG diagram need schema validation?

Your JSON to SVG diagram needs schema validation to ensure the spec structure for nodes, edges, and groups is correct. It reports clear issues before rendering, preventing error-prone manual drawing and ensuring deterministic output.

When should I use deterministic rendering instead of AI illustration for system topology?

You should use deterministic rendering instead of AI illustration for system topology when you need precise node placement, grouping, and vector editability. It guarantees the same JSON produces the same editable SVG for consistent outputs.