figure-spec

Name: figure-spec
Availability: InStock
Author: dogekiki

Generate editable SVG architecture diagrams from structured JSON specifications.

1|Updated Jul 21, 2026

Search Tags:#workflow #architecture #json #visualization #svg #diagram

Ready to run

npx skills add https://github.com/dogekiki/SP-test --skill figure-spec-dogekiki

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figure-spec
Source: https://github.com/dogekiki/SP-test/tree/main/.trae/skills/figure-spec
Command: npx skills add https://github.com/dogekiki/SP-test --skill figure-spec-dogekiki

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This skill solves the challenge of creating consistent, editable, and deterministic technical diagrams for research papers and system documentation, avoiding the limitations of non-editable AI-generated images.

Core Features & Use Cases

Deterministic Rendering: Produces identical SVG output from the same JSON specification every time.
Publication-Ready: Generates clean, professional architecture, workflow, and pipeline diagrams that are fully editable as plain-text SVG.
Use Case: Use this when you need to document a complex system architecture or a multi-stage data pipeline that requires precise node placement, semantic grouping, and professional styling for a technical report.

Quick Start

Use the figure-spec skill to render the architecture diagram defined in the file named system-arch.json into an output file called architecture.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 architecture diagrams from JSON for technical documentation?▼

You can generate architecture diagrams from JSON by providing structured specifications to a deterministic rendering engine that outputs clean, editable SVG vector graphics tailored for technical documentation.

What is the best way to create editable SVG workflow diagrams without inconsistent AI images?▼

The best way to create editable SVG workflow diagrams is using deterministic rendering from structured JSON, which ensures identical, publication-quality vector output and avoids non-editable AI-generated images.

Do I need a local Python environment to render system topology diagrams?▼

Yes, you need a local Python environment to execute the deterministic rendering logic, process the JSON schema, and validate compliance for your system topology diagrams.

Can I use structured JSON to visualize complex data pipelines and audit cascades?▼

Yes, you can use structured JSON specifications to visualize complex data pipelines and audit cascades, producing professional vector diagrams with precise node placement and semantic grouping.

How to render a layered architecture diagram into a plain-text SVG file?▼

To render a layered architecture diagram into a plain-text SVG file, define your system topology in a JSON specification and execute the rendering script to generate the publication-ready vector output.