figure-spec

Generate editable SVG diagrams from FigureSpec JSON with schema validation.

Updated May 25, 2026
One-click install
npx skills add https://github.com/duypham2801/ThS_LLM --skill figure-spec-duypham2801
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figure-spec
Source: https://github.com/duypham2801/ThS_LLM/tree/main/.claude/skills/figure-spec
Command: npx skills add https://github.com/duypham2801/ThS_LLM --skill figure-spec-duypham2801

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python3, rsvg-convert, cairosvg, and includes scripts (resource) components.

What problem does it solve?

Create precise architecture, workflow, and pipeline figures without the inconsistencies of hand-drawn or AI-generated artwork, producing deterministic, editable SVG output from a structured JSON specification.

Core Features & Use Cases

  • Deterministic JSON → SVG rendering: the same FigureSpec JSON yields the same SVG (given a fixed renderer/version + fonts).
  • Publication-quality, editable vector output: outputs plain-text SVG that can be directly edited or programmatically post-processed.
  • Validated, schema-driven diagrams: includes a renderer-side validator and schema documentation to catch malformed specs early.
  • Shape-aware geometry: supports multiple node shapes and edge clipping so arrows land cleanly on node boundaries.
  • CJK-friendly multi-line labels: supports multi-line labels with consistent line-breaking behavior for Chinese/Japanese/Korean text.

Quick Start

Use figure-spec to generate an SVG by converting your FigureSpec JSON file into a diagram the tool can render deterministically.

Frequently Asked Questions about figure-spec

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

FAQPage Schema
How do I generate deterministic SVG architecture diagrams from JSON?▼

To generate deterministic SVG architecture diagrams from JSON, provide a structured FigureSpec JSON file to the renderer. The same JSON input consistently yields the exact same SVG output, eliminating visual inconsistencies common in hand-drawn or AI-generated artwork.

What is the best way to create publication-ready vector graphics for system topology?▼

The best way to create publication-ready vector graphics for system topology is using a schema-driven JSON specification that renders into editable SVG. This approach guarantees deterministic output with shape-aware geometry, ensuring arrows land cleanly on node boundaries.

Can I render workflow pipeline diagrams with multi-line CJK text labels?▼

Yes, you can render workflow pipeline diagrams with multi-line CJK text labels. The renderer supports consistent line-breaking behavior for Chinese, Japanese, and Korean text, ensuring complex pipeline figures maintain publication quality.

Does SVG diagram generation from JSON require specific local dependencies?▼

Yes, deterministic SVG diagram generation from JSON requires local dependencies including python3, rsvg-convert, and cairosvg. These tools facilitate the resolved local rendering and schema validation needed to produce editable vector output.

How do you validate structured JSON specifications before rendering process pipelines?▼

You validate structured JSON specifications before rendering process pipelines using the integrated renderer-side validator and schema documentation. This mechanism catches malformed FigureSpec files early, preventing rendering errors in your pipeline diagrams.

Why does my AI-generated workflow diagram look inconsistent across multiple renders?▼

AI-generated workflow diagrams look inconsistent across multiple renders due to non-deterministic generation processes. Using a validated JSON-to-SVG schema renderer ensures the same input specification deterministically yields identical, editable vector graphics every time.