skills.rest
dogekiki
dogekikiCOMMUNITY
Explore all skills by this author →
GitHub

figure-spec

Generate editable SVG architecture diagrams from structured JSON specifications.

1|Updated Jul 21, 2026
Search Tags:#workflow#architecture#json#visualization#svg#diagram
One-click install
npx skills add https://github.com/dogekiki/SP-test --skill figure-spec-dogekiki
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
SSiertsemaSSiertsema

logging-tracing-design

Define logging and tracing design with structured JSON logs and OpenTelemetry integration.

Community
Advanced
rmjamesrmjames
1

image-processor

Resize and crop raster and SVG images with ImageMagick and SVGO.

Community
Advanced
NITRR-OfficialNITRR-Official
4

diagrammer

Convert JSON specifications into SVG diagrams for technical documentation.

Official
Basic
Shallow-WShallow-W

figure-spec

Convert structured FigureSpec JSON into deterministic editable SVG diagrams.

Community
Advanced