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.