skills.rest
linchuncheng
linchunchengCOMMUNITY
Explore all skills by this author →
GitHub

diagram

Generate SVG diagrams from natural language or JSON configurations.

Updated Apr 11, 2026
Search Tags:#architecture#svg#generator#diagram#call-graph#data-flow
One-click install
npx skills add https://github.com/linchuncheng/skill-hub --skill diagram-linchuncheng
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram
Source: https://github.com/linchuncheng/skill-hub/tree/main/diagram
Command: npx skills add https://github.com/linchuncheng/skill-hub --skill diagram-linchuncheng

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Visual communication of complex architectures and workflows is hard without clear diagrams; this skill generates consistent, high-quality SVG diagrams from natural language prompts or JSON configurations to convey structure and behavior.

Core Features & Use Cases

  • Supports multiple diagram types: system architecture, call graphs, deployment diagrams, data flow, domain models, and core principle diagrams.
  • Workflow-driven generation: describe the diagram you need and the tool renders SVG with proper layout, styling, and optional animations.
  • Validation & portability: outputs SVG that adheres to the project’s conventions and can be validated by an included validator.

Quick Start

Describe your diagram in plain language or as JSON, and trigger the SVG generation.

Frequently Asked Questions about diagram

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

FAQPage Schema
How do I generate an SVG architecture diagram from natural language?▼

You can generate SVG architecture diagrams by providing a natural language prompt or JSON configuration describing your system, and the tool renders the visual output with proper layout, styling, and routing.

What diagram types can I create from JSON configurations?▼

Supported diagram types include system architecture diagrams, deployment topologies, data-flow diagrams, call graphs, and domain models, all rendered as conformant SVG files.

Does the generated SVG support 90-degree routing and obstacle avoidance?▼

Yes, the generated SVG enforces 90-degree routing and obstacle avoidance, using path elements with marker-end and fill none attributes to ensure clean, readable layouts.

Can I validate SVG output against project conventions?▼

Yes, the tool integrates with a validator to ensure SVG conformance, checking that the generated output adheres to established project conventions for portability and consistency.

What is the best way to visualize complex software systems without manual drawing?▼

Describing your structure or behavior in plain language allows the tool to automatically render consistent, high-quality SVG diagrams, eliminating the need for manual layout work.

Related Skills

Explore More Software Engineering Skills→
aivos-xieaivos-xie
1

architecture-diagram

Convert text descriptions of system architecture into dark-themed HTML diagrams with SVG.

Community
Intermediate
ToqsickToqsick

architecture-diagram

Generate dark-themed SVG architecture diagrams as HTML files.

Community
Intermediate
rohanbhatia27rohanbhatia27
1

diagramming-code

Generate Mermaid diagrams from code graphs for call paths and dependencies.

Community
Intermediate
simplecore-incsimplecore-inc

mermaid

Create Mermaid diagrams from natural language and render them to SVG/PNG/PDF.

Official
Advanced