skills.rest
zhuyingqin
zhuyingqinCOMMUNITY
Explore all skills by this author →
GitHub

figure-spec

Render deterministic SVG architecture and workflow diagrams from validated FigureSpec JSON.

1|1|Updated May 19, 2026
Search Tags:#svg#architecture diagrams#publication-ready#vector graphics#deterministic rendering#figurespec#workflow pipelines
One-click install
npx skills add https://github.com/zhuyingqin/ARIS-WEB --skill figure-spec-zhuyingqin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figure-spec
Source: https://github.com/zhuyingqin/ARIS-WEB/tree/main/crates/runtime/assets/skills/figure-spec
Command: npx skills add https://github.com/zhuyingqin/ARIS-WEB --skill figure-spec-zhuyingqin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill solves the problem of generating formal, publication-quality architecture and workflow figures without relying on unreliable, hand-drawn, or non-deterministic illustrations.

Core Features & Use Cases

  • Deterministic JSON → SVG rendering: converts the same FigureSpec into identical, reproducible SVG output for paper-grade diagrams.
  • Editable vector output: outputs plain-text SVG that you can directly edit and refine after generation.
  • Validated, schema-aligned specs: checks FigureSpec structure before rendering and provides clear error messages for malformed specs.
  • Publication-ready diagram types: supports architecture, workflow pipelines, audit cascades, and system topology diagrams with shape-aware edges.
  • Chinese/Japanese/Korean label handling: improves multi-line label rendering for CJK text with consistent sizing.

Quick Start

Use the figure-spec skill to render a diagram from your FigureSpec JSON file named spec.json into an output SVG named diagram.svg.

Frequently Asked Questions about figure-spec

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

FAQPage Schema
How do I generate publication-quality SVG architecture diagrams from JSON?▼

Yes, you can render workflow pipeline diagrams by defining the system topology and cascades in a FigureSpec JSON file. The deterministic renderer processes the schema to produce reproducible, editable SVG vector graphics with shape-aware edges.

How do I render workflow pipeline diagrams deterministically from a structured schema?▼

FigureSpec JSON rendering works by validating a structured JSON specification against a schema before mapping nodes, connections, and grouping semantics directly to editable SVG elements. This deterministic process ensures identical JSON inputs always produce identical vector graphics.

Does deterministic SVG rendering support CJK text labels for multilingual architecture diagrams?▼

Yes, deterministic SVG rendering supports CJK text labels for multilingual architecture diagrams by applying consistent sizing and layout rules to Chinese, Japanese, and Korean characters. This ensures multi-line labels render correctly within publication-ready vector graphics.

What is the best way to create editable vector graphics for system topology without external API keys?▼

The best way to create editable vector graphics for system topology without API keys is using a local deterministic renderer that converts FigureSpec JSON into plain-text SVG. This allows you to refine the publication-ready output directly in your text editor.

Why does my JSON to SVG conversion fail during schema validation?▼

JSON to SVG conversion fails during schema validation when the FigureSpec JSON structure is malformed or missing required node, edge, or grouping semantics. The renderer checks the spec structure before mapping to vector graphics and provides clear error messages for invalid schemas.

Related Skills

Explore More Design & Creative Skills→
lightrain-alightrain-a

figure-spec

Convert FigureSpec structured JSON into editable SVG diagrams.

Community
Intermediate
Chanw-researchChanw-research
38

figure-spec

Generate deterministic SVG diagrams from structured FigureSpec JSON specifications.

Official
Advanced
xqinagxqinag

figure-spec

Generate editable SVG diagrams from structured FigureSpec JSON.

Community
Advanced
liumeixinliumeixin
4

excalidraw

Generate hand-drawn style diagrams in Excalidraw JSON format.

Community
Intermediate